介绍
generator-webext-typescript 是一个基于 Yeoman 的生成器，用于在 Typescript 中创建 WebExtension 项目。WebExtension 是一种浏览器扩展开发模式，它可以在主流的浏览器中运行，包括 Chrome、Firefox、Safari、Edge 等。
在过去，Chrome 和 Firefox 的扩展开发都有各自的不同的 API，因此需要编写两个不同版本的代码。而 WebExtension 则可以跨浏览器平台使用，使得扩展开发更加方便。
使用 generator-webext-typescript 可以方便地创建一个 WebExtension 项目，并且自动集成了 Typescript 开发环境和基础 WebExtension API，大大提高了开发效率。
安装
需要先安装 Yeoman 这个生成器工具，可以使用 npm 安装：
npm install -g yo
接着安装 generator-webext-typescript：
npm install -g generator-webext-typescript
创建项目
在命令行中输入以下命令创建项目：
yo webext-typescript
创建项目的过程中会提示一些选项，如项目名称、作者、扩展 ID 等，可以根据自己的需要进行选择配置。
开发扩展
创建好项目后，进入项目目录，安装依赖：
cd my-extension/ npm install
接着就可以开始进行扩展开发了。在 src 目录中，有一个 index.ts 文件，该文件是扩展的入口文件，在这里可以添加扩展的各种功能。
例如，在扩展中添加一个右键菜单：
chrome.contextMenus.create({
title: '测试菜单',
onclick() {
console.log('点击了右键菜单');
},
});在 package.json 文件中也可以进行配置，比如可以配置文件打包工具、内容脚本、背景脚本等：
-- -------------------- ---- -------
-
------- ---------------
---------- --------
-------------- -------
---------- -
------ ------- -- ----
-------- ------- ----
------- ----- -------- -- ---- ----------- -- ---- --
--
---------- -
------ -
---------- --------------------------
--
----------- ------------------------
-------------- -
----------
------
-------------
----------
------------
----------------
-------------------
--------------------
---------------
----------------
-
--
----------------- -
---------------- -------------
---------------- --- ----------
--
------------- -
---------- -----------------
--
------------------ -
-
---------- ---------------
----- ---------------
--------- --------------
-
--
------------------ -
-------------------------- ----------
------------------------------ ----------
---------------------------- ---------
---------------- ----------
--------- ---------
------------- --------
-
-打包发布
使用 npm run build 命令可以将代码打包为一个 zip 文件，以便上传到 chrome 或 firefox 扩展商店进行发布。可以在 package.json 文件中配置打包命令：
{
"scripts": {
"build": "rollup -c && web-ext build -i '*.ts' -i '*.map'"
},
}打包后可以在项目根目录下的 web-ext-artifacts 目录中找到生成的 zip 文件。
总结
generator-webext-typescript 可以大大提高 WebExtension 项目的创建、开发、打包、发布效率，是一个非常好用的工具。上述的示例代码只是一个简单的展示，实际上 WebExtension 的功能还有很多，开发者可以根据自己的需要进行扩展。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc2df