构建基于 React 的 WebExtension 浏览器扩展

创建一个 React 应用,然后把它转化成一个 Firefox/Chrome 浏览器扩展。

网页应用和浏览器扩展有何区别?

浏览器扩展也是基于 Web 技术的,但是和网页应用有几个不同点:

  • 加载到弹出窗口,侧边栏,配置页,或者开发者工具面板中。
  • 可以使用 WebExtension API 调用网页无法调用的浏览器功能。
  • 大部分情况下无视同源限制,可以访问任何网站的 API。
  • 通过 manifest.json 文件加载 HTML 和 JavaScript。

WebExtension API 是 Chrome 发明的,Firefox 后来也开始支持。Opera 和 Edge 浏览器也都是基于 Chrome/Chromium 的。因此 WebExtension 成为了事实上的浏览器插件标准。我们创建的这个扩展应该能用于大部分桌面浏览器。

创建 React 应用

手工打造 React 项目不太现实,大部分同学都是用 create-react-app 这个工具。我们也用它来创建 WebExtension 扩展。

npx create-react-app foobar-extension --typescript --use-npm

上述命令创建了一个使用 TypeScript 和 NPM 构建的 React 应用。你可以自由设定选项。

修改 manifest 文件

我们已经有了一个 public/manifest.json 文件。它是为 Progressive Web Application 创建的,和 WebExtension 的 Manifest 文件稍有区别。我们需要把它改成下面的格式:

{
  "manifest_version": 2,
  "name": "Foobar",
  "version": "1.0",
  "description": "Foobar extension made with React.",
  "icons": {
    "192": "logo192.png",
    "512": "logo512.png"
  }
}

自定义构建配置

在项目的根目录创建 .env 文件,并输入以下内容:

INLINE_RUNTIME_CHUNK=false

这样我们就能阻止生成行内 JavaScript,就是在 HTML 的 <script>...</script> 标签里直接写 JavaScript。浏览器扩展要遵循 Content Security Policy,所有 JavaScript 都必须在 .js 文件里。

添加工具栏图标和弹出窗口

public/manifest.json 中添加下面几行内容:

{
  ...
  "browser_action": {
    "default_icon": "logo192.png",
    "default_title": "Foobar",
    "default_popup": "index.html"
  }
}

构建并在浏览器中测试

运行 npm run build,扩展就会被构建。输出目录是 build

以 Firefox 为例,在地址栏打开 about:debugging,然后点击“加载临时扩展”按钮。在文件选择器中选择项目目录中的 build/manifest.json 文件。

加载扩展之后,你应该会看到浏览器的工具栏上多了一个图标。点击它,你会看到一个小小的弹窗。

添加侧边栏

相比弹窗,侧边栏是更加持久的界面组件。如果用户需要在网页和扩展之间频繁切换,那么侧边栏可能更合适。

类似工具栏弹窗,我们也需要把侧边栏配置添加到 public/manifest.json

{
  ...
  "sidebar_action": {
    "default_icon": "logo192.png",
    "default_title": "AC Design Insight",
    "default_panel": "index.html"
  }
}

重新构建。然后前往 about:debugging 并重载扩展。你会看到侧边栏出现了:

添加开发者工具面板

如果扩展用于 Web 开发,那么把它放到开发者工具面板中最合适不过了。

首先,还是要修改 public/manifest.json

{
  ...
  "devtools_page": "devtools.html"
}

然后创建 public/devtools.html

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <script src="devtools.js"></script>
</body>
</html>

再后创建 public/devtools.js

browser.devtools.panels.create(
  "Foobar",
  "/logo192.png",
  "/index.html"
);

再次构建。前往 about:debugging 并重载扩展。

F12 键,你会看到在开发者工具面板中多了一个“Foobar”面板。

完整的代码在 GitHub 上。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据