后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 create-react-app 开发 Chrome 扩展程序
步骤 1：⚛ 创建一个 React 应用
第二步：修改public/manifest.json
步骤 3：🏗 结构
步骤 4：🎩 魔法
第 5 步：🎉 运行并享受
源代码
最后的想法
create-react-app（CRA）可能是构建、开发和部署 React 应用最常用的方法。几周前，我正在开发一个Chrome 扩展程序。我想用 CRA 来实现，但 CRA 只支持开箱即用的 SPA。
我找到了@bayardlouis470的文章《在 React 中创建 Chrome 扩展程序》，我用它开发了我的扩展程序，但他的方法主要存在 3 个问题：
- 它不支持多页（如果您希望扩展程序有选项页面和弹出窗口）
- 您仅使用生产版本，这使得调试变得更加困难。
- 每次修改代码后，都需要重新运行构建命令
所以我决定更进一步。这里将分享如何定制 CRA 来满足我们开发 Chrome 扩展程序的需求（完整代码链接在文末）。
步骤 1：⚛ 创建一个 React 应用
npx create-react-app extension
第二步：修改public/manifest.json
您已经有由 CRA 创建的清单文件，但我们需要对其进行更改以符合扩展要求
{
"name": "Awesome Extension",
"version": "0.0.1",
"manifest_version": 2,
"description": "create-react-app for extensions",
"icons": {
"128": "logo128.png"
},
"permissions": [],
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "logo128.png",
"default_popup": "popup.html"
},
"options_page": "index.html"
}
请注意，我们有index.html选项页面和popup.html扩展弹出窗口。
步骤 3：🏗 结构
在 ./src 里面
继续在 src 中创建一个文件夹，options分别用于 和popup。同时，创建你的background.js文件。
在 ./public 里面
复制index.html文件并将其重命名为popup.html
里面 。/
创建.env文件并添加以下内容
INLINE_RUNTIME_CHUNK=false
这很重要，因为 Chrome 不允许内联脚本 js 代码
步骤 4：🎩 魔法
现在我们需要定制 CRA。为此，我们将使用 4 个很棒的软件包：
- 定制-cra
- React-app-rewired
- 复制 webpack 插件
- React-app-rewire-多入口
1 和 2 覆盖 CRA webpack 默认配置。3 复制我们的静态资产，4 支持多个页面。所以继续安装它们。
npm -i customize-cra react-app-rewired copy-webpack-plugin react-app-rewire-multiple-entry --save-dev
现在，所有的魔法都发生了。config-overrides.js在根文件夹中创建以下代码
const {
override,
overrideDevServer,
addWebpackPlugin
} = require("customize-cra");
const CopyPlugin = require('copy-webpack-plugin');
const multipleEntry = require('react-app-rewire-multiple-entry')([
{
// points to the popup entry point
entry: 'src/popup/index.js',
template: 'public/popup.html',
outPath: '/popup.html'
},
{
// points to the options page entry point
entry: 'src/options/index.js',
template: 'public/index.html',
outPath: '/index.html'
}
]);
const devServerConfig = () => config => {
return {
...config,
// webpackDevService doesn't write the files to desk
// so we need to tell it to do so so we can load the
// extension with chrome
writeToDisk: true
}
}
const copyPlugin = new CopyPlugin({
patterns: [
// copy assets
{ from: 'public', to: '' },
{ from: 'src/background.js', to: '' }
]
})
module.exports = {
webpack: override(
addWebpackPlugin(
copyPlugin
),
multipleEntry.addMultiEntry,
),
devServer: overrideDevServer(
devServerConfig()
),
};
package.json为了使一切协同工作，我们只需要修改要使用的脚本react-app-rewired，它看起来如下所示：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
第 5 步：🎉 运行并享受
与任何其他 CRA 项目一样，使用以下命令运行开发 cmd
npm run start
Wepback 会创建一个dist文件夹，并将其作为解压后的扩展程序加载到 Chrome 中。当您准备发布扩展程序时，可以使用 build 命令。
如果一切顺利，你的弹窗会像这样。最棒的是，如果你修改了代码，就能立即看到效果🥳
源代码
我在 GitHub 上发布了完整的样板，因此您可以根据需要检查代码，或者直接克隆来开发您自己的扩展。
最后的想法
改进空间：
- 最小化 background.js 文件
- 优化
- 使用 webpack-extension-reloader？
如果您有任何问题、想法或建议，请告诉我！
文章来源：https://dev.to/jamalx31/use-create-react-app-to-develop-a-chrome-extension-14ld