通过trae开发你的第一个Chrome扩展插件

前言：为什么现在要学Chrome插件开发？

随着浏览器功能日益丰富，Chrome插件成为提升工作效率和用户体验的重要工具。无论是自动化任务、网页内容定制，还是调试辅助，Chrome插件都能轻松实现。同样对于Java后台开发者来说，掌握Chrome插件开发，不仅能增强前后端协同能力，也能为自己的项目打造专属工具。

本文将带你从零开始，快速搭建一个简单但实用的Chrome插件，介绍Manifest V3关键配置、权限申请、消息通信等核心知识点，助你入门并拓展更多可能。

一、Chrome插件开发基础概念

Manifest文件：插件配置核心，描述插件信息、权限、入口文件等。
背景脚本（background/service worker） ：负责插件生命周期管理和事件监听。
内容脚本（content scripts） ：注入网页，操作DOM，实现交互。
弹出页面（popup） ：点击插件图标弹出的界面。
权限（permissions） ：申请访问特定API和网页资源权限。

manifest.json是Chrome插件的配置中心，描述插件的基本信息、权限、入口文件等。Chrome插件从Manifest V2升级到V3，带来了服务工作线程（Service Worker）作为后台脚本的新机制，安全性和性能均有提升。

1. 基础必备字段

配置项	说明
`manifest_version`	必填，当前最新版本是3，表示采用Manifest V3规范
`name`	插件名称
`version`	插件版本号，必须符合语义化格式（如1.0.0）
`description`	插件描述

2. 插件界面相关配置

配置项	说明	备注
`action`	配置插件图标点击后的弹出窗口（Popup）	通过 `default_popup` 指定HTML文件
`sidebar_action`	新增配置，定义浏览器侧边栏面板	支持侧边栏功能，需Chrome 相关版本支持

示例：

json 复制代码

"action": {
  "default_popup": "popup.html",
  "default_icon": "icon.png"
},
"sidebar_action": {
  "default_page": "sidebar.html",
  "default_icon": "icon_sidebar.png"
}

小提示：弹窗适合简短交互，侧边栏更适合持续操作的工具型插件，比如笔记、任务管理等。

3. 权限（permissions）和域名访问限制

插件需要声明权限以访问浏览器API或网站数据。权限声明越精细，越安全，也越易获用户信任。

权限类型	作用
`"tabs"`	访问浏览器标签页信息
`"scripting"`	动态注入脚本或样式
`"storage"`	访问插件本地存储
`"webRequest"`	监听和修改HTTP请求
`"activeTab"`	只对当前激活标签页短期授权

域名限制示例：

json 复制代码

"host_permissions": [
  "https://www.example.com/*",
  "http://localhost/*"
]

只有声明的域名匹配的页面，插件才能注入脚本或访问数据，有效限制了权限范围。

4. 背景脚本

Manifest V3背景页改为Service Worker，负责监听事件、管理插件生命周期。

css 复制代码

"background": {
  "service_worker": "background.js"
}

5. 内容脚本（content_scripts）

声明要注入网页的JS或CSS文件，自动注入或指定页面匹配。

json 复制代码

"content_scripts": [
  {
    "matches": ["https://*.example.com/*"],
    "js": ["content.js"],
    "css": ["style.css"],
    "run_at": "document_idle"
  }
]

matches：注入目标页面，支持通配符
run_at：注入时机，常用 document_start / document_idle

以下是一个简单的示例：

json 复制代码

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "description": "一个简单的Chrome插件示例",
  "permissions": ["tabs", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content.js"]
    }
  ]
}

3. 编写 `background.js`

css 复制代码

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content.js']
  });
});

4. 编写 `content.js` （注入网页，改变页面背景）

ini 复制代码

document.body.style.backgroundColor = 'lightyellow';
alert('页面背景已被插件修改！');

5. 编写 `popup.html` 和 `popup.js`

popup.html：

xml 复制代码

<!DOCTYPE html>
<html>
<head><title>插件弹出</title></head>
<body>
  <h3>欢迎使用插件！</h3>
  <button id="changeColor">改变页面背景色</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js：

javascript 复制代码

document.getElementById('changeColor').addEventListener('click', () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      function: () => document.body.style.backgroundColor = '#a8dadc'
    });
  });
});

三、实战演示：简单插件实现页面背景色切换

如果使用Trae，你只需要一句话来生成下面项目：

复制代码

请你基于最新的Manifest V3协议，开发一个可以切换标签页背景颜色的chrome插件

1. 创建manifest.json文件

json 复制代码

{
  "manifest_version": 3,
  "name": "标签页背景颜色切换器",
  "version": "1.0",
  "description": "一个可以切换标签页背景颜色的Chrome插件",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 创建popup.html文件

xml 复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    .color-btn {
      width: 40px;
      height: 40px;
      margin: 5px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
    }
    .color-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  </style>
</head>
<body>
  <h3>选择背景颜色</h3>
  <div class="color-grid">
    <button class="color-btn" style="background-color: #ffffff"></button>
    <button class="color-btn" style="background-color: #ffcccc"></button>
    <button class="color-btn" style="background-color: #ccffcc"></button>
    <button class="color-btn" style="background-color: #ccccff"></button>
    <button class="color-btn" style="background-color: #ffffcc"></button>
    <button class="color-btn" style="background-color: #ffccff"></button>
    <button class="color-btn" style="background-color: #ccffff"></button>
    <button class="color-btn" style="background-color: #000000"></button>
  </div>
  <script src="popup.js"></script>
</body>
</html>

3. 创建popup.js文件

dart 复制代码

// 为每个颜色按钮添加点击事件
document.querySelectorAll('.color-btn').forEach(button => {
  button.addEventListener('click', async () => {
    // 获取选中的颜色
    const color = button.style.backgroundColor;

    // 获取当前活动标签页
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

    // 注入脚本到当前标签页修改背景颜色
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: setBackgroundColor, // 要执行的函数
      args: [color] // 传递给函数的参数
    });
  });
});

// 用于设置页面背景颜色的函数
function setBackgroundColor(color) {
  document.body.style.backgroundColor = color;
  // 尝试设置所有iframe的背景色
  document.querySelectorAll('iframe').forEach(iframe => {
    try {
      iframe.contentDocument.body.style.backgroundColor = color;
    } catch (e) {
      // 跨域iframe无法访问，忽略错误
    }
  });
}

4. 加载和测试插件

打开Chrome浏览器，进入chrome://extensions/
开启右上角的"开发者模式"
点击"加载已解压的扩展程序"
选择您的插件目录(d:\project\plugin)
插件将被加载，您可以在工具栏看到它的图标
点击图标，选择颜色来改变当前标签页的背景颜色

以上就是完整的Chrome插件开发过程。这个插件使用Manifest V3架构，通过scriptingAPI注入脚本到当前标签页来修改背景颜色。

四、如何调试和发布你的插件？

打开 Chrome 浏览器，进入 chrome://extensions/
开启开发者模式
点击"加载已解压的扩展程序"，选择项目目录
测试功能，观察控制台报错或日志
通过Chrome Web Store发布插件，填写详细信息，上传打包好的zip包

五、实战技巧：权限申请和消息通信

1. 权限申请原则

只申请需要的权限，避免滥用造成安全隐患
动态请求权限，提高用户接受率

2. 消息通信示例

popup.js 向 background.js 发送消息：

javascript 复制代码

chrome.runtime.sendMessage({ action: 'getData' }, (response) => {
  console.log('收到后台返回数据:', response.data);
});

background.js 监听消息并响应：

javascript 复制代码

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if(request.action === 'getData') {
    sendResponse({ data: '这里是后台返回的信息' });
  }
  return true; // 表示异步响应
});

3. 自定义脚本注入

除了content_scripts静态声明注入，Manifest V3提供了强大的scripting API，支持动态注入脚本，灵活控制注入时机和页面范围。

css 复制代码

chrome.scripting.executeScript({
  target: { tabId: tab.id },
  files: ['custom-inject.js']
});

这样可以基于用户行为或后台逻辑按需注入，避免插件启动时无差别注入，提高性能和安全性。如果想要拦截网站请求的响应结果，这将很有效。

六、主流功能所需要的Chrome API

在Chrome插件开发中，不同功能会依赖不同的Chrome扩展API，掌握这些API有助于快速实现功能需求。下面列举几类主流插件功能及常用API：

功能类型	相关Chrome API	简要说明
标签页管理	`chrome.tabs`	获取、创建、更新、关闭标签页，操作页面URL和内容
脚本注入	`chrome.scripting`	动态注入JS和CSS到指定页面
存储数据	`chrome.storage`	本地存储和同步存储数据，持久保存用户配置和状态
网络请求拦截	`chrome.webRequest`	监听和修改HTTP请求和响应（除响应体之外），适合广告屏蔽、代理插件
浏览器行为控制	`chrome.browserAction` / `chrome.action`	控制工具栏按钮，弹窗展示，图标动态切换
消息通信	`chrome.runtime` 和 `chrome.tabs`	实现后台脚本、内容脚本、弹窗之间的异步消息传递
通知提示	`chrome.notifications`	显示系统通知
权限管理	`chrome.permissions`	动态请求和检查权限，提升安全性
窗口管理	`chrome.windows`	创建、管理浏览器窗口
历史记录访问	`chrome.history`	读取和管理浏览器访问历史
Cookies操作	`chrome.cookies`	读取、设置和删除Cookies
书签管理	`chrome.bookmarks`	操作浏览器书签

典型功能示例

广告屏蔽插件 ：主要用到webRequest监听和阻断请求。
页面样式美化 ：利用scripting动态注入CSS或JS。
自动填写表单 ：通过tabs获取当前页面信息，配合storage保存用户数据。
标签页管理工具 ：调用tabs和windows管理打开的网页和窗口。

七、总结

Chrome插件开发基于简单的HTML/JS/CSS技术，门槛低，扩展性强
掌握Manifest V3规范，适配最新Chrome架构
合理设计权限和消息机制，提升用户体验和安全性
开发调试周期短，快速迭代上线

快动手打造你的第一个Chrome插件吧！你还有哪些插件功能想实现？欢迎留言交流。

通过trae开发你的第一个Chrome扩展插件

前言：为什么现在要学Chrome插件开发？

一、Chrome插件开发基础概念

1. 基础必备字段

2. 插件界面相关配置

3. 权限（permissions）和域名访问限制

4. 背景脚本

5. 内容脚本（content_scripts）

3. 编写 background.js

4. 编写 content.js （注入网页，改变页面背景）

5. 编写 popup.html 和 popup.js

三、实战演示：简单插件实现页面背景色切换

1. 创建manifest.json文件

2. 创建popup.html文件

3. 创建popup.js文件

4. 加载和测试插件

四、如何调试和发布你的插件？

五、实战技巧：权限申请和消息通信

1. 权限申请原则

2. 消息通信示例

3. 自定义脚本注入

六、主流功能所需要的Chrome API

典型功能示例

七、总结

3. 编写 `background.js`

4. 编写 `content.js` （注入网页，改变页面背景）

5. 编写 `popup.html` 和 `popup.js`