从0到1用JavaScript实现一个Chrome Extension（1）

摆烂了几个星期，为什么突然起来肝谷歌的扩展开发呢？主要是因为突然想用谷歌扩展来实现HMR（热模块替换）。于是打开Chrome浏览器搜索【Chrome Extension】就可以看到开发者文档哈哈哈。根据文档的一顿操作后，实现了一个简易版的Chrome Extension。废话不多说，直接上教程。

介绍

一个Chrome Extension的开发只需要HTML、CSS、JavaScript三件套即可。 而Chrome Extension的组成主要分为4个部分：后台脚本、内容脚本、UI界面 以及 选项部分。

开始

（1）准备工作

1. 首先我们需要简单粗暴初始化一个项目, 我们也可以去掉--yes根据自己的爱好来配置要生成什么样子的package.json.

npm init --yes

2. 接下来安装一下开发Chrome Extension时的类型属性提示。

npm i @types/chrome types -D

（2）部署

1. Chrome Extension的入口是manifest.json, 我们需要创建一个manifest.json的文件, 包含以下内容

{
    "name": "chrome-extension", // 扩展名字
    "description": "build an extension!", // 扩展描述
    "version": "0.0.1", // 扩展版本
    "manifest_version": 2 // Manifest V2 扩展程序
}

这里提一下，目前的manifest_version已经到了3的版本，也就是Manifest V3。 官方通知2023年1月开始，Chrome浏览器将不运行Manifest V2的程序。到时候把版本改为3即可。

2. 创建后的manifest.json，需要导入到Chrome浏览器。需要在浏览器输入: chrome://extensions 回车，在浏览器扩展管理界面导入manifest.json文件所在的文件夹。确保我们是已经打开开发者模式。

3. 加载已解压的扩展程序选择包含manifest.json文件的文件夹后，我们的扩展程序就可以生成了。

4. 开启之后就可以在扩展列表打开查看。

（3）后台脚本

后台脚本是manifest.json里的background属性。

1. 在background创建一个工作者，就可以通过这个工作者去做一些事情，如监听一些浏览器操作的事件。

{
    "name": "chrome-extension", // 扩展名字
    "description": "build an extension!", // 扩展描述
    "version": "0.0.1", // 扩展版本
    "manifest_version": 2, // Manifest V2 扩展程序
    "background": {
        "service_worker": "bg.js" // 指定要执行的脚本文件
    }
}

2. 同时创建对应的脚本bg.js, 在该后台脚本文件，我们可以做一些事情，如监听扩展安装成功。

// bg.js
chrome.runtime.onInstalled.addListener(() => {
    console.log('chrome extension installed!!');
});

3. 重新刷新一下扩展，在扩展点击Service Worker后，弹窗对应的控制台，可以看到日志的输出。也就执行了我们的后台脚本bg.js，而且可以通过后台脚本做更多的事情。

（3）内容脚本

内容脚本是在网页上下文中运行的文件。能够读取浏览器访问的网页的详细信息，对其进行更改，并将信息传递给父级扩展。 内容脚本是manifest.json里的content_scripts属性，其属性还包含几个主要的属性，对应的用法下面直接通过代码展示出来。

1. 在manifest.json创建其对应的内容脚本属性，并匹配指定的域名

{
    "name": "chrome-extension", // 扩展名字
    "description": "build an extension!", // 扩展描述
    "version": "0.0.1", // 扩展版本
    "manifest_version": 2, // Manifest V2 扩展程序
    "background": {
        "service_worker": "bg.js" // 指定要执行的脚本文件
    },
    "content_scripts": [
        {
            "matches": ["https://*.bilibili.com/*"], // 匹配的域名
            "exclude_matches": ["https://*.bilibili.com/anime*"], // 排除指定域名
            "js": ["content.js"], // 指定要执行的内容脚本文件
            "run_at": "document_end" // 脚本运行时刻: 指定页面DOM渲染的时刻
        }
    ],
}

2. 创建指定的执行的内容脚本content.js, 并在指定域名下修改其搜索文本框的placeholder属性，为我们想要的内容。

// content.js
window.onload = () => {
    // do somethings...
    console.log('onload...');
    const ipt = document.querySelector('.nav-search-input');
    ipt.placeholder = '关注公众号: 《摆烂工程师》';
};

3. 接下来刷新一下我们的扩展，到指定域名查看一下效果，成功的修改其内容。

我们还可以通过Chrome Extension做更多的事情，也可以用Vue、React去开发后用Webpack或者Vite打包出指定的文件，其务必包含核心文件manifest.json。 今天的教程就到这了，要去煲汤了，如果点赞超过20，就出下一篇Chrome Extension的教程哈。