2024 浏览器插件开发学习资料

💯 前面发了关于 浏览器插件开发脚手架合集，有人私信说有没有教程推荐，我这两天搜集整理了一些资源，分享给大家看看，每个资源都有具体的来源和作者标明

以下是一些我推荐的浏览器插件开发学习资料：

一、在线教程

1.1、Chrome 官方插件开发文档

教程点评：Chrome 扩展程序网站是一个为开发者提供资源的平台，旨在帮助他们通过定制浏览器来增强 Chrome 的功能。网站提供了从入门到高级开发的全面教程，包括如何构建第一个扩展程序、如何使用不同的 API 来定制用户界面、监控和修改浏览器行为，以及如何改变和观察网页内容。

网站特别强调了迁移到 Manifest V3 的重要性，提供了关于 Manifest V3 的详细信息，包括它的定义、迁移时间表和已知的迁移问题。同时，网站还展示了一系列的示例代码，演示了如何使用 Action API、UserScript API、Scripting API 和 SidePanel API 等技术。

教程完结：✅

亮点：官方、权威

教程时间：2024年

教程作者：@ChromiumDev

1.2、浏览器插件教程

教程点评：

网页收录了一系列关于浏览器扩展程序开发的文章，从基础知识如扩展程序的类型、创建第一个扩展程序、使用 DevTools 进行扩展开发，到更高级的功能实现，如自定义选项页面、使用存储、实现通知、图片修改等。此外，文章还涉及了使用现代前端技术栈如 React、Tailwind CSS 和 Vite 来提升扩展程序开发的效率和质量。还有一些具体的扩展程序案例，如天气扩展、新标签页扩展等，以及如何发布 Chrome 浏览器扩展程序的步骤。网页还展示了社交媒体上开发者对 Daily Dev Tips 博客内容的积极反馈，表明该博客在开发者社区中的影响力。

教程完结：✅

亮点：新手友好

教程时间：2022年

教程作者：@DailyDevTips1

1.3、浏览器插件实战

教程点评：

文章系列从一个简单的想法出发，即如何方便用户复制网页内容，逐步实现一个浏览器插件的开发过程。作者采用 “最小可行知识”（MVK）的方法，通过实现 “最小可行原型”（MVP），详细介绍了 CopyQ 插件的开发流程，包括课前准备、模板代码解释、复制功能的实现等。目前已发布的章节包括第一轮到第三轮的内容，第四轮将涉及对接 OCR 接口或大模型。未来可能会涉及的内容包括插件的界面交互分析、登录功能、外部接口对接、图标设计、问题解决策略、插件发布流程以及其他常用插件特性如国际化和通知等。作者还强调了目标读者应具备的前端基础知识，包括 HTML、CSS（可选）和 JavaScript。

教程完结：❎

教程时间：2024年

亮点：Step by Step

教程作者：@Gantrol

二、开源案例

2.1、ai-summarizer

案例点评：

该浏览器插件旨在辅助教学，通过集成先进的 AI 大模型，能够自动提取和总结网页上的关键信息。用户可以通过安装这一插件，快速获取到当前网页的精华内容，从而提高学习和研究的效率。插件的设计考虑到了用户的便捷性，使得教育工作者和学生都能够更加轻松地获取和理解网页内容。

教程完结：✅

案例时间：2024年3月

亮点：紧跟AI步伐

作者：@LinkLin1987

2.2、Bookmark-HTMLizer

案例点评：

Bookmark HTMLizer 项目旨在通过将用户的浏览器书签转换为 HTML 网页，提供一种更加高效和易于浏览的方式来管理和访问书签。这个工具支持将书签分类，生成一个有组织的网页，用户可以通过这个网页快速查找和访问他们收藏的网站。这样做不仅提高了用户对书签的可用性，还使得分享和备份书签变得更加简单。

案例时间：2023年3月

亮点：收藏夹管理和书签管理最近被广泛讨论，或许从这个项目里你能获得一些灵感

作者：@tiing

2.3、dev-go

案例点评：

fedtop/dev-go 是一个开源的浏览器扩展插件，专为开发者量身打造，集成了多项功能，如翻译、优化浏览器翻译页面、在 GitHub 中添加在线编辑按钮、去除外链跳转提示、清除用户事件限制等，以提升开发者在浏览器中的工作效率。

案例时间：2023年8月

亮点：专为开发者打造

作者：@wangrongding

三、视频教程

3.1、Make a Custom Browser Extension in 3 minutes (2022)

视频点评：

视频教程详细介绍了创建自定义浏览器扩展程序的流程。首先，为了简化扩展开发过程，作者提供了一个 GitHub 上的样板模板，开发者可以通过下载或克隆该模板来避免从头开始编写如 manifest 等文件。接下来，开发者需要在代码编辑器中打开模板文件，并在 manifest 文件中更改扩展名称和添加描述信息。然后，在浏览器中管理扩展，开启开发者模式，选择 “加载已解压的扩展程序” 并选择包含模板文件的文件夹，即可在扩展管理器中看到新创建的扩展程序。

视频时间：2022

亮点：简单易懂

作者：@Virej

四、优秀项目推荐

4.1、elmo.chat

项目点评：

Elmo 是由 Lepton AI 开发的一个 AI 伴侣，它能够跨多种格式如 HTML、YouTube、PDF 和 Google Docs 提供内容摘要和洞察。用户可以通过 Elmo 直接与 YouTube 视频互动，提问并获得深入见解，就像与视频本身对话一样。Elmo 的 PDF 对话功能使用户能够以对话形式更快地消化大型文档，提高生产力和理解力。用户还可以针对特定内容提问，并直接从页面获取答案，节省寻找信息的时间。此外，Elmo 能够深入关键词，从网络中检索相关信息，为研究和学习提供便利。Elmo 由 Lepton AI 的快速大型语言模型（LLM）API 支持，用户无需注册即可免费使用。

项目时间：2024

亮点：无需注册免费使用、闪电一样的速度

作者：@yadong_xie

希望这些资料能够对你有所帮助，让你的插件开发之旅更加顺利。