《Chrome 插件开发：构建插件与调试知识全掌握 🚀》这篇文章可以学到什么： 1.Chrome 插件 Demo 的极

这篇文章可以学到什么：

1.Chrome 插件 Demo 的极速开发：从零基础开始，轻松搭建插件的基础框架，让你迅速体验 Chrome 插件的开发流程，带你开启一场高效的开发之旅。

2.Chrome 插件开发中的通信架构初体验：对 Chrome 插件开发里的通信架构有一个简明扼要的认识，掌握不同组件（如 popup 页面、content 脚本和 background 脚本）之间是如何实现信息交互的，为你深入理解插件的工作原理奠定基础。

3.基础的 manifest.json 文件配置知识：掌握 manifest.json 文件的基本配置，包括其主要元素的配置方法及作用，让你学会如何利用它来定义和定制你的 Chrome 插件，使其具备所需的各种功能。

4.插件调试实用技巧：当开发过程中遭遇问题时，能够熟练运用调试技巧，了解如何针对不同的脚本文件（如 content.js、background.js 和 popup.js）进行有效调试，迅速定位并解决问题，让你的开发过程更加顺畅。

前言：

由于作者自己也是第一次接触chrome插件开发，作者写这篇文章的目的一方面是想记录自己在探索 Chrome 插件开发过程中的学习轨迹，另一方面，也想把自己在开发过程中所积累的一些思考和实践经验分享给大家。

本文会比较基础，大佬们请跳过，但本专栏后续文章会逐步深入、层层递进，希望能跟大家一起成长。

一、什么是chrome插件？

先介绍几个大名鼎鼎的插件，无需过多文字解释，一看就知道什么是chrome插件😁

一、Tampermonkey油猴脚本扩展 通过它可以给浏览器安装各种各样的用户脚本，神器不解释！

二、uBlock Origin Lite最佳浏览器广告拦截扩展，功能全面、效果一流，而且资源占用极低。

Chrome插件是指可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。用户可以通过安装不同的插件在浏览器中添加新的功能、修改现有功能或者与网页进行交互。

二、如何快速开发一个简单的Chrome插件

如何快速开发一个简单的Chrome插件，旨在了解开发流程、调试流程、简单的配置文件。而不是快速开发一个功能齐全的Chrome插件（如果觉得有点基础，求大佬们轻喷）💦

介绍

chrome 插件通常由以下几部分组成：

对应的代码目录结构如下。现在，请创建工作目录及相应文件，即便文件内容暂时为空也没关系，后续我们会将其补充完整。

每个文件的用途如下，可参考下面的表格，等你把 Demo 运行起来后，再回头来看，或许会有更深刻的理解：

文件	文件作用
background.js	用于执行后台任务，在扩展程序的整个生命周期中持续运行。持续运行在后台，即使popup关闭也在工作，可以用来记录用户的偏好，下次使用可直接采用偏好设置
content.js	包含可以注入到网页中的脚本，可与网页的 DOM 进行交互。
popup.html	点击扩展程序图标时弹出的页面。
popup.js	为弹出页面添加交互逻辑。只在弹出窗口打开时运行，关闭后就停止
popup.css	对弹出页面进行样式设置。
icon.png	插件的图标

这里的文件名称，像 background.js、content.js、popup.js 等，只是一种比较常见且良好的实践命名方式，并不是强制规定,你完全可以根据自己的喜好来为文件命名，例如，可以把 background.js 改名为 a.js，只要在项目的配置文件中相应地将其配置为 a.js，整个项目依然能够正常运行。需要注意的是，扩展被安装后，Chrome就会读取扩展中的manifest.json文件。这个文件的文件名固定为manifest.json，所以manifest.json文件的名称必须是固定的

大部分插件点击之后会显示 UI，也就是插件功能页面部分，一般称为 popup 页面，如下图：这部分的样式和交互由popup.html、popup.js、popup.css三个文件控制，并且popup页面关闭时popup.js就停止运行。

popup 无法通过程序打开，只能由用户点击打开。点击 popup 之外的区域会导致 popup 收起。

popup页面与background.js、content.js之间的通信架构如下图：：

插件的架构可以参考官方文档。

实战：写一个小demo：改变页面背景颜色的chrome插件。

上面介绍完了一个简单chrome插件所需要的部分，接下来为了能够快速体验一下开发流程，先不讲众多的概念和API如何使用，而是写一个小Demo，让小Demo能够作为插件在扩展程序中运行起来，并对当前浏览的页面作出交互。等大家看到效果之后，再进行后续的学习，主打一个循序渐进和文章的可读性。大家可以快速地把相应的代码复制粘贴，代码如下：

manifest.json:

{
    "manifest_version": 3,
    "name": "网页背景色修改器",
    "version": "1.0",
    "description": "点击按钮，修改当前网页的背景色。",
    "background": {
        "service_worker": "./background/background.js"
    },
    "icons": {
        "16": "icons/icon16.png",
        "32": "icons/icon32.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
    },
    "action": {
        "default_popup": "./popup/popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "32": "icons/icon32.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
        }
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content/content.js"]
        }
    ],
    "permissions": ["activeTab"]
}

下面的popup.html、popup.css、popup.js文件，还记得上面说的popup文件下控制的都是插件功能页面部分，也就是这部分：

popup.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页背景色修改器</title>
    <link rel="stylesheet" href="popup.css">
</head>
<body>
    <h1>网页背景色修改器</h1>
    <input type="color" id="colorPicker">
    <script src="popup.js"></script>
</body>
</html>

popup.js:

// 当DOM内容加载完成后执行以下函数
document.addEventListener('DOMContentLoaded', function() {
    // 获取ID为'colorPicker'的HTML元素（应该是一个颜色选择器input）
    const colorPicker = document.getElementById('colorPicker');
    
    // 为颜色选择器添加change事件监听器（当用户选择新颜色时触发）
    colorPicker.addEventListener('change', function() {
        // 获取用户选择的颜色值
        const selectedColor = colorPicker.value;
        
        // 查询当前活动标签页
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            // 向当前标签页发送消息
            chrome.tabs.sendMessage(
                // 第一个参数：标签页ID
                tabs[0].id,
                // 第二个参数：要发送的消息对象
                {
                    type: "changeBackgroundColor",  // 消息类型
                    color: selectedColor            // 选择的颜色值
                },
                // 第三个参数：回调函数，处理content script的响应（如果有的话）
                function(response) {
                    // 如果收到成功响应
                    if (response && response.status === "success") {
                        // 在控制台打印成功消息
                        console.log('颜色修改成功！');
                        // 在popup页面上显示成功消息
                        document.getElementById('status').textContent = '颜色修改成功！';
                    }
                }
            );
        });
    });
});

popup.css:

/* 设置弹出窗口的基本样式 */
body {
    display: flex;
    flex-direction: column;
    width: 200px;  /* 设置弹出窗口宽度 */
    padding: 10px;
    margin: 0;
    font-family: Arial, sans-serif;
}


#colorPicker {
    width: 100%;
}

content.js:

// 监听来自popup.js的消息
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.type === "changeBackgroundColor") {
            // 改变页面背景色
            document.body.style.backgroundColor = request.color;
            // 发送成功响应
            sendResponse({status: "success"});
        }
    }
);

// 可选：添加一个初始化函数来确保脚本正常加载
console.log("Content script loaded successfully");