Question

是否有办法在public / background.js内包含npm软件包，或在public / manifest.json中声明它们？

我正在尝试使用create-react-app提供的React项目模板创建浏览器扩展，同时使用Mozilla的WebExtension browser API Polyfill（npm上的webextension-polyfill）。

create-react-app为仅熟悉Webpack的用户创建的文件结构：

. (root)
|-- build (output folder for npm run build)
|
|-- node_modules
|   |-- webextension-polyfill
|   |   |-- dist
|   |   |   |-- browser-polyfill.js (what I really want in /build)
|   |   |   |-- browser-polyfill.min.js (minified version)
|   |   |-- LICENSE
|   |   |-- package.json
|   |   |-- README.md
|   +-- (other node packages)
|
|-- public
|   |-- background.js (created by me)
|   |-- favicon.ico
|   |-- index.html
|   +-- manifest.json
|
|-- src
|   |-- index.js
|   |-- App.js
|   +-- (other React related things)
|
|-- .gitignore
|-- package.json
|-- package-lock.json
+-- README.md

我尝试仅在public / background.js内执行import browser from "webextension-polyfill"，并且毫不奇怪，尝试在Chrome或Firefox中安装内置扩展程序会在导入时引发Unexpected Identifier错误。

在manifest.json文件中的“ background”条目中直接访问浏览器polypoly.js会引发文件未找到错误。

我是否必须做npm run eject并修改Webpack构建脚本以将browser-polyfill.js复制到构建目录中？我看到的一种解决方案使用了copy-webpack-plugin，但我想避免尽可能地执行npm run eject。

或者我应该只使用一个符号链接到browser-polyfill.js并将符号链接放到公共内部吗？

最坏的情况是，我只是手动将browser-polyfill.js复制到公共目录中。

尝试完成npm run eject后弄乱了webpack脚本，并决定仅在其他地方创建一个新项目目录，严格用于编译Web扩展程序背景和内容脚本。 react-scripts已针对生产进行了优化，以实现最小化和代码拆分，并且由于webpack仅允许一个输出定义，因此我无法完全规避这些优化。

我只是单独编译它们并复制到background.js中。我建议这样做，因为这样可以让您在扩展的其余部分进行生产优化。

Answer 1

决定创建一个文件夹/src/scripts，其中包含所有扩展脚本以及用于编译这些脚本的单独的webpack配置。我将build中的package.json脚本从react-scripts build修改为react-scripts build && webpack --config webpack.config.js，这将生成扩展脚本，并在构建React应用程序后将其复制到/build中。这样，我可以与React应用程序共享模块。

我还添加了另一个npm脚本"webpack": "webpack --config webpack.config.js"，因此我只能构建扩展脚本，而不必重建所有内容。

最终结果：一个create-react-app项目，无需运行npm run eject，该项目仅包含第二个webpack配置，严格用于捆绑扩展脚本。

在浏览器扩展后台脚本中包含npm软件包

1 个答案: