浏览器插件开发极简教程

本教程带你从零开发一个简单的 Chrome 扩展（同样适用于 Edge、Brave 等 Chromium 内核浏览器）。
最终效果：点击插件图标，可将当前网页背景色改为浅蓝色。

1. 核心文件结构

一个最简单的插件只需要两个文件：

my-extension/
├── manifest.json # 配置文件（必须）
└── popup.html # 点击图标弹出的界面

如果要有“修改网页”的功能，还需要一个 内容脚本。我们加上它：

my-extension/
├── manifest.json
├── popup.html
├── popup.js # 弹窗中的逻辑
└── content.js # 注入到网页中的脚本

2. 编写 manifest.json

这是插件的“身份证”，告诉浏览器它的权限、名称、版本等。

{
  "manifest_version": 3,
  "name": "背景色修改器",
  "version": "1.0",
  "description": "一键修改网页背景色",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "点击改变背景色"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

关键字段解释：

manifest_version：扩展规范的版本号，用 3就好了，除非要适配特别旧的浏览器。

permissions：申请权限，activeTab 允许操作当前标签页，详细的权限列表可参考官方权限列表文档。

action：定义工具栏图标的行为，default_popup 即点击后弹出的页面。

content_scripts：指定在哪些网页（matches）自动注入脚本。<all_urls> 表示所有 http/https 页面。

3. 弹窗界面（popup.html）

一个简单的按钮，用来触发改色。

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 150px; padding: 10px; }
    button { width: 100%; padding: 8px; cursor: pointer; }
  </style>
</head>
<body>
  <button id="changeBg">改为浅蓝色背景</button>
  <script src="popup.js"></script>
</body>
</html>

4. 弹窗逻辑（popup.js）

点击按钮时，向当前网页注入一段改变背景色的代码。

// popup.js
document.getElementById('changeBg').addEventListener('click', () => {
  // 获取当前活动标签页
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    // 向该标签页注入执行脚本
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      func: changeBackgroundColor    // 要执行的函数
    });
  });
});

// 这个函数会被注入到网页中运行
function changeBackgroundColor() {
  document.body.style.backgroundColor = '#e0f7fa';
}

注意：在 popup.js 中不能直接操作 DOM，因为弹窗和网页是隔离的。必须通过 chrome.scripting.executeScript 把代码送入网页环境执行。

5. 内容脚本（content.js）

事实上，上一步我们已经通过动态注入实现了功能，不需要单独的 content.js。但如果你希望插件自动在页面加载时就执行某些操作（而不需要点击弹窗），可以在 content.js 中写代码，浏览器会根据 manifest.json 中的 content_scripts 自动注入。

例如我们让页面加载后自动把背景改成浅灰色：

// content.js
document.body.style.backgroundColor = '#f0f0f0';
若想保留原有“点击按钮改浅蓝”的功能，可以删除 content_scripts 配置，或者保留但将其注释掉。

6. 加载插件到浏览器

打开 Chrome，地址栏输入 chrome://extensions/ 并回车。

开启左下角（不同浏览器可能位置不同）的 “开发者模式”。

点击上方 “加载已解压的扩展程序”。

选择你的 my-extension 文件夹。
在这里插入图片描述

加载成功后，浏览器工具栏会出现你的插件图标。
在这里插入图片描述

随便打开一个网页（如DeepSeek），点击图标再点击按钮，网页背景立刻变成浅蓝色。
在这里插入图片描述

7. 进阶小提示

调试：在 chrome://extensions/ 中点击你的插件下的“背景页”或“弹窗”链接，可以打开 DevTools 调试。

图标：可以在 manifest.json 的 action 中添加 default_icon 字段，指向一个图标文件（16x16、32x32 等）。

权限：需要操作特定网站时，建议把 <all_urls> 改为具体网址模式，如 😕/.baidu.com/*。

8. 完整项目代码（可复制）

manifest.json

{
  "manifest_version": 3,
  "name": "背景色修改器",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_title": "点击改变背景色"
  },
  "permissions": ["activeTab", "scripting"]
}

popup.html

<!DOCTYPE html>
<html>
<head><style>button{width:120px;padding:8px}</style></head>
<body><button id="changeBg">浅蓝背景</button><script src="popup.js"></script></body>
</html>

popup.js

document.getElementById('changeBg').onclick = () => {
  chrome.tabs.query({active: true, currentWindow: true}, tabs => {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      func: () => document.body.style.backgroundColor = '#e0f7fa'
    });
  });
};

总结

浏览器插件的核心开发流程：

定义 manifest.json 提供元数据和权限。

使用弹窗页面（popup.html + .js）响应用户操作。

通过 chrome.scripting.executeScript 动态修改网页内容。

# javascript
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

Google能索引，AI却抓不到

很多技术团队有个错觉：只要Google能正常收录，内容就没问题。但现实是，你的页面在Google搜索结果里好好的，在ChatGPT、Perplexity、Claude的答案里却像从未存在过一样。

avatar MCP技术社区
cover

Windows 下部署 New API 中转站全过程实录（含 6 个真实踩坑）

avatar MCP技术社区

初识智能体

在过去两年中，几乎所有人都体验过大语言模型（如 ChatGPT、Claude、DeepSeek）的强大能力：写周报、润色邮件、解答编程疑难。被动响应：你问一句，它答一句。如果你的 Prompt 没有写清楚约束条件，它无法主动追问或修正目标。知行脱节：大模型能用流畅的文字告诉你“如何部署一个高可用 K8s 集群”，但它无法替你登录服务器敲下命令、查看报错日志并自动回滚。信息孤岛：大模型的知识止步于预

avatar MCP技术社区