Chrome 插件开发学习
Chrome 插件开发学习
https://developer.chrome.com/docs/extensions/mv3/ (opens in a new tab)
基本概念
https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/ (opens in a new tab)
插件能干嘛
- 生产工具
- 页面内容增强
- 信息汇总
Chrome Web Store (opens in a new tab)
Web 技术
三剑客
- HTML (opens in a new tab) is used as a content markup language.
- CSS (opens in a new tab) is used for styling.
- JavaScript (opens in a new tab) is used for scripting and logic.
扩展 API
扩展程序可以使用浏览器提供的所有JavaScript APIs。扩展程序之所以比网络应用程序更强大，是因为它们可以使用Chrome的API。
以下是扩展程序可以做什么的几个例子
- 改变一个网站的功能或行为
- 允许用户收集和组织各网站的信息
- 为Chrome DevTools添加功能
API 文档详见 Extension development overview (opens in a new tab)
扩展文件
扩展程序包含不同的文件，这取决于所提供的功能。以下是一些最经常使用的文件：
manifest.json
扩展的清单是唯一需要的文件，必须有一个特定的文件名： manifest.json 。 它还必须位于扩展的根目录中。清单记录了重要的元数据，定义了资源，声明了权限，并确定了哪些文件要在后台和页面上运行
service worker
扩展服务工作者处理并监听浏览器事件。有许多类型的事件，如导航到一个新页面、删除书签或关闭标签。 它可以使用所有的Chrome API，但它不能与网页内容直接互动；那是内容脚本的工作。
content scripts
内容脚本在网页的背景下执行Javascript。 它们还可以读取和修改它们所注入的网页的DOM。 内容脚本只能使用Chrome API的一个子集，但可以通过与扩展服务工作者交换信息来间接访问其余内容。
popup & other pages
一个扩展可以包括各种HTML文件，如弹出窗口、选项页和其他HTML页面。 所有这些页面都可以访问Chrome的API
访问 Extensions Architecture (opens in a new tab) 和 Designing the user interface (opens in a new tab) 去深入了解开发
开发你的插件
尽管Web应用程序和扩展共享许多相同的技术，但扩展的开发经验是不同的。查看Development Basics (opens in a new tab)，创建一个 "你好，扩展 "的例子，熟悉扩展开发的工作流程。
设计你的插件功能
当您开始设计您的扩展并选择支持哪些功能时，请确保它能满足一个单一的目的 (opens in a new tab)，而且是狭义的，易于理解的。这将使你的扩展程序能够通过Chrome网络商店发布
💡 "单一目的 "到底是什么意思？
"单一目的 "可以指扩展的两个方面中的一个：
- 一个扩展可以有一个单一的目的，
仅限于一个狭窄的重点领域或主题。例如，"新闻头条"、"天气"、"比较购物"。 - 或者，一个扩展可以有一个单一的目的，
局限于一个狭窄的浏览器功能。例如，"新标签页"，"标签管理"，或 "搜索提供者"。
无论扩展的目的是什么，扩展所提供的体验必须尊重用户的其他设置和偏好。
更多细节见 扩展程序质量指南 (opens in a new tab)
分发你的插件
你可以在Chrome网络商店建立一个开发者账户，以托管和发布你的扩展。请记住，扩展程序必须遵守开发者计划的政策。
请参阅 在Chrome网络商店中发布 (opens in a new tab) 了解如何发布您的扩展程序。
如果我只想在我的组织内分发扩展程序怎么办？
一些组织使用企业政策在其用户的设备上安装扩展程序。这些扩展程序可以从Chrome网络商店中获取，也可以托管在企业的网络服务器上。请在 企业发布选项 (opens in a new tab) 中了解这两种情况。
🚀 准备好开始建造了吗？
选择以下任何一个教程，开始你的扩展学习之旅
| Extension | What you will learn |
|---|---|
| Reading time (opens in a new tab) | 在每个页面上自动插入一个元素 |
| Focus Mode (opens in a new tab) | 点击扩展动作后，要在当前页面上运行代码 |
| Tabs Manager (opens in a new tab) | 要创建一个管理浏览器标签的弹出窗口 |
作为奖励，这些教程是为了改善您在阅读Chrome扩展和Chrome网络商店文档时的体验：
- 阅读时间为每篇文档文章添加预期阅读时间。
- 焦点模式改变了页面的风格，帮助您集中精力阅读文档内容。
- 标签管理器允许你组织你的扩展程序文档标签
这三个好像都不是很适合 我需要一个后台运作的
开发
调试
popup 页面
和开发web页面差不多 没啥区别
content.js 内容脚本
devtool - > sources -> content scripts (很多插件的内容脚本)
background.js 后台脚本
chrome://extensions/ -> 插件卡片 -> service worker
发布
Chrome 插件示例 (opens in a new tab)
FAQ
default_popup 和 chrome.action.onClicked 在一定程度上是互斥的
换句话说，如果你希望在用户点击扩展图标时执行某些代码，你应该选择使用 chrome.action.onClicked。但是，如果你希望展示一些HTML内容，你应该使用 default_popup
