点击扩展程序工具栏图标,简化当前网页的样式。
概览
本教程将构建一个扩展程序,用于简化 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 步:初始化扩展程序
扩展程序可以使用扩展程序的服务在后台监控浏览器事件 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 用于存储应用状态。但在本例中,由于我们只处理两种状态,因此我们将根据“操作的标志”文字本身来跟踪附加信息是否处于“启用”状态。或“OFF”。
第 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
权限可授予扩展程序临时执行代码的权限
。它还允许访问以下内容的敏感属性:
当前标签页
系统会在用户调用扩展程序时启用此权限。在这种情况下,用户调用 附加信息。
💡? 还有哪些用户互动可以在我自己的扩展程序中启用 activityTab 权限?
- 按键盘快捷键组合。
- 选择上下文菜单项。
- 正在接受来自多功能框的建议。
- 正在打开扩展程序弹出式窗口。
"activeTab"
权限可让用户故意选择在
聚焦标签页;从而保护用户的隐私另一个好处是
就会触发权限警告。
如需使用 "activeTab"
权限,请将其添加到清单的 Permissions 数组中:
{
...
"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
进行测试。
它应从以下内容开始:
<ph type="x-smartling-placeholder">![专注模式扩展程序已关闭](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/scripts-activetab/image/focus-mode-extension-off-dc8f9326aa92b.png?authuser=9&hl=da)
更改为:
<ph type="x-smartling-placeholder">![专注模式扩展程序已开启](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/scripts-activetab/image/focus-mode-extension-on-c248a59b498ea.png?authuser=9&hl=da)
🎯? 提升潜力
根据您今天学到的知识,尝试完成以下任一操作:
- 改进 CSS 样式表。
- 指定其他键盘快捷键。
- 更改您喜爱的博客或文档网站的布局。
继续努力。
恭喜您学完本教程 🎉?。通过完成其他课程来继续提升技能 本系列教程:
扩展程序 | 学习内容 |
---|---|
阅读时间 | 在一组特定页面上自动插入元素。 |
标签页管理器 | 创建用于管理浏览器标签页的弹出式窗口。 |
继续探索
我们希望您喜欢构建此 Chrome 扩展程序,并且很高兴能继续开发您的扩展程序 学习之旅。我们建议您遵循以下学习路线:
- 开发者指南中提供了数十个其他指向相关文档的链接 与创建高级附加信息相关的重要问题。
- 扩展程序可以访问开放 Web 所没有的强大 API。 Chrome API 文档详细介绍了各个 API。