Hello Chrome Extendsions

大大qiqiu
73 阅读8分钟

零、⛰️ 背景

个人的目的是 Chrome Extendsions 的入门，梳理整理后分享给社区朋友。

重点会关注几个方向：

  1. 梳理整理推荐的学习资源
  2. 了解核心的内容，包括重点的扩展程序组件（设计界面、控制浏览器、控制网络），以及 Web 平台和关键 API 的复杂应用场景
  3. Hello Demo 实践

一、📚 推荐学习资源

  1. 官方文档：Chrome Extensions Documentation
  2. 示例代码库：Chrome Extension Samples
  3. 调试工具：Chrome DevTools -> Application面板
  4. 社区支持：Stack Overflow #google-chrome-extension
  5. 【干货】Chrome插件(扩展)开发全攻略 - 我是小茗同学 - 博客园

二、🌟 核心内容

Chrome 扩展的核心概念通过 Service Worker、权限管理、内容过滤、消息传递和原生消息传递等机制，实现了对浏览器和网络的控制。

这些机制与扩展的核心组件（设计界面、控制浏览器、控制网络）紧密关联，共同构成了扩展的功能基础。通过这些机制，开发者可以构建功能强大且灵活的浏览器扩展，满足不同的用户需求。

1.扩展程序组件

1.1 设计界面

大多数扩展程序都需要某种类型的用户互动才能正常运行。扩展程序平台提供了多种方式来向您的扩展程序添加互动。这些方法包括从 Chrome 工具栏、侧边栏、上下文菜单等触发的弹出式窗口。

  • 侧边栏 ： 使用 chrome.sidePanel API 可将内容托管在浏览器侧边栏中的网页主要内容旁边。
  • 操作 ： 控制扩展程序图标在工具栏中的显示。
  • 菜单 ： 向 Google Chrome 的上下文菜单添加项。

1.2 控制浏览器

借助 Chrome 的扩展程序 API，您可以改变浏览器的工作方式。

  • 覆盖 Chrome 网页和设置： 设置覆盖是扩展程序覆盖所选 Chrome 设置的一种方式。此外，扩展程序可以使用 HTML 覆盖网页来替换 Google Chrome 通常提供的网页。扩展程序可以覆盖书签管理器、“历史记录”标签页或新标签页。
  • 扩展开发者工具： 开发者工具扩展程序可通过添加到扩展程序中的开发者工具页面访问开发者工具专用扩展程序 API，从而向 Chrome 开发者工具中添加功能。您也可以使用 chrome.debugger API 来调用 Chrome 的远程调试协议。附加到一个或多个标签页，以插桩网络交互、调试 JavaScript、更改 DOM 等。
  • 显示通知： 借助 chrome.notifications API，您可以使用模板创建通知，并在用户的系统任务栏中向用户显示这些通知。
  • 管理历史记录： 您可以使用 chrome.history API 与浏览器的已访问网页记录进行交互，并使用 chrome.browsingData API 管理其他浏览数据。使用 chrome.topSites 访问最常访问的网站。
  • 控制标签页和窗口： 使用 chrome.tabs、chrome.tabGroups 和 chrome.windows 等 API 创建、修改和排列用户的浏览器。
  • 添加键盘快捷键： 使用 chrome.commands API 添加可在扩展程序中触发操作的键盘快捷键。例如，您可以添加用于打开浏览器操作的快捷方式，或者向扩展程序发送命令。
  • 对用户进行身份验证： 使用 chrome.identity API 获取 OAuth 2.0 访问令牌。
  • 管理扩展程序： chrome.management API 提供了管理已安装和正在运行的扩展程序列表的方法。它尤其适用于会替换内置“新标签页”页面的扩展程序。
  • 提供建议： 借助 chrome.omnibox API，您可以在 Google Chrome 的多功能框（地址栏）中注册关键字。
  • 更新 Chrome 设置： 使用 chrome.privacy API 可以控制使用 Chrome 中可能会影响用户隐私的功能。另请参阅 chrome.proxy API 以管理 Chrome 的代理设置。
  • 管理下载内容： 使用 chrome.downloads API，以编程方式启动、监控、操纵和搜索下载内容。
  • 使用书签和阅读清单： 使用 chrome.bookmarks API 和 chrome.readingList API 来创建、整理和以其他方式操作这些列表。

1.3 控制网络

动态更改网页的内容和行为。您可以通过注入脚本、拦截网络请求以及使用 Web API 与网页进行交互，来控制和修改 Web。

  • 注入 JavaScript 和 CSS： 内容脚本是在网页环境中运行的文件。它们使用标准文档对象模型 (DOM) 读取浏览器所访问网页的详情、更改这些网页，并将信息传递给其父级扩展程序。
  • 访问活动标签页： "activeTab" 权限可让扩展程序在用户调用该扩展程序时（例如通过点击其操作）临时访问当前处于活动状态的标签页。用户访问该标签页时，对标签页的访问权限会一直有效；当用户离开页面或关闭标签页时，访问权限便会撤消。
  • 控制网络请求： 使用 chrome.declarativeNetRequest、chrome.webRequest 和 chrome.webNavigation API 观察、屏蔽和修改网络请求。
  • 录音和屏幕截图： 了解使用 chrome.tabCapture 或 getDisplayMedia() 等 Web 平台 API 录制标签页、窗口或屏幕中音频和视频的不同方法。
  • 修改网站设置： 使用 chrome.contentSettings API 可以控制网站是否可以使用 Cookie、JavaScript 和插件等功能。从更笼统的角度来说，内容设置可让您按网站（而非全局）自定义 Chrome 的行为。

3.Web 平台、API 概念

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

  1. manifest.json：
    • 作用 ： 整个扩展的配置文件，声明名称、版本、描述、权限、图标及各模块（如background、content scripts、popup等）的入口。
  1. Service Worker：
    • 作用：Service Worker 是扩展的后台脚本，负责处理数据、协调任务和管理事件。它在后台运行，不直接与用户界面交互，但可以与其他扩展组件（如内容脚本、弹出页面等）进行通信。
    • 关联：Service Worker 是扩展的“大脑”，负责控制扩展的逻辑和数据处理，与控制浏览器和控制网络密切相关。
  1. 权限：
    • 作用：权限管理是扩展安全性和功能性的关键。扩展需要请求特定的权限来访问浏览器功能、用户数据或网络资源。合理管理权限可以避免不必要的权限请求，提升用户体验。
    • 关联：权限管理与控制浏览器和控制网络直接相关，因为扩展需要权限来执行这些操作。
  1. 内容过滤：
    • 作用：内容过滤允许扩展对网页内容或网络请求进行拦截、修改或阻止。通过使用不同的过滤方法和技术，扩展可以实现广告拦截、隐私保护、内容修改等功能。
    • 关联：内容过滤与控制网络密切相关，因为它涉及对网络请求的处理和修改。
  1. 消息传递：
    • 作用：消息传递机制允许扩展的不同部分（如内容脚本、Service Worker、弹出页面等）进行通信。通过消息传递，扩展可以协调不同组件之间的任务和数据交换。
    • 关联：消息传递是扩展内部组件之间的桥梁，与设计界面和控制浏览器相关，因为它涉及用户界面与后台逻辑的交互。
  1. 原生消息传递：
    • 作用：原生消息传递允许扩展与本地应用程序进行通信。这使得扩展可以与安装在用户计算机上的其他软件进行交互，扩展了其功能范围。
    • 关联：原生消息传递与控制浏览器和控制网络相关，因为它涉及与外部应用程序的交互，可能影响浏览器行为或网络请求。

4.复杂组合应用

  1. 设计界面：
    • 关联：通过消息传递机制，扩展的用户界面（如弹出页面、选项页面）可以与后台的 Service Worker 进行通信，动态更新界面内容或响应用户操作。
    • 作用：消息传递使得用户界面能够与扩展的后台逻辑进行交互，提供动态和响应式的用户体验。
  1. 控制浏览器：
    • 关联：Service Worker 和权限管理是控制浏览器的关键。Service Worker 可以监听浏览器事件并执行相应操作，而权限管理则决定了扩展可以访问哪些浏览器功能。
    • 作用：通过控制浏览器，扩展可以修改浏览器行为、管理标签页、处理下载等。
  1. 控制网络：
    • 关联：内容过滤和原生消息传递是控制网络的核心。内容过滤允许扩展拦截和修改网络请求，而原生消息传递可以与本地应用程序交互，进一步扩展网络控制能力。
    • 作用：通过控制网络，扩展可以实现广告拦截、隐私保护、网络请求重定向等功能。

三、🚩 基础开发流程

  1. 项目结构搭建
    • 创建项目文件夹，包含manifest.json、background.js（或Service Worker）、content-script.js、popup.html等文件。
  1. 编写manifest.json
    • 定义扩展的基本信息和各模块入口。
  1. 开发各模块
    • 后台脚本：编写事件监听与消息处理逻辑。
    • 内容脚本：编写注入页面的DOM操作和交互代码。
    • Popup页面：设计简单的用户界面，利用事件与后台通信。
  1. 加载与调试
    • 在Chrome地址栏输入chrome://extensions，开启开发者模式，加载未打包的扩展，实时调试各模块（注意background报错需单独检查）。
  1. 打包与发布
    • 测试无误后打包成.crx文件，内部工作台工具一般在企业内部分发使用，必要时也可提交Chrome Web Store。

四、🔧 Hello DEMO

5个官方 Hello DEMO 章节的个人之实践，from github 仓库。

avatar
文章
阅读
粉丝