前言

Chrome 插件是我们经常用到的，比如广告屏蔽，浏览器美化，科学上网等。但是你有想过 Chrome 插件是如何开发的吗？出于好奇，今天我们一起从到 1 开发一个超级无敌简单的 Chrome 插件，目的只为入门 Chrome 插件基础开发。

关于 Chrome 插件

Chrome 插件开发官方文档

Chrome 是由 html、js、css 和静态文件等组成的文件集合。

文件结构

插件结构

插件文件结构大致如下：

│  jquery-3.5.1.js
│  manifest.json
│  my.js
│  popup.html
│
└─images
        logo.png
        logo128.png

其中 manifest.json、popup.html 为必选文件，其中 manifest.json 中声明了插件的基本信息，是整个插件的总入口，就连 popup.html 也是在它里面定义的，主要部分 content_scripts 定义了插件生效策略。popup.html 可以理解为插件和用户交互的首页。

manifest.json 内容

{
    "manifest_version": 2,
    "name": "myCtx",
    "version": "1.0",
    "description": "学习chrome插件",
    "icons": {
        "19": "images/logo.png",
        "38": "images/logo.png",
        "128": "images/logo128.png"
    },

    "browser_action": {
        "default_title": "我的第一个Chrome插件",
        "default_icon": "images/logo.png",
        "default_popup": "popup.html"
    },

    "content_scripts": [{
        "matches": [
            "https://www.bilibili.com/*",
            "https://www.baidu.com/*"
            ],
        "js": ["my.js"],
        "all_frames": true,
        "run_at": "document_end"
    }],

    "permissions": [
        "tabs"
    ]
}

如上，manifest.json 中的 content_scripts 意为：当请求路径匹配到百度和哔哩哔哩时加载 my.js，具体操作在 my.js 中定义。

my.js 内容

console.log("这是插件注入信息>>>:"+document.title);
console.log("开始变红变大");
document.getElementById("su").style.color="red";
document.getElementById("su").style.fontSize="24px";
console.log("变红变大结束");

如上，my.js 中将 ID 为“su”的元素修改为红色，将字体大小修改为 24 像素，其中 ID 为“su”的元素就是百度首页的搜索按钮。实际效果就是当访问百度首页的时候，搜索按钮中的“百度一下”四个字会被修改为红色，同时字体变大为 24 像素。

popup.html 内容

<html>
    <head>
        <meta charset="utf-8">
        <style>
            body{
                font-family:"Microsoft";
                width:500px;
                min-height:100px;
            }
        </style>
    </head>
    <body>
        <h1>字体变红变大</h1>
    </body>
</html>