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
Dalam
"content_scripts": [ { "js": [ "content.js" ], } ] Dalamcontent.js direktori yang sama ):
'gunakan ketat'; const injectFunction = () => window.alert('hello world'); eksport lalai injectFunction; Dalam
'gunakan ketat'; import injectFunction daripada './my-script.js'; injectFunction();
Saya mendapat ralat ini:
Jika saya menukar sintaks import kepada Uncaught SyntaxError : Token yang tidak dijangka {<
Adakah terdapat masalah menggunakan sintaks ini dalam
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Gunakan fungsidinamik
import().Tidak seperti penyelesaian yang tidak selamat menggunakan elemen
chrome terbina dalam, seperti元素的不安全解决方法不同，此解决方法在相同的安全 JS 环境（内容脚本的隔离世界）中运行，您导入的模块仍然可以访问全局变量以及初始内容脚本的函数，包括内置的chromeAPI，例如chrome.runtime.sendMessagechrome.runtime.sendMessage.
Dalamcontent_script.jscontent_script.js ia kelihatan seperti
Anda juga perlu mengisytiharkan skrip yang diimport dalam Sumber Boleh Akses Webmanifes:
// ManifestV3
"web_accessible_resources": [{ "matches": [""], "resources": ["your/content_main.js"] }], // ManifestV2
Ketahui butiran lanjut:
Semoga ini membantu.chrome.runtime.getURL李>chrome.runtime.getURLPenafian
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
scriptke 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
berjalan dalam konteks JS halaman, bukan dalam persekitaran JS terpencil selamat yang menjalankan skrip kandungan secara lalai.Object.prototypedan prototaip lainObject.prototype和其他原型上使用 setter/getter、代理来利用您的代码并提取/欺骗数据函数和/或全局对象，因为scriptfungsi dan/atau objek global, Kerana kod dalam elemenPenyelesaian yang selamat ialahdinamik
di sini. Penyelesaianimport()ditunjukkan dalam jawapan lainIni milik saya
:manifest.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 saya
:content.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
(dan semua skrip yang sayamain.js（以及我将导入的所有脚本）必须位于中清单中的 web_accessible_resourcesUntuk kaedah ini berfungsi,mestiada dalam web_accessible_resources dalam manifes dalam
.Contoh penggunaan:my-script.jsmain.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. :)