前言
Chrome Extension 是一种用于增强浏览器功能的小型程序。通过开发 Chrome Extension，可以为浏览器添加各种扩展功能，从而提高使用效率，提升用户体验。
generator-chrome-extension-tsx 是一个基于 Yeoman 的 Chrome Extension 模板生成器，可以帮助我们快速创建基于 TypeScript 和 React 的 Chrome Extension，极大地提高了开发效率。本文介绍如何使用 generator-chrome-extension-tsx 创建 Chrome Extension。
安装
在使用 generator-chrome-extension-tsx 之前，需要先安装以下工具：
- Node.js：https://nodejs.org/
- Yeoman：
npm install -g yo。 - generator-chrome-extension-tsx：
npm install -g generator-chrome-extension-tsx。
创建项目
在命令行中使用以下命令创建项目：
yo chrome-extension-tsx
创建过程中会要求填写项目名称、作者等信息，填写完毕后，会生成一个基于 TypeScript 和 React 的 Chrome Extension 的模板项目。
目录结构
生成的项目目录结构如下：
-- -------------------- ---- ------- ------------- --- ---------- - --- ---- --- ---------- - ----- --- --------- - ---- --- ----------------- - ----- --- ------------ - ------ --- ------- - --- ------ - ------ - --- ------ - --- ------------- - -------- --- ---- - --- ------- - ------- - --- ------------ - ---------- ----- - --- ----------- - -- ----- - --- ---------- - ------- - --- ------ - ------- - --- ------- - --------- - --- ------ - ------- - --- --------- - ---- - --- ---------- - ------ --- ------------- - ---------- ---- --- ----------------- - ------- ----
- public/16.png 和 public/48.png：用作扩展程序图标。
- public/manifest.json：扩展程序清单文件，定义了扩展程序的基本信息、文件结构、权限、菜单等信息。
- src/index.tsx：入口文件，定义了 React 组件等信息。
- src/index.scss：全局样式表。
- src/assets/：存放静态资源文件。
- src/backgrounds/：background 脚本文件夹，定义了 Chrome Extension 的后台脚本。
- src/components/：存放所有 UI 组件。所有组件都采用无状态的函数组件形式实现，组件之间可以共享逻辑，提高代码复用性。
- src/pages/：存放所有页面组件。
- src/constants/：存放常量定义文件。
- src/stores/：存放全局状态管理文件。
- src/utils/：存放各种工具函数。
示例
以下示例演示了如何在 Chrome 扩展中显示“Hello, World!”：
在 src/pages 目录下创建 HelloWorld.tsx 文件：
import * as React from 'react';
const HelloWorld: React.FC = () => {
return <div>Hello, World!</div>;
};
export default HelloWorld;在 src/index.tsx 中引入 HelloWorld 组件：
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import HelloWorld from './pages/HelloWorld';
ReactDOM.render(<HelloWorld />, document.getElementById('root'));在 public/manifest.json 中指定 HelloWorld 组件的位置：
-- -------------------- ---- -------
-
------------------- --
------- --- -----------
---------- --------
-------------- ------- ------ -- ------ -----------
------------------ -
-
----- -
-----------
--
---------- -
------------
--
--------- ---------------
-
--
----------------- -
---------------- ------------
-
-在 public/popup.html 中引入生成的 bundle.js 文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- -------------- ----- ---------------- ----------------- ------- ------ ---- ---------------- ------- ------------------------- ------- -------
然后使用以下命令编译和打包项目：
npm run build:dev npm run build
最后，将生成的 dist/ 目录拖到 Chrome 扩展管理页面即可。
结语
generator-chrome-extension-tsx 为 Chrome Extension 的开发提供了很好的模板和工具。使用它能够快速创建一个基于 React 和 TypeScript 技术栈的项目，为 Chrome Extension 开发提供了更高效的方式。不过，需要注意的是，由于 Chrome Extension 与普通网页开发有所不同，需要开发者掌握一些常用的 Chrome Extension API。
当然，在实际开发中，还有很多需要注意的地方，例如权限申请、数据存储、消息通信等等，这些都是很有挑战性的。因此，我们需要不断地学习与实践，才能够在 Chrome Extension 的开发中日益成长。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566af81e8991b448e2ed6