浏览器插件开发

时雨_
317 阅读2分钟

浏览器插件开发

简介

浏览器插件(也称为浏览器扩展)是可以修改和增强浏览器功能的软件组件。

主要浏览器平台的插件技术

  1. Chrome扩展 - 基于Web技术(HTML, CSS, JavaScript)
  2. Firefox附加组件 - 基于WebExtensions API(与Chrome扩展类似)
  3. Edge扩展 - 与Chrome扩展兼容
  4. Safari扩展 - 使用Apple的Safari扩展API

开发步骤

以Chorme为例

chorme-extension/
├── manifest.json       # 核心配置文件
├── icon.png            # 图标
├── popup.html          # 弹出窗口界面
├── popup.js            # 弹出窗口逻辑
├── popup.css           # 弹出窗口样式
├── background.js       # 后台脚本
└── content.js          # 内容脚本(注入到网页中)

manifest.json

核心配置文件, 具体如下

{
  "manifest_version": 3,
  "name": "A Example",
  "version": "1.0",
  "description": "hello Extensions",
  "icons": {
    "48": "icon.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": ["storage"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
Ï      "js": ["content.js"]
    }
  ]
}
  • manifest_version - Chorme拓展的版本号，目前为V3，V2版本已被Chorme废弃，V2废弃的原因
  • permissions - 向浏览器申请权限，如：storage，cookie，tab等等

扩展核心功能

  • Popup页面(popup.html) - 用户点击扩展图标时显示的界面
  • 后台脚本(background.js) - 长期运行的脚本，处理核心逻辑
  • 内容脚本（content.js） - 注入到网页中，与网页DOM交互
popup
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示出hello Extensions</title>
    <link rel="stylesheet" type="text/css" href="./popup.css">
</head>

<body>
    <h1>显示出hello Extensions</h1>
    <button id="btn">点击按钮</button>
    <script src="./popup.js"></script>
</body>

</html>

body {
    width: 300px;
    height: 200px;
    background-color: pink;
}

document.getElementById('btn').addEventListener('click', function () {
    document.getElementById('title').innerText = '按钮被点击了';
});

popup - 红圈区域

image.png

测试

  • Chrome: 打开chrome://extensions，启用"开发者模式"，点击"加载已解压的扩展程序"
  • Firefox: 打开about:debugging，点击"临时加载附加组件"

发布

  • Chrome Web Store
  • Firefox Add-ons
  • Microsoft Edge Add-ons

附加知识

Chrome扩展的manifest_version详解

Chrome扩展的manifest_version是指定扩展使用的清单文件规范的版本号，目前主要为V3两个版本。

时间线与兼容性
  • 2024年6月：Chrome开始逐步禁用V2扩展
  • 2025年6月：Chrome 139完全移除对V2扩展的支持
Manifest V2与V3的主要区别

  1. 后台处理机制：

    • V2使用持久或事件后台页面
    • V3使用Service Worker替代后台页面，更节省资源

  2. 网络请求处理：

    • V2使用webRequestAPI, 更自由
    • V3主要使用声明式的declarativeNetRequestAPI

  3. 远程代码执行：

    • V2允许执行远程托管的代码
    • V3严格禁止执行远程代码，所有代码必须包含在扩展包内

  4. 权限系统：

    • V3引入了更细粒度的权限控制，将主机权限分离到单独的host_permissions字段
废弃原因

从V3更新的配置中可以看出，废弃V2的最大原因是因为其安全性问题

学习资源

Chrome扩展官方文档

avatar
文章
阅读
粉丝