开启 Chrome 扩展程序开发之旅的新方式

艾米·斯奇特
Amy Steam

在这篇博文中,我们很高兴与您分享 Chrome 扩展程序入门体验的一些重大改进,以及一些助您实现这一梦想的方法。

旧版指南

以前,Chrome 扩展程序入门教程是一个基本的扩展程序示例,该示例会在用户点击扩展程序弹出式窗口中的按钮时更改当前网页的背景颜色。它还包含一个选项页面,您可以从中挑选四种颜色。

此基本示例并未演示如何添加实际扩展程序中提供的热门功能。是时候改造了。

全新方法

我们知道,开发者是依靠我们的文档来开启 Chrome 扩展程序学习之旅的,因此,我们的目标是提供易于使用、适合初学者且贴合用户需求的学习路线。我们决定从头开始,而不是尝试改进现有的教程示例。

推出经过改进的全新“使用入门”集合:

扩展程序基础知识
该课程简要介绍了 Chrome 扩展程序开发的一些基本概念,例如网络技术和常用的扩展程序组件。此外,本文还介绍了在 Chrome 应用商店中设计和分发扩展程序时需要注意的事项。
开发基础知识
通过创建一个 Hello, Extensions 示例引入了扩展程序开发工作流。并逐步介绍了如何在开发过程中加载扩展程序、查找日志和错误、选择项目结构,以及使用 Typescript。
阅读时间教程
了解我们需要花多长时间读完一篇文章真是太好了。“阅读时间”功能会教您如何在每个扩展程序文档页面上插入包含预计阅读时间的元素。
专注模式教程
去除网页中杂乱无章的内容,可以让我们的大脑专注于最相关的信息。专注模式演示了如何更改页面样式并隐藏一些会分散注意力的元素。
标签页管理器教程
在研究扩展程序开发工作时,您最终可能会在多个窗口中看到许多文档标签页。标签页管理器:用于整理 Chrome 扩展程序和 Chrome 应用商店文档标签页。

这些教程不仅会教您如何构建实际的扩展程序,还会分享开发技巧和最佳做法。此外,使用这些扩展程序还能改善您在阅读扩展程序文档时的体验。

要执行的操作

每个教程都包含以下部分:

  • 扩展程序将执行的任务。
  • 我们将涵盖的课程。
  • 开始之前需要了解的事项。
  • 构建扩展程序的分步说明。
  • 如何加载和测试扩展程序。

如果您准备迎接挑战,我们提供了一个版块,其中提供了一些有关如何自定义扩展程序或添加其他功能的提示。

我们需要您的帮助

我们很期待收到您的回复!如果您发现这些指南有误或不清楚,请在我们的 GitHub 代码库中报告 bug。

我们认为,新版入门指南比旧版指南有了很大的改进,但我们不会就此止步;我们将继续努力改进和扩充我们的文档,以便为所有扩展程序开发者提供更好的服务。


照片由 Vardan Papikyan 拍摄,选自 Unsplash 网站