浏览器插件（Browser Extension）开发教程一之入门

1.引言

今天是2023的最后一天，相信过很多小伙伴都去体验人挤人的快乐去了，博主不想被踩成猪脚，但待在家里又清闲无所事事。思来想去决定分享一些自己近来学到的干货。一方面是为了巩固已学的内容和提升自己，另一方面也希望我的分享能给将要接触的小伙伴一些帮助和裨益。

很多前端同学可能都没有听说过浏览器插件，也不知道浏览器插件是干什么的，博主以前听到也是满脸的问号。今年因为AI爆火的缘故，公司为了跟上时代的步伐，避免被新技术的浪潮洗刷掉，老总决定开发一款AI产品，主要涉及APP端和插件（运行在浏览器内的WEB项目，神似微信小程序）。目前两款产品都上线了，APP的全球下载量已超十万+，浏览器插件因为是小众产品，目前有一万+用户。但蚊子腿也是肉嘛，浏览器插件还是有市场的，只要你有想法，一切皆有可能。拿今年爆火的AI插件Monica，上架短短半年就积累了一百四十万用户，博主本人也是他们的白嫖党之一，哈哈。所以想学浏览器插件开发的同学赶紧行动起来，这个赛道国内开发者进入的还非常少，想让我更新的小伙伴：记得收藏支持点赞，这是我持续更新最大的动力哦！

2.总体规划

Chrome官方常用的基础知识（基于MV3）
国际的主流插件开发文档（讲解和翻译）
真实案例实践
源码分享

3.起步

3.1 新建一个文件夹（chrome-extension ），文件夹下创建一个名叫manifest.json的文件，如下

3.2 在manifest.json中编写js代码

manifest是一个配置文件，包含插件的基础信息和一些功能配置清单，如下配置描述了插件的版本，现在都是3。name是插件的名称，description用来简要说明你的插件是干什么的，version用来描述你自己发布的插件的版本，这些都要写，在插件上架到谷歌浏览器商店的时候要用。

json 复制代码

{
  "manifest_version":3,
  "name":"first extension",
  "description":"a wonderful extension",
  "version":"1.0.0"
}

3.3加载本地的程序到谷歌浏览器

前面已经写好了一个最简单的插件项目，现在我们尝试将项目加载到浏览器里面

打开浏览器，在顶部的地址栏输入：chrome://extensions
找到页面的开发者模式：打开选择开关按钮
点击：加载已解压的扩展程序,选择文件夹，也就是chrome-extension目录，至此一个最简单的插件已经完成。

3.4 如何将插件固定到浏览器右侧界面

3.5 如何在点击图标时打开弹窗页面

在manifest文件下新增代码aciton,action用来声明扩展程序图标的图片，以及当用户点击扩展程序的图标时，弹出窗口显示的 HTML 页面，目录结构如下：

修改manifest文件的代码：

json 复制代码

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

新增一个hello.html文件

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Hello Extensions</h1>
</body>
</html>

重新加载资源

右上角的图标已变成我们自己换的图标了，点击这个图标会显示html的内容，到这里一个显示弹出窗口的功能就完成了。

4.如何在浏览器网页上运行JS脚本代码

在manifest中声明js脚本,新增content-scripts，以下代码表示，我们要在百度的网址下面注入一个叫content.js的脚本代码。

json 复制代码

{
  "manifest_version":3,
  "name":"first extension",
  "description":"a wonderful extension",
  "version":"1.0.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://www.baidu.com/"
      ]
    }
  ]
}

根目录下创建scripts目录，在此目录下新建content.js文件

dart 复制代码

// scripts/content.js
const bdSearch = document.querySelector("#form");
bdSearch.remove()

然后我们打开浏览器，重新加载修改后的插件，此时刷新百度的主页面，你会发现神奇的一幕，百度的搜索框不见了，因为我们写了js逻辑，将百度的搜索框删除了。

5.添加后台页

后台页是一个陌生概念，它主要用于承担插件的后台任务和长期运行的逻辑。后台页面通常是一个看不见的页面，本质上是一个js文件，主要是用来监听插件的运行情况并做出一些处理。在manifest下添加以下代码：

css 复制代码

{
  "manifest_version": 3,
  "name": "first extension",
  "description": "a wonderful extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": [
        "https://www.baidu.com/"
      ]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

然后创建background.js文件，添加以下代码

javascript 复制代码

console.log("运行了")
chrome?.runtime?.onInstalled?.addListener(({ reason }) => {
  if (reason === 'install') {
    chrome.tabs.create({ url: "https://www.baidu.com" });
  }
});

先移除插件再重新加载插件，在插件安刚装成功后会默认打开百度的网址，当我们点击Service Worker控制台打印：运行了。

以上内容就是插件入门的全部教程，接下来我将更新插件开发的进阶教程，主要涉及一些常用API的使用