Chrome插件开发

Chrome插件开发

技术栈

  • 基础技术:HTML(界面)、CSS(样式)、JavaScript(逻辑),也可以使用框架开发。
  • 核心配置文件manifest.json(定义扩展的元数据、权限和功能)。
  • 核心组件Service Worker(后台脚本),Content Scripts(内容脚本),UI(用户界面)
  • 消息传递:各模块之间的消息传递
  • 浏览器 API :通过 chrome.* 命名空间调用(如 chrome.tabschrome.storage)。

关键文件

manifest.json

json 复制代码
{
  "manifest_version": 3,
  "name": "页面标题修改器",
  "version": "1.0",
  "description": "一个简单的标题修改插件",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_title": "修改页面标题"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  ...
}

借助浏览器可以实现以下功能:

  • 修改网页内容(如广告拦截、样式修改)。
  • 浏览器功能扩展(如快捷键、标签管理、下载工具)。
  • 数据存储与同步(如密码管理、笔记工具)。
  • 调用浏览器 API(如书签、历史记录、网络请求拦截)。

扩展程序在用户授权下运行,需明确声明权限(如访问特定网站、读取剪贴板),遵循安全沙箱机制,确保用户隐私。

chrome插件能力

1. 设计能力

操作项(popup/action)

控制插件图标在工具栏中的显示。

json 复制代码
{
  "action": {
    "default_popup": "popup.html",
    "default_title": "修改页面标题"
  },
}
菜单项(Menus)

向 Google Chrome 的上下文菜单添加项。

侧边栏(Side panel​)

2. 控制浏览器

借助 Chrome​ 的插件 API​,可以改变浏览器的工作方式:

  1. 覆盖 Chrome 页面和设置项:Manifest.json 配置 chrome_settings_overrides
  2. 插件开发者工具:Manifest.json 配置 devtools_page
  3. 显示通知:chrome.notifications API
  4. 管理历史记录:chrome.history API
  5. 控制标签页和窗口:chrome.tabs、chrome.tabGroupschrome.windowsAPI
  6. 键盘快捷键:chrome.commands API
  7. 身份认证:chrome.identity API
  8. 管理插件:chrome.management API
  9. 提供建议:chrome.omnibox API
  10. 更新 Chrome 设置:chrome.proxy API
  11. 下载管理:chrome.downloads API
  12. 书签:chrome.bookmarks API
  13. ......

3. 控制网络

可以通过注入脚本、拦截网络请求以及使用 Web API​ 与网页进行交互,来控制和修改 Web​:

  1. 注入 JSCSS 文件
  2. 访问当前 Tab
  3. 控制 Web 请求
  4. 录音和屏幕截图
  5. 修改网站设置

Chrome​ 插件核心概念

使用 Web 平台和扩展 API,可以通过组合不同的界面组件和扩展平台功能来构建更复杂的功能。

1. Service Worker

Service worker​ 是一个基于事件的脚本,在浏览器后台运行。它通常用于处理数据、协调扩展中不同部分的任务,以及作为扩展的事件管理器。

2. Permissions​ 权限

插件在浏览器中获取的功能和数据访问权限,通过声明所需的权限,插件可以执行更广泛的操作。

权限最小化原则,需要哪些权限加哪些权限。

3. Content script​ 内容脚本

内容脚本是在网页环境中运行的文件,可以操作 DOM​,读取浏览器访问网页的信息,对网页就行更改等。

4. Action/Popup

浏览器工具栏中显示的图标或按钮,用户可以单击该图标或按钮来执行插件提供的功能或操作。

5. 消息传递

一般来说,消息传递是指 action​、content script​、service worker​ 三者之间进行消息传递。

正式由于沙箱机制的处理,Chrome 扩展的不同组件运行在独立的上下文中,彼此权限不同:

组件 权限范围
内容脚本(Content Scripts) - 可以访问当前网页的 DOM,但无法直接调用敏感浏览器 API (如 chrome.tabs​)。 - 需通过消息传递与后台脚本(Service Worker)通信。
后台脚本(Service Worker) - 可以调用浏览器 API(如操作标签页、书签、存储数据),但无法直接访问网页 DOM。 - 不持久化运行,仅在事件触发时激活。
弹出页(Popup)或选项页(Options Page) - 普通网页环境,默认无法直接访问浏览器 API ,需通过 chrome.runtime​ API 与后台通信。

6. Storage​ 存储

Chrome​ 插件有一个专门的 storage API​,用来进行数据存储。

7. 匹配模式

在开发 Chrome​ 插件时,可以使用的一种模式匹配语法,用于指定插件的内容脚本或页面操作脚本在哪些 URL 匹配模式下执行

相关推荐
FreeBuf_15 分钟前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend19 分钟前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理25 分钟前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构
API开发30 分钟前
apiSQL+GoView:一个API接口开发数据大屏
前端·后端·api·数据可视化·数据大屏·apisql
运维开发王义杰31 分钟前
nodejs:揭秘 npm 脚本参数 -- 的妙用与规范
前端·npm·node.js
我是日安38 分钟前
从零到一打造 Vue3 响应式系统 Day 18 - Reactive:深入 Proxy 的设计思路
前端·vue.js
你的人类朋友40 分钟前
🍃说说Base64
前端·后端·安全
ze_juejin1 小时前
Node.js 全局变量完整总结
前端
ttyyttemo1 小时前
Learn-Jetpack-Compose-By-Example---TextFieldValue
前端
_AaronWong1 小时前
多页面应用登录状态共享:基于弹出窗口的通用解决方案
前端·javascript·vue.js