在每个网页上运行脚本

创建您的首个在网页上插入新元素的附加信息。

概览

本教程将构建一个扩展程序，可将预期阅读时间添加到任何 Chrome 扩展程序，并且 Chrome 应用商店文档页面。

<ph type="x-smartling-placeholder">
</ph> 在扩展程序的欢迎页面中阅读延期信息 <ph type="x-smartling-placeholder">
</ph> 阅读扩展程序欢迎页面上的延期内容。

在本指南中，我们将介绍以下概念：

  • 扩展程序清单。
  • 扩展程序使用哪些图标大小。
  • 如何使用内容脚本将代码注入页面。
  • 如何使用匹配模式。
  • 扩展程序权限。

前期准备

本指南假定您具备基本的 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">
</ph> 用户在安装“朗读时间”扩展程序时会看到的权限警告 <ph type="x-smartling-placeholder">
</ph> 阅读时间权限警告。

如需深入了解扩展程序权限，请参阅声明权限并向用户发出警告。

第 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>。

测试是否有效

验证项目的文件结构是否如下所示：

阅读时间文件夹的内容：manifest.json、script 文件夹中的 content.js 和 images 文件夹。

在本地加载扩展程序

要在开发者模式下加载已解压的扩展程序，请按照开发 基础知识。

打开扩展程序或 Chrome 应用商店文档

您可以打开以下页面，查看每篇文章的阅读用时。

它应如下所示：

<ph type="x-smartling-placeholder">
</ph> 在欢迎页面上运行阅读时间 <ph type="x-smartling-placeholder">
</ph> 包含“朗读时间”扩展程序的“扩展程序欢迎”页面

🎯? 提升潜力

根据您今天学到的知识，请尝试实现以下任一操作：

。

继续构建

恭喜您学完本教程 🎉?。通过完成其他课程，继续培养技能 本系列教程：

扩展程序 学习内容
专注模式 点击扩展程序操作后在当前网页上运行代码。
标签页管理器 创建用于管理浏览器标签页的弹出式窗口。

继续探索

我们希望您喜欢构建这个 Chrome 扩展程序，也很高兴能继续开发您的 Chrome 学习之旅。我们建议您遵循以下学习路线：

  • 开发者指南中提供了数十个其他指向相关文档的链接 与创建高级附加信息相关的重要问题。
  • 扩展程序可以访问开放 Web 所没有的强大 API。 Chrome API 文档详细介绍了各个 API。