点击扩展程序工具栏图标,简化当前页面的样式设置。
概览
本教程构建了一个扩展程序,可简化 Chrome 扩展程序和 Chrome 应用商店文档页面的样式设置,使其更便于阅读。
在本指南中,我们将介绍如何执行以下操作:
- 将扩展 Service Worker 用作事件协调器。
- 通过
"activeTab"
权限保护用户隐私。 - 在用户点击扩展程序工具栏图标时运行代码。
- 使用 Scripting API 插入和移除样式表。
- 使用键盘快捷键执行代码。
前期准备
本指南假定您具备基本的 Web 开发经验。建议您查看 Hello World,了解有关扩展程序开发工作流的简介。
构建扩展程序
首先,创建一个名为 focus-mode
的新目录,用于存储该扩展程序的文件。如果您愿意,可以从 GitHub 下载完整的源代码。
第 1 步:添加扩展程序数据和图标
创建一个名为 manifest.json
的文件,并在该文件中添加以下代码。
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
如需详细了解这些清单键,请查看“在每个标签页上运行脚本”教程,该教程详细介绍了扩展程序的元数据和图标。
创建一个 images
文件夹,然后将图标下载到其中。
第 2 步:初始化扩展程序
扩展程序可以使用扩展程序的 Service Worker 在后台监控浏览器事件。Service Worker 是特殊的 JavaScript 环境,用于处理事件,并会在不需要时终止。
首先,在 manifest.json
文件中注册 Service Worker:
{
...
"background": {
"service_worker": "background.js"
},
...
}
创建一个名为 background.js
的文件,并添加以下代码:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
我们的 Service Worker 将监听的第一个事件是 runtime.onInstalled()
。此方法可让扩展程序在安装时设置初始状态或完成一些任务。扩展程序可以使用 Storage API 和 IndexedDB 存储应用状态。不过,在这种情况下,由于我们只处理两种状态,因此将使用操作的标记文本本身来跟踪扩展程序处于“开启”还是“关闭”状态。
第 3 步:启用扩展程序操作
扩展程序操作可控制扩展程序的工具栏图标。因此,只要用户点击该扩展程序图标,它就会运行一些代码(如此示例所示)或显示一个弹出式窗口。添加以下代码,以在 manifest.json
文件中声明扩展程序操作:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
使用 activeTab 权限保护用户隐私
activeTab
权限授予扩展程序临时在活跃标签页上执行代码的权限。它还允许访问当前标签页的敏感属性。
当用户调用扩展程序时,系统会启用此权限。在这种情况下,用户通过点击扩展程序操作来调用扩展程序。
💡? 还有哪些用户互动会在我自己的扩展程序中实现 ActiveTab 权限?
- 按键盘快捷键组合。
- 选择上下文菜单项。
- 正在接受多功能框中的建议。
- 正在打开扩展程序弹出式窗口。
"activeTab"
权限可让用户有目的地选择在获得焦点的标签页上运行扩展程序;这样一来,便可以保护用户的隐私。另一个好处是它不会触发权限警告。
如需使用 "activeTab"
权限,请将其添加到清单的权限数组:
{
...
"permissions": ["activeTab"],
...
}
第 4 步:跟踪当前标签页的状态
用户点击扩展程序操作后,该扩展程序将检查网址是否与文档页面匹配。接下来,它会检查当前标签页的状态并设置下一个状态。将以下代码添加到 background.js
:
const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON';
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
第 5 步:添加或移除样式表
现在该更改页面布局了。创建一个名为 focus-mode.css
的文件,并在其中包含以下代码:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
使用 Scripting API 插入或移除样式表。首先,在清单中声明 "scripting"
权限:
{
...
"permissions": ["activeTab", "scripting"],
...
}
最后,在 background.js
中添加以下代码,以更改页面布局:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡? 我可以使用 Scripting API 而不是样式表来注入代码吗?
是的。您可以使用 scripting.executeScript()
注入 JavaScript。
可选:分配键盘快捷键
单纯是为了好玩,添加一个快捷方式,以便更轻松地启用或停用专注模式。将 "commands"
键添加到清单中。
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
"_execute_action"
键运行的代码与 action.onClicked()
事件相同,因此无需其他代码。
测试它是否正常运行
验证项目的文件结构是否如下所示:
在本地加载扩展程序
如需在开发者模式下加载已解压的扩展程序,请按照 Hello World 中的步骤操作。
在文档页面上测试扩展程序
首先,打开以下任一页面:
然后,点击相应扩展程序操作。如果您设置了键盘快捷键,可以通过按 Ctrl + B
或 Cmd + B
进行测试。
它应该由此生成:
更改为:
🎯? 有望改进的方面
根据您今天学到的知识,尝试完成以下任何操作:
- 改进 CSS 样式表。
- 指定其他键盘快捷键。
- 更改您喜爱的博客或文档网站的布局。
继续努力。
恭喜您学完了本教程 🎉?。请继续学习本系列中的其他教程,进一步提升技能:
扩展程序 | 学习内容 |
---|---|
阅读时间 | 在一组特定网页中自动插入元素。 |
标签页管理器 | 创建一个用于管理浏览器标签页的弹出式窗口。 |
继续探索
我们希望您喜欢这个 Chrome 扩展程序的构建过程,并且很高兴继续您的扩展程序开发学习之旅。我们建议您采用以下学习路线:
- 开发者指南还有数十个额外链接,这些链接指向与创建高级扩展程序相关的文档片段。
- 扩展程序可以访问除开放 Web 上提供的 API 之外的强大 API。 Chrome API 文档详细介绍了各个 API。