P粉7390793182023-08-28 14:20:34
import()< /code>
函数。与使用 元素的不安全解决方法不同,此解决方法在相同的安全 JS 环境(内容脚本的隔离世界)中运行,您导入的模块仍然可以访问全局变量以及初始内容脚本的函数,包括内置的
chrome
API,例如 chrome.runtime.sendMessage
。
在 content_script.js
中,它看起来像
(async () => { const src = chrome.runtime.getURL("your/content_main.js"); const contentMain = await import(src); contentMain.main(); })();
您还需要在清单的Web 可访问资源中声明导入的脚本:
// ManifestV3
"web_accessible_resources": [{ "matches": ["<all_urls>"], "resources": ["your/content_main.js"] }],
// ManifestV2
"web_accessible_resources": [ "your/content_main.js" ]
了解更多详情:
希望有帮助。
P粉7970046442023-08-28 11:07:40
首先,需要说明的是,自 2018 年 1 月起,内容脚本不支持模块。此解决方法通过将模块 script
标记嵌入到返回的页面中来避开限制到您的扩展程序。
网页脚本(或其他扩展)可以通过在 Object.prototype
和其他原型上使用 setter/getter、代理来利用您的代码并提取/欺骗数据函数和/或全局对象,因为 script
元素内的代码在页面的 JS 上下文中运行,而不是在默认情况下运行内容脚本的安全隔离 JS 环境中。
一个安全的解决方法是此处的另一个答案中显示的动态import()
。
这是我的manifest.json
:
"content_scripts": [ { "js": [ "content.js" ] }], "web_accessible_resources": [ "main.js", "my-script.js" ]
请注意,我在 web_accessible_resources
中有两个脚本。
这是我的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.js
作为模块脚本插入网页中。
我的所有业务逻辑现在都在 main.js
中。
要使此方法发挥作用,main.js
(以及我将导入
的所有脚本)必须位于中清单中的 web_accessible_resources
。
my-script.js
'use strict'; const injectFunction = () => window.alert('hello world'); export {injectFunction};
在 main.js
中,这是导入脚本的示例:
'use strict'; import {injectFunction} from './my-script.js'; injectFunction();
这有效!没有抛出任何错误,我很高兴。 :)