Skip to content

浏览器插件:从想法到发布

浏览器插件跟软件客户端很相似。客户端让操作系统更易用,插件让浏览器更好用。

本系列将从方便用户复制网页内容这一想法切入,用「最小可行知识」(MVK)实现「最小可行原型」(MVP)并逐步完善CopyQ这个插件,同时一步步深入浏览器开发。

目前章节

第一个插件:

可能会写的内容:

  • 插件的各种界面交互分析
  • 登录
  • 对接外部接口(不要将api_key之类的密钥放到插件代码中!
  • 图标(需要比AI画图标更详细)
  • 提问之前:遇到问题怎么办
  • 插件发布
  • 其他常用插件特性
    • 国际化
    • 通知
    • ……

目标读者

有一定前端基础,希望做一个浏览器插件的人,使用国内网络。

有前端基础意味着:

  • HTML(必须)。一种排版方式,至少要懂:元素、标签、属性、链接、DOM等概念。一份HTML文档是一棵“树”;
  • CSS(可选)。如果把HTML比作用默认方式堆叠的积木,那么CSS是重新堆叠积木的语言。本教程不关注界面的美观,CSS也就很次要,而且确实有的插件是不需要CSS的。但功能复杂起来后,一般都会有;
  • JavaScript(必须)。让“积木”动起来的关键。至少明白变量、函数、循环、JSON、库等概念,写出相关代码。遇到不会的点,懂得翻文档或问AI。最好懂 npm 管理。

对了,代码编辑器用自己喜欢的就好,Vscode、Zed、Sublime这些都不错。如果你实在不知道去哪下载,而你电脑又是Windows系统,可以考虑我编译的Zed,点击即可下载zip文件,解压出来exe,双击即可运行。

国内网络意味着:

  • 项目相关代码托管到gitee
  • 推荐阅读文档要考虑到国内可访问性;
  • 发布渠道相关文章选择Edge为示例、而不是Chrome。

常见问答

为什么要写这个系列

  • 试试纯国内网络环境下,能不能完成浏览器插件的开发
  • 整理自己所学的同时,也促进个人学习。比如,我发现以前很多文档没看过,发现Chrome跟Edge都提供了文字转语音(tts)的接口……

多久更新一篇?

已知:2024年5月12日确定要写,5月23日写完(复制攻防战第一轮),5月27日完成(复制攻防战第二轮

正经回答是,看我业余时间与大伙反馈。

有学习交流群吗?会开课吗?

微信不太适合交流代码,有问题在gitee上问吧。暂无开课打算。