Sambungan Chrome: Import modul ES6 dalam skrip kandungan

Question

Dalam Chrome 61, sokongan untuk modul JavaScript telah ditambahkan. Sekarang saya menjalankan Chrome 63.

Saya cuba menggunakan modul dalam skrip kandungan sambungan Chrome menggunakan sintaks import/eksport

Dalammanifest.json:

"content_scripts": [
    {
        "js": [
            "content.js"
        ],
    }
]

Dalammy-script.js (dengan content.js direktori yang sama ):

'gunakan ketat';

const injectFunction = () => window.alert('hello world');

eksport lalai injectFunction;

Dalamkandungan.js:

'gunakan ketat';

import injectFunction daripada './my-script.js';
injectFunction();

Saya mendapat ralat ini:Ralat sintaks tidak ditangkap: Pengecam tidak dijangka

Jika saya menukar sintaks import kepada import {injectFunction} daripada './my-script.js'; saya mendapat ralat ini: Uncaught SyntaxError : Token yang tidak dijangka {<

Adakah terdapat masalah menggunakan sintaks ini dalam kandungan.js dalam sambungan Chrome (kerana dalam HTML anda perlu menggunakan < ;kod>

Answer 1

Gunakan fungsi dinamik import().

Tidak seperti penyelesaian yang tidak selamat menggunakan elemen 元素的不安全解决方法不同，此解决方法在相同的安全 JS 环境（内容脚本的隔离世界）中运行，您导入的模块仍然可以访问全局变量以及初始内容脚本的函数，包括内置的 chrome API，例如 chrome.runtime.sendMessage

chrome terbina dalam, seperti

chrome.runtime.sendMessage. content_script.js

Dalam

content_script.js ia kelihatan seperti

(async () => {
  const src = chrome.runtime.getURL("your/content_main.js");
  const contentMain = await import(src);
  contentMain.main();
})();

Anda juga perlu mengisytiharkan skrip yang diimport dalam

Sumber Boleh Akses Web

manifes:

// ManifestV3

  "web_accessible_resources": [{
     "matches": ["<all_urls>"],
     "resources": ["your/content_main.js"]
   }],

// ManifestV2

  "web_accessible_resources": [
     "your/content_main.js"
  ]

Ketahui butiran lanjut:
Cara menggunakan "import" ES6 dengan sambungan Chrome
Contoh kerja import ES6 dalam sambungan Chrome
• chrome.runtime.getURL李>chrome.runtime.getURL

🎜Semoga ini membantu. 🎜

Answer 2

Penafian

Pertama sekali, adalah penting untuk ambil perhatian bahawa mulai Januari 2018, skrip kandungan tidak menyokong modul. Penyelesaian ini memintas sekatan pada sambungan anda dengan membenamkan teg modul script ke dalam halaman yang dikembalikan.

Ini adalah penyelesaian yang tidak selamat!

Skrip web (atau sambungan lain) boleh mengeksploitasi kod anda dan mengekstrak/menipu data dengan menggunakan setters/getters, proksi pada Object.prototype dan prototaip lain Object.prototype 和其他原型上使用 setter/getter、代理来利用您的代码并提取/欺骗数据函数和/或全局对象，因为 scriptfungsi dan/atau objek global, Kerana kod dalam elemen

berjalan dalam konteks JS halaman, bukan dalam persekitaran JS terpencil selamat yang menjalankan skrip kandungan secara lalai.

Penyelesaian yang selamat ialah dinamik import() ditunjukkan dalam jawapan lain

di sini.

Penyelesaian

Ini milik sayamanifest.json

:

    "content_scripts": [ {
       "js": [
         "content.js"
       ]
    }],
    "web_accessible_resources": [
       "main.js",
       "my-script.js"
    ]

web_accessible_resourcesSila ambil perhatian bahawa saya mempunyai dua skrip dalam .

Ini milik sayacontent.js

:

    'use strict';
    
    const script = document.createElement('script');
    script.setAttribute("type", "module");
    script.setAttribute("src", chrome.extension.getURL('main.js'));
    const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    head.insertBefore(script, head.lastChild);

main.jsIni akan memasukkan ke dalam halaman web sebagai skrip modul.

main.jsSemua logik perniagaan saya kini masuk

.

main.js（以及我将导入的所有脚本）必须位于中清单中的 web_accessible_resourcesUntuk kaedah ini berfungsi,

(dan semua skrip yang saya import)

mesti ada dalam web_accessible_resources dalam manifes dalam . my-script.js Contoh penggunaan:

main.js

    'use strict';
    
    const injectFunction = () => window.alert('hello world');
    
    export {injectFunction};

Dalam

ini ialah contoh skrip import: 🎜

    'use strict';
    
    import {injectFunction} from './my-script.js';
    injectFunction();

🎜Ini berkesan! Tiada kesilapan yang dilemparkan dan saya gembira. :)🎜