我正在使用React和Webpack开发Chrome扩展程序。

在这个项目中,不同的模块将使用chrome.tabs.executeScript(null, {file: 'content-script-file.js'})以编程方式注入(inject)内容脚本。

由于我使用Webpack bundle 所有东西,因此这成为问题。基本上,后台脚本正在加载许多模块,这些模块都配置为在某些情况下以编程方式注入(inject)内容脚本。

但是,我无法弄清楚如何在 bundle 的应用程序中“找到”这些内容脚本。它们从未显式导入,只是在executeScript调用中引用。

同时,内容脚本使用React,因此它们必须在Webpack中经过babel-loader

有任何想法吗?

最佳答案

您的内容脚本实际上是webpack术语中的“入口点”。

每个顶级内容脚本都应定义为一个webpack条目。
使用webpack构建这些内容脚本。每个条目都会将其所有依赖项(如React)拉入一个大Blob。

然后,您进行第二次Webpack构建,以构建您的扩展程序。此扩展将使用原始加载程序并import Webpack编译的内容脚本,然后将它们全部作为字符串局部变量:

import scriptA from 'content/build/a';
import scriptB from 'content/build/b';

现在,您可以根据需要将脚本注入(inject)到选项卡中:
chrome.tabs.executeScript(null, scriptA);

07-24 09:44
查看更多