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

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

旧版指南

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

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

新方法

我们知道,开发者在开启 Chrome 扩展程序学习之旅时需要参考我们的文档,因此我们的目标是提供一条通俗易懂、适合初学者的学习路线。我们并没有尝试改进现有的教程示例,而是决定从头开始。

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

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

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

后续流程

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

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

如果您愿意接受挑战,我们提供了一个部分,其中提供了一些有关如何自定义扩展程序或向其添加其他功能的建议。

我们希望您的帮助

非常期待收到您的来信!如果您发现这些指南中存在错误或不清楚的地方,请在我们的 GitHub 代码库中报告错误。

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


拍摄者:Vardan Papikyan,拍摄者:Unshot