如何开发chrome浏览器插件？插件能做什么？示例源码调试

小黄人软件

于 2025-02-07 15:02:05 发布

阅读量1.1k

点赞数 13

文章标签： chrome 前端

本文链接：https://blog.csdn.net/chenhao0568/article/details/145494367

版权

在这里插入图片描述

示例

目标：进入任意网页，更改body背景色为red。点插件“changeColor” 更改body背景色为lightgreen

源码：

开发 Chrome 浏览器插件（扩展）主要包括以下几个步骤。Chrome 插件可以实现多种功能，例如修改网页内容、与外部 API 通信、管理标签页、自动化任务等等。

1. 准备开发环境

你只需要一个文本编辑器（如 VS Code）和 Chrome 浏览器。无需额外的 IDE。

2. 插件的基本结构

一个 Chrome 插件的文件夹通常包括以下几个文件：

manifest.json：描述插件的基本信息、权限以及插件的运行方式。
background.js：负责处理浏览器后台任务的脚本。
content.js：插入网页中的 JavaScript，用于与页面内容互动。
popup.html：点击浏览器工具栏图标时显示的弹出窗口的 HTML 文件。
可能的其他文件：CSS、图片、其他 JavaScript 文件等。

3. manifest.json 配置

manifest.json 文件是 Chrome 插件的核心配置文件。它指定了插件的名称、版本、权限等。例如：

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension.",
  "permissions": ["activeTab", "scripting"]
  ,
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

manifest_version: 表示使用的 manifest 文件版本，当前推荐使用版本 3。
permissions: 插件请求的权限，这里请求的是访问当前页面的权限。
background: 指定后台运行的脚本。
action: 定义点击插件图标时显示的弹窗。
content_scripts: 定义注入到页面中的脚本。

4. 编写插件的代码

background.js: 负责监听事件，例如浏览器打开、关闭标签页、按下按钮等。

chrome.runtime.onInstalled.addListener(function() {
  console.log("插件已安装！");
});

content.js: 用于与网页进行交互，获取页面内容或修改它。

document.body.style.backgroundColor = "lightblue";  // 修改页面背景颜色

popup.html: 用来创建插件图标点击时显示的 HTML 页面。

<!DOCTYPE html>
<html>
  <head>
    <title>插件弹窗</title>
  </head>
  <body>
    <h1>A simple Chrome extension</h1>
    <button id="changeColor">changeColor22</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js: 控制弹窗行为，比如与 content.js 交互。

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