共计 3203 个字符，预计需要花费 9 分钟才能阅读完成。
Chrome 因强大的扩展库使得其成为最主流的浏览器，React 是当下最流行的 JS 库，如何使用 React 开发 Chrome 扩展程序呢？本文以开发一个查单词的扩展程序为例，对 React 开发 Chrome 扩展程序做些简单的介绍。
需求#
双击 Chrome 网页中的英文单词时弹出对话框显示是否该单词的音标、含义和例句。
最终效果如下：
过程#
创建项目#
首先确保已安装 Node.js 和 npm，如果未安装的话，请参考 Node.js 官网进行安装。安装完成后，使用 create-react-app 来创建 React 项目，本文假设项目名为 chrome-app：
npx create-react-app chrome-app --template typescript创建完成后，可以看到有如下提示：
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.在 VS Code 中打开 chrome-app 该文件夹，可以看到项目结构如下：
加载项目到扩展程序库#
Chrome 根据扩展程序的 manifest.json 来运行，所以需要将项目 public 目录下的 manifest.json 修改为 Chrome 能识别的字段，修改后的内容如下：
{
"manifest_version": 3,
"name": "Chrome App",
"description": "Chrome extension app demo",
"version": "0.0.1",
"author": "qileq",
"icons": {
"16": "logo192.png",
"32": "logo192.png",
"48": "logo192.png",
"128": "logo192.png"
},
"action": {
"default_title": "Open the popup",
"default_popup": "index.html"
}
}action用来控制扩展程序在 Chrome 工具栏的行为，上面设置的default_popup表示要弹出来的 HTML 文件，default_title表示鼠标移动到插件图标时显示的文本。icons用来设置工具栏中扩展程序的展示图标，可以按不同尺寸设置不同图标，初化图标在action的default_icon中进行设置。
修改完后在终端执行 npm run build 构建项目，此时会生成一个 build 文件夹。打开 Chrome 设置，点击扩展，开启开发者模式，点击Load unpacked，选择刚生成的 build 文件夹：
即可看到扩展程度加载成功了：
点击工具栏扩展管理器，将 Chrome App 固定在工具栏上：
将鼠标移动到 Chrome App 插件上，即可看到 default_title 设置的内容：
点击该图标即可看到 default_popup 设置的 html 内容：
不过目前这个弹窗非常小，可以编辑 src/index.css，在 body 中修改长宽设置：
body {
height: 1000px;
width: 1000px;
...;
}重新执行 npm run build 打包后，在扩展中点击重载按钮或 Update 更新：
然后点击工具栏中的 Chrome App 插件即可看到效果，不过很容易看到，弹窗大小并不是 1000x1000px。这是为什么呢？原因是目前 Chrome 扩展弹窗的长宽大小不能小于 25x25px，也不能大于 600x800px。
实现功能#
接下来开始实现需求中的功能，先创建表示单词属性的接口 IWord：
export interface IWord {
name: string;
phonetic: string;
audio: string;
meaning: string;
example: string;
}为实现选中单词即弹窗显示单词信息的功能，需要通过 service workers 查询单词含义，并使用 content scripts 显示信息，弹窗相关的 CSS 样式在 index.css 中，这几部分代码参考下文提供的仓库地址。
在编写扩展相关功能时，可执行 npm i -D @types/chrome 安装 chrome 包来优化开发。
配置#
实现完功能后，需要将代码文件打包并在 manifest.json 中进行配置。由于 create-react-app 会将 TS 文件打包成 [name].[hash].chunk.js 的形式，所以可以使用 CRACO 来优化修改配置。
-
执行
npm i -D @craco/craco安装 CRACO。 -
在项目根目录下创建 craco.config.js，内容如下：
const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { webpack: { configure: (webpackConfig, {env, paths}) => { return { ...webpackConfig, entry: { main: [paths.appIndexJs], content: './src/content_scripts/Popover.tsx', background: './src/background.ts' }, output: { ...webpackConfig.output, filename: 'static/js/[name].js', }, optimization: { ...webpackConfig.optimization, runtimeChunk: false, }, devtool: "source-map", plugins: [ new HtmlWebpackPlugin({ template: 'public/index.html' }), new MiniCssExtractPlugin({filename: 'static/css/[name].css'}) ], } }, } } -
修改 package.json，将
scripts部分的react-scripts修改为craco，即："scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" } -
修改 manifest.json，增加
background和contennt_scripts分别对应前面的 service workers 和 content scripts` 编译出来的 JS 脚本，内容如下：{ "manifest_version": 3, "name": "Chrome App", "description": "Chrome extension app demo", "version": "0.0.1", "author": "qileq", "icons": { "16": "logo192.png", "32": "logo192.png", "48": "logo192.png", "128": "logo192.png" }, "action": { "default_title": "Open the popup", "default_popup": "index.html" }, "background": { "service_worker": "static/js/background.js" }, "content_scripts": [ { "js": ["static/js/content.js"], "css": ["static/css/main.css"], "matches": ["*://*/*"] } ] }
修改完成后，运行 npm run build 重新打包后再加载，点击网页中的英文单词即可看到效果了。
本文代码仓库为 web-extensions。
