零基础 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天半个月,那激情估计也被磨没了,还开发个啥呢~

相关推荐
超浪的晨3 分钟前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
CCF_NOI.2 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck5 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9496 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_6 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路8 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔9 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang9 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔9 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js