使用动态import() 函数。

与使用 元素的不安全解决方法不同，此解决方法在相同的安全 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"
  ]

了解更多详情：

• 如何使用 ES6“导入”带有 Chrome 扩展
• Chrome 扩展程序中 ES6 导入的工作示例
• chrome.runtime.getURL李>

希望有帮助。

点赞 +0

添加回复 关闭回复

P粉141035089

回复

一个安全的解决方法是此处的另一个答案中显示的动态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();

这有效！没有抛出任何错误，我很高兴。 :)

点赞 +0

添加回复 关闭回复

P粉141035089

回复