Umi 之路——Chrome 扩展开发之旅

2023-11-14 15:00:24

开发契机

公司的项目需要获取大量的数据，且这些数据需要从目标网站的手动获取，这一过程不但繁琐且具有重复性，极大的浪费了人力与时间。

Umi 初探

针对上述问题，公司内部讨论了几种解决方法，最终采用的方法是编写 Chrome 扩展程序，通过此扩展程序可以模拟人类操作来实现数据的自动爬取，极大的提高了工作效率。

在扩展程序的开发中，我们选择了 Umi 框架。起初我们也有使用 Webpack 考虑过，但 Webpack 只是打包工具，除了打包功能还需要自己搭一个构建脚手架，这浪费了相当大的时间，考虑到这一点，最终选择了 Umi 框架。

Umi 集成了 webpack、babel、css-modules、less、eslint、react-router、antd 等主流工具与库。它还内置了大量的脚手架脚本，这些脚本可以帮助我们快速搭建一个开发环境，同时这些脚本也支持自定义。通过搭建 Umi 脚手架，我们只需关注业务逻辑，从而提高了开发效率。

Chrome 扩展开发

在决定使用 Umi 后，我们就开始着手开发了，我们首先要解决的问题是兼容性。

当初Chrome 扩展V3 版本刚刚发布，但是当时很多 Chrome 的用户都没有更新到新的版本，考虑到兼容性问题，我们在扩展的开发上，使用的仍然是 V2 版本。V3 版本带来了很多的更新，例如使用 JavaScript 模块来编写扩展，减少了内存使用和网络开销，并允许扩展访问更多的API。

Umi 项目搭建

安装 Umi CLI

npm install umi -g

创建一个新的 Umi 项目

umi new my-project

cd my-project

启动项目

npm start

打开浏览器，访问 http://localhost:3000

至此，我们就搭建好了 Umi 项目，我们可以开始开发我们的 Chrome 扩展程序了。

编写业务逻辑

在这一步，我们就需要用到 Umi 集成了 webpack、babel、css-modules、less、eslint、react-router、antd 等主流工具与库的优势了。在业务逻辑的开发中，这些工具与库发挥了极其重要的作用。例如：

使用 webpack 来打包代码，减少了代码的体积，提高了页面的加载速度。
使用 babel 来编译代码，使代码可以兼容不同的浏览器。
使用 css-modules 来管理 CSS 样式，使代码更加易于维护。
使用 less 来编写 CSS 样式，使代码更加简洁。
使用 eslint 来检查代码质量，使代码更加规范。
使用 react-router 来管理路由，使页面之间的切换更加流畅。
使用 antd 来构建 UI 组件，使页面更加美观。

这些工具与库极大的提升了我们的开发效率，使我们能够专注于业务逻辑的开发。

manifest.json 配置

manifest.json 文件是 Chrome 扩展程序的配置文件，其中包含了扩展程序的基本信息，如名称、版本、权限等。以下是一个 manifest.json 文件的示例：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "This is my extension.",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}