Chrome插件开发实战：从零到上架商店的完整指南

m0_68113040

314人浏览 · 2026-01-22 11:23:34

m0_68113040 · 2026-01-22 11:23:34 发布

前言：为什么每个前端都应该尝试开发插件？

上周，我为了自动抓取某个网站的数据，花了三小时写了一个Chrome插件。结果不仅解决了自己的问题，还意外地在插件商店获得了500+用户。开发一个Chrome插件没有想象中那么难，甚至比很多前端项目都简单。今天，我将分享完整的插件开发实战经验。

一、Chrome插件基础：五分钟了解核心概念

1.1 插件到底是什么？

简单来说，Chrome插件就是能增强浏览器功能的小程序。比如：

广告拦截器（AdBlock）
密码管理器（LastPass）
网页翻译工具
开发者工具增强

1.2 核心文件结构

my-extension/
├── manifest.json    # 插件配置文件（必须）
├── popup.html      # 点击图标弹出的界面
├── popup.js        # popup的JavaScript
├── background.js   # 后台脚本（长期运行）
├── content.js      # 注入到网页的脚本
└── icons/          # 图标文件夹
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

二、从零开始：你的第一个Chrome插件

2.1 创建最简单的插件

第一步：创建项目文件夹

mkdir my-first-extension
cd my-first-extension

第二步：创建manifest.json

{
  "manifest_version": 3,
  "name": "我的第一个插件",
  "version": "1.0",
  "description": "一个简单的Chrome插件示例",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

第三步：创建popup.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 300px;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    button {
      background: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h3>我的第一个插件</h3>
  <p>点击下面的按钮试试：</p>
  <button id="changeColor">改变页面颜色</button>
  <script src="popup.js"></script>
</body>
</html>

第四步：创建popup.js

document.getElementById('changeColor').addEventListener('click', () => {
  // 获取当前标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    // 向页面注入代码
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      func: () => {
        // 随机改变背景颜色
        const colors = ['#FFCCCC', '#CCFFCC', '#CCCCFF', '#FFFFCC'];
        document.body.style.backgroundColor = 
          colors[Math.floor(Math.random() * colors.length)];
        
        // 显示通知
        const div = document.createElement('div');
        div.textContent = '页面颜色已改变！';
        div.style.cssText = `
          position: fixed;
          top: 20px;
          right: 20px;
          background: #333;
          color: white;
          padding: 10px;
          border-radius: 5px;
          z-index: 999999;
        `;
        document.body.appendChild(div);
        setTimeout(() => div.remove(), 2000);
      }
    });
  });
});

2.2 加载和测试插件

打开Chrome，进入 chrome://extensions/
开启右上角「开发者模式」
点击「加载已解压的扩展程序」
选择你的插件文件夹
点击插件图标，测试功能！

三、核心功能开发实战

3.1 内容脚本：与网页交互

// content.js - 注入到网页的脚本

// 1. 修改页面内容
function modifyPage() {
  // 将所有链接变成橙色
  const links = document.querySelectorAll('a');
  links.forEach(link => {
    link.style.color = 'orange';
    link.style.fontWeight = 'bold';
  });
  
  // 在页面右上角添加自定义按钮
  const button = document.createElement('button');
  button.textContent = '插件按钮';
  button.style.cssText = `
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999999;
    padding: 5px 10px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  `;
  button.addEventListener('click', () => {
    alert('这是插件添加的按钮！');
  });
  document.body.appendChild(button);
}

// 2. 监听页面变化
const observer = new MutationObserver(modifyPage);
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// 初始执行
modifyPage();

3.2 后台脚本：长期运行的服务

// background.js - 后台脚本（Manifest V3改为service worker）

// 监听浏览器事件
chrome.runtime.onInstalled.addListener(() => {
  console.log('插件已安装');
  
  // 创建右键菜单
  chrome.contextMenus.create({
    id: "sampleContextMenu",
    title: "使用插件处理",
    contexts: ["selection"]  // 选中文本时显示
  });
});

// 监听右键菜单点击
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "sampleContextMenu") {
    // 获取选中的文本
    const selectedText = info.selectionText;
    
    // 发送消息给内容脚本
    chrome.tabs.sendMessage(tab.id, {
      action: "processText",
      text: selectedText
    });
  }
});

// 监听标签页更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    console.log(`页面加载完成: ${tab.url}`);
  }
});

3.3 弹出窗口与选项页面

选项页面配置（options.html）：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { padding: 20px; font-family: Arial; }
    .setting { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; }
    input, select { width: 300px; padding: 5px; }
  </style>
</head>
<body>
  <h2>插件设置</h2>
  
  <div class="setting">
    <label>主题颜色：</label>
    <select id="themeColor">
      <option value="light">浅色</option>
      <option value="dark">深色</option>
    </select>
  </div>
  
  <div class="setting">
    <label>自动运行：</label>
    <input type="checkbox" id="autoRun">
  </div>
  
  <button id="save">保存设置</button>
  
  <script src="options.js"></script>
</body>
</html>

保存和读取设置：

// options.js
document.getElementById('save').addEventListener('click', () => {
  const settings = {
    themeColor: document.getElementById('themeColor').value,
    autoRun: document.getElementById('autoRun').checked
  };
  
  // 保存到Chrome存储
  chrome.storage.sync.set(settings, () => {
    alert('设置已保存！');
  });
});

// 加载已有设置
chrome.storage.sync.get(['themeColor', 'autoRun'], (result) => {
  if (result.themeColor) {
    document.getElementById('themeColor').value = result.themeColor;
  }
  if (result.autoRun !== undefined) {
    document.getElementById('autoRun').checked = result.autoRun;
  }
});

四、实用插件案例开发

网页数据抓取器

// 抓取商品价格信息的插件
class PriceTracker {
  constructor() {
    this.products = [];
    this.init();
  }
  
  init() {
    // 从页面提取商品信息
    this.extractProducts();
    
    // 定时检查价格变化
    setInterval(() => this.checkPriceChanges(), 60000);
  }
  
  extractProducts() {
    // 根据网站结构提取信息
    const items = document.querySelectorAll('.product-item');
    
    items.forEach(item => {
      const name = item.querySelector('.product-name')?.textContent;
      const price = item.querySelector('.price')?.textContent;
      const url = window.location.href;
      
      if (name && price) {
        this.products.push({
          name,
          price: this.parsePrice(price),
          url,
          timestamp: Date.now()
        });
      }
    });
    
    // 保存到本地
    this.saveToStorage();
  }
  
  parsePrice(priceText) {
    return parseFloat(priceText.replace(/[^\d.]/g, ''));
  }
  
  checkPriceChanges() {
    this.products.forEach(product => {
      // 这里可以发送价格变动通知
      if (this.isPriceDropped(product)) {
        this.sendNotification(`价格下降：${product.name}`);
      }
    });
  }
  
  sendNotification(message) {
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icons/icon48.png',
      title: '价格提醒',
      message: message
    });
  }
  
  saveToStorage() {
    chrome.storage.local.set({ products: this.products });
  }
}