介绍
@jaunty/extension 是一款基于 WebExtensions API 和 React.js 的浏览器扩展开发库。它提供了一些常用的扩展开发功能和组件，如通信组件、注入脚本和样式等。同时，它也兼容多个浏览器，如 Chrome、Firefox 和 Edge 等。
安装
@jaunty/extension 可以通过 npm 来安装。在终端中输入以下命令：
npm install @jaunty/extension
使用
1. 创建扩展
在使用 @jaunty/extension 开发扩展之前，需要先创建一个扩展。创建一个名为 my-extension 的扩展，方法如下：
-- -------------------- ---- ------- ------ - --------------- - ---- -------------------- ----------------- ----- --------------- -------- ------ -------- -------- ------------------- -- - ---------------------- -- ------- ---------------- ---
以上代码使用 createExtension 方法创建了一个名为 my-extension 的扩展，版本号为 1.0，适用于 Chrome 浏览器。当扩展创建成功之后，就可以使用 extension 对象进行扩展开发了。
2. 添加页面
在扩展中添加页面，需要先创建一个 React 组件，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ---------- -
------ -
-----
----------- -- -- ---------------
------- -- --- -------- -- -- --------------
------
--
-
------ ------- ---------以上代码定义了一个名为 HomePage 的 React 组件，用于展示扩展的主页面。接下来，需要使用 addPage 方法将 HomePage 组件添加到扩展中：
-- -------------------- ---- -------
------ - --------------- - ---- --------------------
------ -------- ---- -------------------
-----------------
----- ---------------
-------- ------
-------- --------
------------------- -- -
-------------------
----- -------
---------- --------
---
---以上代码使用 addPage 方法将 HomePage 组件添加到扩展中，并指定页面的名称为 home。当然，您也可以添加更多的页面，每一个页面都需要指定一个名称和对应的组件。
3. 添加菜单
在扩展中添加菜单，可以使用 addMenu 方法。例如，以下代码为扩展添加了一个名为 "My Extension" 的菜单，并添加了一个名为 "Home" 的子菜单，用于跳转到主页：
-- -------------------- ---- -------
------ - --------------- - ---- --------------------
-----------------
----- ---------------
-------- ------
-------- --------
------------------- -- -
-------------------
------ --- ----------
---
-------------------
------ -------
--------- --- -----------
-------- -- -- -
-----------------------------
-
---
---以上代码使用 addMenu 方法添加了一个名为 "My Extension" 的菜单，并使用 addMenu 方法添加了一个名为 "Home" 的子菜单，点击后将跳转到扩展的主页。具体来说，label 属性用于设置菜单的文本，parentId 属性用于指定所属的父级菜单，onClick 属性用于设置点击事件。另外，navigateTo 方法可以实现页面跳转功能，它接收一个页面名称作为参数。
4. 添加注入脚本和样式
有时候，我们需要向页面中注入一些脚本或样式，这时可以使用 addScript 和 addStyle 方法。例如，以下代码向一个名为 "https://www.google.com" 的页面中注入了一个名为 "my-script" 的脚本：
-- -------------------- ---- -------
------ - --------------- - ---- --------------------
-----------------
----- ---------------
-------- ------
-------- --------
------------------- -- -
---------------------
---- -------------------------
----- ------------
----- -------------------- ---------
---
---以上代码使用 addScript 方法添加了一个名为 "my-script" 的脚本，它的代码是 "console.log('Hello, World!')"。另外，还可以使用 addStyle 方法添加样式表，方式与 addScript 类似。
示例代码
以上代码只是 @jaunty/extension 的一部分功能，更多功能请参考官方文档。最后，以下代码是一个完整的示例，供读者参考：
-- -------------------- ---- -------
------ - --------------- - ---- --------------------
------ ----- ---- --------
------ -------- ---- -------------------
-----------------
----- ---------------
-------- ------
-------- --------
------------------- -- -
-------------------
----- -------
---------- --------
---
-------------------
------ --- ----------
---
-------------------
------ -------
--------- --- -----------
-------- -- -- -
-----------------------------
-
---
---------------------
---- -------------------------
----- ------------
----- -------------------- ---------
---
---以上代码创建了一个名为 my-extension 的扩展，添加了一个名为 "home" 的页面，添加了一个名为 "My Extension" 的菜单，菜单里添加了一个名为 "Home" 的子菜单，点击后跳转到主页，并向主页中注入了一个名为 "my-script" 的脚本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e24439c