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

【问题标题】：Webpack and programmatically injected content scriptsWebpack 和以编程方式注入的内容脚本
【发布时间】：2015-11-24 11:06:28
【问题描述】：

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

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

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

但是，我不知道如何在捆绑的应用程序中“找到”这些内容脚本。它们从未显式导入，只是在 executeScript 调用中引用。

同时内容脚本使用React，所以要经过Webpack中的babel-loader。

有什么想法吗？

【问题讨论】：

所以基本上你必须创建一个包装函数来注入 babel 脚本（可以说是一个非常大的脚本），然后是实际的内容脚本（可能还有触发 babel 的代码）......不是你担心开销可能太大？
@wOxxOm：老实说，我想避免这种臃肿，但我是 Webpack 的新手，所以我不确定它可以做什么来防止这种情况发生。跨度>
有效的方法是注入预编译脚本。我想您必须手动定义要预编译的脚本列表，但我不是 webpack 专家。

【解决方案1】：

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

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

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

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

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

chrome.tabs.executeScript(null, scriptA);

【讨论】：

【解决方案2】：

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

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

chrome.tabs.executeScript(null, ContentScript);

【讨论】：