现代浏览器插件开发指南
最近又写了一本小书。
这本小书定价 29 元,你可以在 这里 购买 PDF 版本。如果你有特殊需求,也可以购买 Markdown + PDF 版本,价格是 49 元(为了增加盗版成本)。
之所以想写这本书,是因为我在过去一两年开发过不少浏览器插件(如微信读书笔记同步助手 Notepal, 浏览器 AI 助手 SumBuddy, 专注插件 等等标签 等等),积累了不少经验。这几年越来越多人开始做浏览器插件,尤其是在 AI 时代,浏览器插件作为重要的输入入口,能做的事情越来越多。我想可以把这些经验分享出来,让更多人可以开发满足自己需求的插件。
插件开发其实不是一件很难的事,特别是现在出现了一些成熟的框架,比如 Plasmo, WXT, CRXJS 等。这些插件把代码构建、打包过程都封装得很好,开发者只需要关心插件的逻辑即可。
我自己用过 Plasmo 和 WXT, 这本书我会使用 WXT 进行教学。因为经过自己的长期实践,我认为 WXT 比 Plasmo 的设计更加合理,配套的工具更好用。当然每个框架有每个框架的利弊,即使你想使用其它框架,你还是能从这本书收获很多框架以外的知识,因为框架只是辅助。
另外,本书以 Manifest V3 为背景编写,不会讨论 Manifest V2 的内容。如果你不知道两者具体的区别,你也不需要知道(因为我也不知道)。简单来说 V3 比 V2 在安全性上做了更严格的控制,这一点虽然备受争议,但对于大部分的情况不会有太大的影响。
本书在涉及 UI 开发的部分我会使用 React, 这是我自己日常使用的库,对于使用 Vue, Svelte 等其它库的读者,也不需要担心,用什么框架并不是那么重要。并且 WXT 也支持不同的 UI 库。如果你想用其它库,翻看 WXT 的文档即可。
本书的实战中,我不引入任何样式库,因为会增加额外的和插件开发无关的复杂度。请读者不要计较实例的美观性。
读这本书前,我默认读者了解以下技术:
● 了解 JSON 这种数据结构
● 了解基本的 JavaScript/TypeScript, HTML, CSS 知识
● 有能力搭建 Node.js 开发环境
读完这本书后,读者能学习到开发一个浏览器最重要的几个知识点:
● 数据存储
● content script UI 的构建
● 消息传递
这几个知识点贯穿了所有实际场景必需的元素,我在开发自己的插件时,基本是围绕这三个基本的功能展开。至于其它更多的插件 API, 读者应该自己按照需求查看文档使用。
在讲解消息传递的实例中,我用 AI 消息流作为例子讲解,对于需要开发 AI 相关的浏览器插件的读者应该很有启发。
目录
● 概述
● 插件的基本结构 ● manifest ● popup ● content script ● options ● background script
● 插件 API
● 创建插件开发项目
● 基本数据存储:Todo List 实战
● 进阶数据存储 ● 监听数据变动 ● 数据迁移 (Migration)
● Content Script 基本知识 ● 动态注入 content script ● 在 content script 中渲染 UI ● 真实环境中的一些经验
● 消息传递 ● 单次传递 ● 长连接传递 ● 实战: 渲染 AI 消息流
● 多语言支持 ● 插件原生多语言机制 ● 使用 i18next
● 附录 ● 最小权限原则 ● 处理用户登录 ● host permissions ● 定时任务 ● 自动生成不同尺寸的 icon
一些预览
via Randy's Blog
Invalid media:
image
image
image
最近又写了一本小书。
这本小书定价 29 元,你可以在 这里 购买 PDF 版本。如果你有特殊需求,也可以购买 Markdown + PDF 版本,价格是 49 元(为了增加盗版成本)。
这本书篇幅不长,但因为比较小众,所以定价稍高,请读者自行斟酌购买。这是一本关于浏览器插件开发的书。这本书面向的是那些希望开发自己的浏览器插件满足自己需求的,也许你是专业的前端程序员,或是略懂前端代码的后端人员,在 AI 的加持下,大概都能从中受益。
之所以想写这本书,是因为我在过去一两年开发过不少浏览器插件(如微信读书笔记同步助手 Notepal, 浏览器 AI 助手 SumBuddy, 专注插件 等等标签 等等),积累了不少经验。这几年越来越多人开始做浏览器插件,尤其是在 AI 时代,浏览器插件作为重要的输入入口,能做的事情越来越多。我想可以把这些经验分享出来,让更多人可以开发满足自己需求的插件。
插件开发其实不是一件很难的事,特别是现在出现了一些成熟的框架,比如 Plasmo, WXT, CRXJS 等。这些插件把代码构建、打包过程都封装得很好,开发者只需要关心插件的逻辑即可。
我自己用过 Plasmo 和 WXT, 这本书我会使用 WXT 进行教学。因为经过自己的长期实践,我认为 WXT 比 Plasmo 的设计更加合理,配套的工具更好用。当然每个框架有每个框架的利弊,即使你想使用其它框架,你还是能从这本书收获很多框架以外的知识,因为框架只是辅助。
另外,本书以 Manifest V3 为背景编写,不会讨论 Manifest V2 的内容。如果你不知道两者具体的区别,你也不需要知道(因为我也不知道)。简单来说 V3 比 V2 在安全性上做了更严格的控制,这一点虽然备受争议,但对于大部分的情况不会有太大的影响。
本书在涉及 UI 开发的部分我会使用 React, 这是我自己日常使用的库,对于使用 Vue, Svelte 等其它库的读者,也不需要担心,用什么框架并不是那么重要。并且 WXT 也支持不同的 UI 库。如果你想用其它库,翻看 WXT 的文档即可。
本书的实战中,我不引入任何样式库,因为会增加额外的和插件开发无关的复杂度。请读者不要计较实例的美观性。
读这本书前,我默认读者了解以下技术:
● 了解 JSON 这种数据结构
● 了解基本的 JavaScript/TypeScript, HTML, CSS 知识
● 有能力搭建 Node.js 开发环境
读完这本书后,读者能学习到开发一个浏览器最重要的几个知识点:
● 数据存储
● content script UI 的构建
● 消息传递
这几个知识点贯穿了所有实际场景必需的元素,我在开发自己的插件时,基本是围绕这三个基本的功能展开。至于其它更多的插件 API, 读者应该自己按照需求查看文档使用。
在讲解消息传递的实例中,我用 AI 消息流作为例子讲解,对于需要开发 AI 相关的浏览器插件的读者应该很有启发。
目录
● 概述
● 插件的基本结构 ● manifest ● popup ● content script ● options ● background script
● 插件 API
● 创建插件开发项目
● 基本数据存储:Todo List 实战
● 进阶数据存储 ● 监听数据变动 ● 数据迁移 (Migration)
● Content Script 基本知识 ● 动态注入 content script ● 在 content script 中渲染 UI ● 真实环境中的一些经验
● 消息传递 ● 单次传递 ● 长连接传递 ● 实战: 渲染 AI 消息流
● 多语言支持 ● 插件原生多语言机制 ● 使用 i18next
● 附录 ● 最小权限原则 ● 处理用户登录 ● host permissions ● 定时任务 ● 自动生成不同尺寸的 icon
一些预览
via Randy's Blog
Invalid media:
image
image
image
棱镜通讯 No.113 亚伦·斯沃兹(Aaron Swartz)
本文出自博主的 Newsletter《棱镜通讯》,每期一个话题,🐣 关注记录、挖掘科学创造、社会思想和个体生活。 我相信每一个人物、思想、事物的背后都有一段精彩的故事,启发当下,看向未来。目前《棱镜通讯》已更新39 期,往期内容请访问太隐网站:https://www.wangyurui.com/tags/Newsletter/ 在纪录片《互联网之子》的开头,导演用梭罗的名言抛出问题: 世有不公之法, 我们是安于循守, 还是且改且守、待其功成? 或是即刻起而破之? 很显然,亚伦......
READ MORE
via 太隐 (author: Ludwig Wang)
本文出自博主的 Newsletter《棱镜通讯》,每期一个话题,🐣 关注记录、挖掘科学创造、社会思想和个体生活。 我相信每一个人物、思想、事物的背后都有一段精彩的故事,启发当下,看向未来。目前《棱镜通讯》已更新39 期,往期内容请访问太隐网站:https://www.wangyurui.com/tags/Newsletter/ 在纪录片《互联网之子》的开头,导演用梭罗的名言抛出问题: 世有不公之法, 我们是安于循守, 还是且改且守、待其功成? 或是即刻起而破之? 很显然,亚伦......
READ MORE
via 太隐 (author: Ludwig Wang)
我的普鲁斯特问卷回答 - 《请回答普鲁斯特》播客访谈文字稿
via Owen的博客 (author: Owen Young)
本文是我在李马克主持的《请回答普鲁斯特》播客节目中的访谈记录整理。感谢马克的邀请,让我能在这个时期剖析我自己的偏好和性格,再过几年准备再回看下看看哪里会有变化。
什么是普鲁斯特问卷?
普鲁斯特问卷(The Proust Questionnaire)源于19世纪的法国,因著名作家马塞尔·普鲁斯特(Marcel Proust)在回答这套问题时的独特答案而闻名。这套问卷旨在通过一系列问题揭示回答者的性格、价值观和人生态度。
我推荐你也尝试回答这些问题——无需公开,可以私下记录,这样可能会让你更加了解自己。
我录完之后推荐了毛利小张, 这是她的回答,推荐给你听。
via Owen的博客 (author: Owen Young)
#TODO
(多么宏大的计划啊ww)
高考完:
1. 学电吉他
2. 去上海看一场邦live
3. 学做一把吉他 tele 3D打印琴体
4. 开学了大概会精进kotlin和日语
5. 做一把电木两用的酸欠黄色吉他
https://www.thingiverse.com/thing:6694462
(多么宏大的计划啊ww)
高考完:
1. 学电吉他
2. 去上海看一场邦live
3. 学做一把吉他 tele 3D打印琴体
4. 开学了大概会精进kotlin和日语
5. 做一把电木两用的酸欠黄色吉他
https://www.thingiverse.com/thing:6694462
我们高估了智力的重要性
在 AI 越来越强大的这段时间里,我思考得比较多的一个问题是,我们是否高估了智力的重要性。
引起这个思考的原因有很多,一是大语言模型的进化程度让我感受到,语言模型在智能(推理、学习速度、知识广度等)方面已经远远超越人类,而这样的智能是每个人都能运用的。也就是说,人类完全可以把需要智能的行动交给 AI 处理,人类更多地是负责决策层面的工作。
二是因为我自己就是一个智力平平的人,小学当我学到除法的时候,我花了很长时间才理解除法是什么。我在开始学 JavaScript 的时候,也花了很长时间理解什么是 callback, 为什么函数能作为参数被传递和调用。
但我这个智力平平的人还是得到了算是不错的成果。我总是对别人说,我不是一个很聪明的人,我只是 13 岁就开始学编程,笨鸟先飞罢了,很多人大学学一年就能超过我的水平。所以我才更深刻地体会到,正常水平的技术,往往通过时间可以弥补,在这条水平线,不需要很高的智力。
不过,即使通过时间可以弥补智力的不足,但不是很多人能在这段时间里坚持下去。这也引出了我认为智力被高估的同时显现出来了另一个问题 —— 自我效能 (self-efficacy) 的重要性被远远低估了。
所谓的自我效能,是指相信自己有能力成功完成特定任务或应对特定情况的信心。很多复杂的因素决定了一个人自我效能的高低,这并非天生的。成长过程中长辈的态度、通过对他人的观察、个体与环境互动等等都影响一个人的自我效能水平。
在同样面对一个问题,自我效能低的人,看到的往往全是问题,最终放弃。而自我效能高的人,有强大的信念认为可以解决问题。前者也许在智力上比后者更高,但后者可以通过这种信念一直前进,超越前者。
尤其是在 AI 时代,智力变成了一种更容易弥补的差距。我认为智力是边际效益递减的,除非超过了某个阈值。但这永远是很小一部分的人。像我这样智力平平的人是多数,我们只是站在了巨人的肩膀上。就像 Dijkstra 只有一个,这个世界也需要他这样的天才,但我们还是可以享受他给我们带来的成果。
这不是反智,而是我认为,智力水平有一个临界点,对于临界点以下的人,智力的重要性被高估了,因为智能越来越不稀缺,稀缺的是自我效能,是主动利用智能的人。
自我效能是完全可以通过后天训练的。自我效能是心理学家 Albert Bandura 提出的概念。他总结了影响自我效能的四种因素:
掌控经验 (Mastery Experiences)
个体通过亲身成功完成任务的经验来建立自信。反复的成功会增强自我效能,而失败(尤其是早期或没有应对策略时的失败)则会削弱它。
我觉得这里指的「成功」并非大成功,而是细微的成功。例如在我学习编程的早期,我通过写出各种各样的小程序获得这种成功感,对我建立技术自信有很大的帮助。
替代经验 (Vicarious Experiences / Modeling)
观察与自己相似的人成功完成任务,会提升观察者对自己也能做到的信念。看到别人能行,会觉得“我也许也可以”。
对我来说,小时候读的名人(科技精英)传记就是一种 Modeling, 尤其是李开复的《世界因你不同》,这些「洗脑」式的输入,会让我越来越希望自己能成为这样的人。
乔布斯有一句广为流传的话,他说
社会说服 (Social Persuasion):
受到他人的鼓励和积极评价可以增强自我效能感。而负面评价则会削弱它。
这个条件比较被动,这里不谈。
生理与情绪状态 (Physiological and Emotional States)
个体在面对任务时的生理反应和情绪状态会被解读为自身能力的信号。如果将紧张解读为“我不行”的证据,自我效能会降低;如果解读为“兴奋”或“迎接挑战”,则可能不会降低甚至会提升。
在这个方面,我面对舞台的经验可以充分论证。记得第一次面对众人做技术分享和第一次上台唱歌,我紧张得不行,表现都很糟糕。随着不断地强迫自己上台,我发现自信完全取决于自己的念头,我学会在上台前欺骗自己是一个有很多粉丝的人,台下的人对我非常崇拜,或很喜欢听我唱歌,这样的念头让我在台上的表现有很大很大的改进。
人是事件的反应器,通过刻意训练,是可以掌控自己的反应的。
以上是我对 AI 时代的到来的其中一点思考,希望能鼓励到和我一样智力平平的人。
via Randy's Blog
Invalid media: image
在 AI 越来越强大的这段时间里,我思考得比较多的一个问题是,我们是否高估了智力的重要性。
引起这个思考的原因有很多,一是大语言模型的进化程度让我感受到,语言模型在智能(推理、学习速度、知识广度等)方面已经远远超越人类,而这样的智能是每个人都能运用的。也就是说,人类完全可以把需要智能的行动交给 AI 处理,人类更多地是负责决策层面的工作。
二是因为我自己就是一个智力平平的人,小学当我学到除法的时候,我花了很长时间才理解除法是什么。我在开始学 JavaScript 的时候,也花了很长时间理解什么是 callback, 为什么函数能作为参数被传递和调用。
但我这个智力平平的人还是得到了算是不错的成果。我总是对别人说,我不是一个很聪明的人,我只是 13 岁就开始学编程,笨鸟先飞罢了,很多人大学学一年就能超过我的水平。所以我才更深刻地体会到,正常水平的技术,往往通过时间可以弥补,在这条水平线,不需要很高的智力。
不过,即使通过时间可以弥补智力的不足,但不是很多人能在这段时间里坚持下去。这也引出了我认为智力被高估的同时显现出来了另一个问题 —— 自我效能 (self-efficacy) 的重要性被远远低估了。
所谓的自我效能,是指相信自己有能力成功完成特定任务或应对特定情况的信心。很多复杂的因素决定了一个人自我效能的高低,这并非天生的。成长过程中长辈的态度、通过对他人的观察、个体与环境互动等等都影响一个人的自我效能水平。
在同样面对一个问题,自我效能低的人,看到的往往全是问题,最终放弃。而自我效能高的人,有强大的信念认为可以解决问题。前者也许在智力上比后者更高,但后者可以通过这种信念一直前进,超越前者。
尤其是在 AI 时代,智力变成了一种更容易弥补的差距。我认为智力是边际效益递减的,除非超过了某个阈值。但这永远是很小一部分的人。像我这样智力平平的人是多数,我们只是站在了巨人的肩膀上。就像 Dijkstra 只有一个,这个世界也需要他这样的天才,但我们还是可以享受他给我们带来的成果。
这不是反智,而是我认为,智力水平有一个临界点,对于临界点以下的人,智力的重要性被高估了,因为智能越来越不稀缺,稀缺的是自我效能,是主动利用智能的人。
自我效能是完全可以通过后天训练的。自我效能是心理学家 Albert Bandura 提出的概念。他总结了影响自我效能的四种因素:
掌控经验 (Mastery Experiences)
个体通过亲身成功完成任务的经验来建立自信。反复的成功会增强自我效能,而失败(尤其是早期或没有应对策略时的失败)则会削弱它。
我觉得这里指的「成功」并非大成功,而是细微的成功。例如在我学习编程的早期,我通过写出各种各样的小程序获得这种成功感,对我建立技术自信有很大的帮助。
替代经验 (Vicarious Experiences / Modeling)
观察与自己相似的人成功完成任务,会提升观察者对自己也能做到的信念。看到别人能行,会觉得“我也许也可以”。
对我来说,小时候读的名人(科技精英)传记就是一种 Modeling, 尤其是李开复的《世界因你不同》,这些「洗脑」式的输入,会让我越来越希望自己能成为这样的人。
乔布斯有一句广为流传的话,他说
乔布斯从更极端的思路获得高度的自我效能感 —— 通过对比别人不行,觉得自己可以。
Life can be much broader once you discover one simple fact: Everything around you that you call life was made up by people that were no smarter than you.
一旦你认识到一个简单的事实——你周围那些你称之为“生活”的东西,都是由并不比你聪明的人创造出来的——你的人生就会变得更为广阔。
社会说服 (Social Persuasion):
受到他人的鼓励和积极评价可以增强自我效能感。而负面评价则会削弱它。
这个条件比较被动,这里不谈。
生理与情绪状态 (Physiological and Emotional States)
个体在面对任务时的生理反应和情绪状态会被解读为自身能力的信号。如果将紧张解读为“我不行”的证据,自我效能会降低;如果解读为“兴奋”或“迎接挑战”,则可能不会降低甚至会提升。
在这个方面,我面对舞台的经验可以充分论证。记得第一次面对众人做技术分享和第一次上台唱歌,我紧张得不行,表现都很糟糕。随着不断地强迫自己上台,我发现自信完全取决于自己的念头,我学会在上台前欺骗自己是一个有很多粉丝的人,台下的人对我非常崇拜,或很喜欢听我唱歌,这样的念头让我在台上的表现有很大很大的改进。
人是事件的反应器,通过刻意训练,是可以掌控自己的反应的。
以上是我对 AI 时代的到来的其中一点思考,希望能鼓励到和我一样智力平平的人。
via Randy's Blog
Invalid media: image