创建您的首个在网页上插入新元素的附加信息。
概览
本教程将构建一个扩展程序,可将预期阅读时间添加到任何 Chrome 扩展程序,并且 Chrome 应用商店文档页面。
<ph type="x-smartling-placeholder">![在扩展程序的欢迎页面中阅读延期信息](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-extension-the-e-0070620f12665.png?authuser=9&hl=ca)
在本指南中,我们将介绍以下概念:
- 扩展程序清单。
- 扩展程序使用哪些图标大小。
- 如何使用内容脚本将代码注入页面。
- 如何使用匹配模式。
- 扩展程序权限。
前期准备
本指南假定您具备基本的 Web 开发经验。建议您查看 Hello World 教程,用于简要介绍扩展程序开发工作流。
构建扩展程序
首先,创建一个名为 reading-time
的新目录来存放该扩展程序的文件。如果您
您也可从 GitHub 下载完整的源代码。
第 1 步:添加扩展程序的相关信息
JSON 清单文件是唯一的必需文件。其中包含有关
。在项目的根目录中创建一个 manifest.json
文件,并添加以下代码:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
这些键包含扩展程序的基本元数据。它们可以控制扩展程序在扩展程序页面上的显示方式,以及在扩展程序发布后在 Chrome 应用商店中的显示方式。如需深入了解相关内容,请参阅
按 "name"
、"version"
和 "description"
键
清单概览页面。
💡? 关于扩展程序清单的其他事实
- 该文件必须位于项目的根目录下。
- 必需的键只有
"manifest_version"
、"name"
和"version"
。 - 它在开发过程中支持注释 (
//
),但在将代码上传到 Chrome 应用商店之前,您必须先移除这些注释。
第 2 步:提供图标
那么,为什么需要图标呢?虽然图标在开发过程中是可选的,但它们 如果您计划在 Chrome 应用商店中分发扩展程序,则必须提交此属性。还会出现在 如“扩展程序管理”页面
创建一个 images
文件夹,并将图标放入其中。您可以在以下位置下载图标:
GitHub接下来,将突出显示的代码添加到清单中,以声明图标:
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
我们建议使用 PNG 文件,但允许使用除 SVG 文件之外的其他文件格式。
💡? 这些大小不同的图标在哪里显示?
图标大小 | 图标的使用 |
---|---|
16x16 | 扩展程序页面和上下文菜单上的网站图标。 |
32x32 | Windows 计算机通常需要此大小。 |
48x48 | 显示在“扩展程序”页面上。 |
128x128 | 在安装和 Chrome 应用商店中显示。 |
第 3 步:声明内容脚本
扩展程序可以运行读取和修改网页内容的脚本。这些内容称为内容 脚本。它们生活在与众不同的世界,这意味着它们可以对自己的 JavaScript 环境进行更改,而不会与其托管网页或其他扩展程序发生冲突。内容脚本。
将以下代码添加到 manifest.json
,以注册名为
content.js
。
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
"matches"
字段可以具有一个或多个匹配模式。通过这些方法
确定要将内容脚本注入哪些网站。匹配模式由三部分组成:
<scheme>://<host><path>
。可以包含“*
”字符。
💡? 此扩展程序是否会显示权限警告?
用户安装扩展程序时,浏览器会通知用户扩展程序的功能。内容脚本请求在符合匹配模式条件的网站上运行的权限。
在此示例中,用户会看到以下权限警告:
<ph type="x-smartling-placeholder">![用户在安装“朗读时间”扩展程序时会看到的权限警告](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/permission-warning-user-af0cb023a0128.png?authuser=9&hl=ca)
如需深入了解扩展程序权限,请参阅声明权限并向用户发出警告。
第 4 步:计算并插入阅读时间
内容脚本可以使用标准文档对象模型 (DOM) 来读取和更改
网页内容该扩展程序会先检查网页是否包含 <article>
元素。
然后,它会计算此元素中的所有字词,并创建一个显示总字词的段落。
阅读量。
在名为 scripts
的文件夹中创建一个名为 content.js
的文件,并添加以下代码:
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡? 此代码中使用的有趣的 JavaScript
- 普通
表达式,用于仅计算
<article>
元素内的字词数量。 insertAdjacentElement()
,用于在该元素后插入阅读时间节点。- 用于向元素类属性添加 CSS 类名称的 classList 属性。
- 可选链,用于访问可能未定义或 null 的对象属性。
- 如果
<date>
为 null 或未定义,Nullish 合并会返回<heading>
。
测试是否有效
验证项目的文件结构是否如下所示:
在本地加载扩展程序
要在开发者模式下加载已解压的扩展程序,请按照开发 基础知识。
打开扩展程序或 Chrome 应用商店文档
您可以打开以下页面,查看每篇文章的阅读用时。
它应如下所示:
<ph type="x-smartling-placeholder">![在欢迎页面上运行阅读时间](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-running-the-wel-1d750346edcea.png?authuser=9&hl=ca)
🎯? 提升潜力
根据您今天学到的知识,请尝试实现以下任一操作:
- 在 manifest.json 中添加另一个匹配模式,以支持其他 Chrome 开发者 例如 Chrome 开发者工具或工作框页面。
- 添加新的内容脚本,用于计算阅读您喜欢的任何博客或 文档网站。
继续构建
恭喜您学完本教程 🎉?。通过完成其他课程,继续培养技能 本系列教程:
扩展程序 | 学习内容 |
---|---|
专注模式 | 点击扩展程序操作后在当前网页上运行代码。 |
标签页管理器 | 创建用于管理浏览器标签页的弹出式窗口。 |
继续探索
我们希望您喜欢构建这个 Chrome 扩展程序,也很高兴能继续开发您的 Chrome 学习之旅。我们建议您遵循以下学习路线:
- 开发者指南中提供了数十个其他指向相关文档的链接 与创建高级附加信息相关的重要问题。
- 扩展程序可以访问开放 Web 所没有的强大 API。 Chrome API 文档详细介绍了各个 API。