Webpack和以编程方式注入的内容脚本

Question

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

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

这成了问题,因为我使用Webpack捆绑所有东西.基本上,后台脚本正在加载许多模块,这些模块都配置为在某些情况下以编程方式注入内容脚本.

但是,我无法弄清楚这些内容脚本将如何在捆绑的应用程序中"找到".它们从未显式导入,仅在executeScript调用中引用.

同时,内容脚本使用React,因此它们必须通过babel-loaderWebpack.

有任何想法吗？

Answer 1

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

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

然后，您进行第二个 webpack 构建来构建您的扩展。此扩展将使用原始加载器和importwebpack 编译的内容脚本，然后将它们全部作为字符串局部变量：

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

现在您可以根据需要将脚本注入到选项卡中：

chrome.tabs.executeScript(null, scriptA);