零基础 Chrome 扩展开发指南

听说Chrome插件开发的浪潮即将来袭,我得趁热给大家整理一波干货,免得跌跌撞撞。咱们一起高光时刻到来前做好准备吧!🥳

来说说方向,我有个小主意:如何提升商家处理业务的效率(比如在Amazon、Shopify、WooCommerce、速卖通等等)。

Chrome插件这块,我主要是搞一些辅助工具,比如这个:

能抓取淘宝、天猫的商家后台订单信息,然后搞出一个Excel表格。

这玩意儿功能虽然简单,但对于解决一些繁琐的重复劳动(比如财务导出订单明细,核对金额费用)还是很给力的。用起来也是相当便捷,比原本要花30分钟的活,现在点一下就搞定,效果爆棚。

要开发这个插件其实也没花太多时间,只花了2小时左右,其中有90分钟是在看文档、查资料上...

再来聊聊零基础开发:

知道很多朋友对Web开发可能是一窍不通,但要开发一个Chrome插件,还是要用到HTML、CSS和JavaScript这三样家伙。

对于零基础的朋友,学习HTML和CSS,我建议先去看看这两个教程:

HTML教程

CSS教程

HTML主要是用来展示页面,CSS是用来炫酷化页面的。不用花太多时间在这上面,简单看一下,了解一下基本概念就行。

因为插件开发用不上太多这方面的知识,我们要重点放在JavaScript上。遇到问题,百度或者问问朋友就好了。

再来学习JavaScript:

JavaScript是前端开发里面的大哥,所以针对这次的Chrome大航海,我建议大家先搞懂JS的语法。

比如:

JS的基本数据类型:字符串、数字、对象、函数、布尔值等等。

JS如何进行赋值:const a = '把这段文字赋给变量a'。

JS如何进行条件判断:if (value > 10) { do() }。

关于教程,我建议优先看官方文档,比如这个:

JavaScript语法 | 菜鸟教程

粗略看一遍,边写边查,效率会更高一些。(不推荐看视频,因为视频会把内容分得很细,而且时间花得很多,不实践很容易忘记)

当然了,严肃学习的话不是这样的,但是时间紧迫嘛,这样也没啥问题。对于插件开发来说,更需要关注的是浏览器API的使用。

学完语法后,找几个小例子试一下,理解一下内容,就可以直接投入开发了。

再说说插件开发:

学完HTML、CSS、JavaScript后,你就得了解一下插件开发相关的知识了。这方面还是建议看官方文档。

官方文档推荐看Microsoft Edge的插件开发文档,因为和Google Chrome的开发内容是一样的。不过Google的文档都是全英文的,而Edge的文档有中文版。

Microsoft Edge扩展概述

Google Chrome扩展概述

我自己是觉得看Google的文档有点头大,所以百度了些中文翻译文档,不过有些内容可能会有点过时。

如果不喜欢看文档,也可以在B站上搜相关教程,但我觉得还是先看文档更快更清楚。

最后是关于编辑器:

做开发的话,一定要有一个好的编辑器。别用Windows自带的记事本写代码啊(用编辑器的最大好处就是有代码提示,不会因为一些拼写错误搞出奇奇怪怪的bug)。

我只推荐一个编辑器:Visual Studio Code

它功能强大,定制性也很高,而且是免费的。

对于有一定基础的同学:

如果你已经从事软件开发(尤其是前端开发),我建议你学习一下React,然后使用Plasmo这个库进行插件开发。

只需执行yarn global add plasmo即可安装,然后用plasmo init命令创建项目。它使用了React和TypeScript进行开发,支持插件热更新(也就是说,更新插件后,你不需要到扩展程序面板,点击重新加载)。

这样开发起来更符合UI=f(x)的理念,也就是说,视图等于函数加输入。

以上就是大致的指南啦,主要是给零基础的同学一些建议。至于哪位老师的视频教程比较好,我自己没看过就不敢妄加评价了。

但是有一点我要说:无论学什么教程,先读一遍官方文档是最好的。因为里面包含了所有的信息。其他教程大多是在讲如何使用文档中的某些方法。

最后,学习的时候,要学自己用得上的,不要盲目追求全面。内容太多了,一下子全学完要花10天半个月,那激情估计也被磨没了,还开发个啥呢~

相关推荐
崔庆才丨静觅2 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60613 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了3 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅3 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅3 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅4 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment4 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅4 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊4 小时前
jwt介绍
前端
爱敲代码的小鱼4 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax