chrome插件模板；使用 React 18 和 Webpack 5 的 Chrome 扩展样板

一、软件介绍（文末提供下载）

      这是一个基本的 Chrome 扩展样板，可帮助您编写模块化和现代的 Javascript 代码，轻松加载 CSS，并在代码更改时自动重新加载浏览器。

github地址：https://github.com/lxieyang/chrome-extension-boilerplate-react

本文信息图片来源于上面GitHub地址

二、软件特征

• Chrome Extension Manifest V3
• React 18
• Webpack 5
• Webpack Dev Server 4
• React Refresh
• react-refresh-webpack-plugin
• eslint-config-react-app
• Prettier
• TypeScript

三、安装和运行

1. Check if your Node.js version is >= 18.
   检查您的 Node.js 版本是否为 >= 18。
2. Clone this repository. 克隆此存储库。
3. Change the package's name, description, and repository fields in package.json.
   在 中更改包的 name 、 description 和 repository 字段 package.json 。
4. Change the name of your extension on src/manifest.json.
   在 上 src/manifest.json 更改扩展的名称。
5. Run npm install to install the dependencies.
   Run npm install 以安装依赖项。
6. Run npm start 跑 npm start
7. Load your extension on Chrome following:
   在 Chrome 上加载您的扩展：
   1. Access chrome://extensions/ 访问 chrome://extensions/
   2. Check Developer mode 检查 Developer mode
   3. Click on Load unpacked extension  Load unpacked extension 点击
   4. Select the build folder.
      选择 build 文件夹。
8. Happy hacking. 祝您愉快。

四、结构

      1、 所有扩展的代码都必须放在该 src 文件夹中，样板已经准备好具有弹出窗口、选项页面、背景页面和新标签页（替换浏览器的新标签页）。但请随意自定义这些。

       2、TypeScript （类型脚本）

       此样板现在支持 TypeScript！Page Options 是使用 TypeScript 实现的。有关示例用法，请参阅 src/pages/Options/ 示例。

      3、 Webpack 自动重新加载和 HRM

       为了使您的工作流程更加高效，此样板使用 webpack 服务器进行开发（从 开始）， npm start 具有自动重新加载功能，每次在编辑器中保存某些文件时，该功能都会自动重新加载浏览器。

       如果需要，您可以在其他端口上运行 dev 模式。只需像这样指定 env var port ：

        $ PORT=6002 npm run start

        4、Content Scripts 内容脚本

       尽管此样板使用 webpack 开发服务器，但它也准备在每次代码更改时将所有 bundles 文件写入磁盘，因此您可以在扩展清单上指向要用作内容脚本的 bundles，但您需要从热重载中排除这些入口点（为什么？为此，您需要在使用 chromeExtensionBoilerplate -> notHotReload 配置上 webpack.config.js 公开哪些入口点是内容脚本。请看下面的示例。

       假设你想使用 myContentScript 入口点作为内容脚本，那么 webpack.config.js 你将配置入口点并将其从热重载中排除，如下所示：

{
  …
  entry: {
    myContentScript: "./src/js/myContentScript.js"
  },
  chromeExtensionBoilerplate: {
    notHotReload: ["myContentScript"]
  }
  …
}

and on your src/manifest.json:

{
  "content_scripts": [
    {
      "matches": ["https://www.google.com/*"],
      "js": ["myContentScript.bundle.js"]
    }
  ]
}

        5、Packing 包装

        开发扩展后，运行命令

$ NODE_ENV=production npm run build

       现在，folder 的内容 build 将是准备提交到 Chrome Web Store 的扩展。只需查看官方指南即可了解有关发布的更多信息。

        6、秘密

        如果您正在开发一个与某些 API 通信的扩展，您可能正在使用不同的密钥进行测试和生产。是一种很好的做法，您不要提交密钥并公开给有权访问存储库的任何人。对于此任务，此样板通过名为 的模块将文件 ./secrets.<THE-NODE_ENV>.js 导入到您的模块上 secrets ，因此您可以执行以下作：

./secrets.development.js

export default { key: '123' };

./src/popup.js

import secrets from 'secrets';
ApiCall({ key: secrets.key });

夸克网盘分享