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

Question

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

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

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

但是，我无法弄清楚这些内容脚本在捆绑应用程序中的表现如何 "found"。它们从未明确导入，只是在 executeScript 调用中引用。

同时，content scripts使用了React，所以需要经过Webpack中的babel-loader

有什么想法吗？

Answer 1

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

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

chrome.tabs.executeScript(null, ContentScript);

Answer 2

您的内容脚本在 webpack 术语中有效 "entry points"。

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

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

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

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

chrome.tabs.executeScript(null, scriptA);

Webpack and programmatically injected content scripts