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

Question

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

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

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

但是，我无法弄清楚如何在捆绑的应用程序中“找到”这些内容脚本。它们不会被明确导入，仅在executeScript调用中引用。

同时，内容脚本使用React，因此必须通过Webpack中的babel-loader。

有什么想法吗？

Answer 1

您的内容脚本是有效的＆＃34;切入点＆＃34;在webpack-terms。

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

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

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

现在您可以根据需要将脚本注入到标签中：

chrome.tabs.executeScript(null, scriptA);

Answer 2

这应该有效，chrome文档说执行脚本除了字符串代码或字符串文件。

import ContentScript from './content-script-file';

chrome.tabs.executeScript(null, ContentScript);