基础入门Chrome插件开发（附上代码）

最新推荐文章于 2025-09-06 15:58:39 发布

原创最新推荐文章于 2025-09-06 15:58:39 发布 · 928 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #前端

一.了解网页结构

首先，我们要知道网页的结构，一般简单的常见网页都是下面这个结构，

my-website/

├── index.html # 主HTML文件

├── css/

│ └── style.css # 全局样式

├── js/

│ └── main.js # 主JavaScript逻辑

├── images/ # 图片资源

└── README.md # 项目说明

HTML这层是结构层，主要是定义页面的内容和结构（如标题、按钮、图片等）

CSS这层是表现层，主要是控制页面外观（颜色、布局、字体等）

JS这层是行为层：实现动态交互（点击事件、数据加载等）

这样的话，我们知道制作的插件要修改的是哪一层的代码或者数据，下面举的例子是修改html的例子。

二.了解插件结构

制作插件之前，我们还要知道插件的结构是什么，下面是常见的插件结构

color-changer-extension/

├── manifest.json （插件配置文件）

├── popup.html （插件界面）

├── popup.js （交互逻辑）

└── icon.png （插件图标，64x64像素）

manifest.json这个你理解成是插件的身份证，里面写的是插件的各种信息。

popup.html这个是你插件的显示内容，就是你插件作用在网页上会显示的东西，一般是操作的按钮一类的。

popup.js这个是你插件的操作逻辑，就是你的插件要做成什么。

icon.png这个就是你插件的图标，在浏览器插件管理显示的的图标。

三.插件实战编码

下面是实战例子，这个简单的插件是可以修改网页的颜色，

零基础编写插件--网页调色器

1. 创建项目文件夹

在电脑上新建一个文件夹，命名为 color-changer-extension（名字可以随便取）。

2. 创建 `manifest.json`（插件身份证）

用 记事本 或 VS Code （哪个使用习惯用哪个）新建一个文件，命名为 manifest.json，并粘贴以下代码：

{
  "manifest_version": 3,
  "name": "网页调色器",
  "version": "1.0",
  "description": "一键修改网页背景色",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": ["activeTab", "scripting"]
}

如果使用的是记事本，注意保存之后，要把.txt改成对应的格式。

3. 创建 `popup.html`（插件界面）

新建一个 popup.html文件，粘贴以下代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    button {
      margin: 5px;
      padding: 8px;
      width: 100%;
      cursor: pointer;
    }
    #red { background: #ff6b6b; color: white; }
    #blue { background: #4d96ff; color: white; }
    #reset { background: #f1f1f1; }
  </style>
</head>
<body>
  <h3>网页调色器</h3>
  <button id="red">红色背景</button>
  <button id="blue">蓝色背景</button>
  <button id="reset">恢复默认</button>
  
  <script src="popup.js"></script>
</body>
</html>

4. 创建 `popup.js`（交互逻辑）

新建 popup.js文件，粘贴以下代码：

// 获取按钮
const redBtn = document.getElementById('red');
const blueBtn = document.getElementById('blue');
const resetBtn = document.getElementById('reset');

// 红色按钮点击事件
redBtn.addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setBackgroundColor,
    args: ['#ff6b6b']
  });
});

// 蓝色按钮点击事件
blueBtn.addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setBackgroundColor,
    args: ['#4d96ff']
  });
});

// 重置按钮点击事件
resetBtn.addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: resetBackgroundColor
  });
});

// 修改背景色
function setBackgroundColor(color) {
  document.body.style.backgroundColor = color;
}

// 恢复默认背景色
function resetBackgroundColor() {
  document.body.style.backgroundColor = '';
}