浏览器插件开发【从入门到放弃之一：Chrome基础知识】

Wangyy
1,933 阅读3分钟

1.引言

今年因为一些偶然的机会接触到了浏览器插件开发的知识，因为插件的受众群体相对较少，导致国内在这方面的文档比较欠缺，当初我在开发中也遇到不少坑，头发抓掉不少。为了给将要入坑的小伙伴们一些帮助和指引，我准备持续更新一些浏览器插件开发的教程。

2.规划

  1. Chrome开发文档基础知识（基于MV3）
  2. 国外主流插件开发方案和文档翻译
  3. 案例和源码分享

3.起步

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

image.png

3.2 在manifest.json中编写js代码

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

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

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

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

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

微信截图_20231231122902 (2).png

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

image.png

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

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

image.png

修改manifest文件的代码：

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

新增一个hello.html文件

<!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>

重新加载资源

image.png

image.png

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

image.png

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

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

{
  "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文件

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

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

image.png

5.添加后台页

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

{
  "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文件，添加以下代码

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

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

image.png

博主平时比较忙，几乎很少上掘金，如有遇到问题的小伙伴可以加入我们的WEB前端QQ交流群：1032595904

avatar
文章
阅读
粉丝