title: 零基础 Chrome 扩展开发指南
date: 2024-12-05 06:36:12
categories: 生财有术
urlname: 679
tags:
零基础Chrome扩展开发指南
2022年06月15日17:25
大家好哇，我是阿帆。目前在职前端、小程序开发，生财小透明一枚。马上Chrome插件开发的大航海就要来了，给大家整理一些相关的知识，少走点弯路。让自己发光发热一下～
关于方向，这里提个小点子：提高商家处理的事务的效率（Amazon、Shopify、WooCommer、速卖通等）对于Chrome扩展，我主要是用来编写一些辅助用的小工具，例如下面这个：抓取淘宝、天猫的商家后台的订单信息，生成一份excel表格导出。
功能很简单，开发这个插件，也主要是用来减轻对象工作上一些简单但是繁琐的重复复制粘贴（财务导出订单明细，核对金额费用）。
使用上这个插件，原本需要30分钟处理的内容，只需要点击一下，就可以处理完成，效果非常好。开发这个插件，只花了2小时左右的时间，其中大约90分钟花在阅读文档，查阅如何开发插件。。。
关于零基础开发：
相信报名的圈友，并不全对Web开发有了解。开发一个Chrome插件，主要使用到的还是html、css和javascript这三门技术。
零基础的圈友，学习开发html、css推荐先阅读一遍：HTML教程(w3school.com.cn)CSS教程(w3school.com.cn)
HTML主要用于展示，CSS主要用于美化。不需要花时间太多时间在这上面，粗略看一遍，了解大致有哪些内容即可。
插件开发用不上太多这两项（HTML、CSS）的内容，主要精力应该放在JavaScript上。开发途中遇到相关不会的，直接通过搜索引擎解决，或者找圈友船员咨询一下。
关于学习JavaScript
JavaScript是前端开发里面最重要的内容，至于这次的Chrome大航海，由于时间比较紧，建议大家先学会JS的语法。
例如：
- JS的基本类型：字符串、数字、对象、函数、布尔值等2.JS如何做赋值：constmathtta='赋值这段文字给变量a'3.JS如何做判断：if(value>10)do()
关于教程，优先建议大家看一遍文档，例如：JavaScript语法|菜鸟教程(runoob.com)。大致看一遍，找个例子实操，一边写一边查，这样会快一点，就是基础会不够扎实。（不太建议看视频，视频会把内容掰碎来讲，花费的时间很多，不实操很容易忘记）
正经学习，不建议上面这样，但是赶时间嘛，没问题的。开发插件，更需要注重去学的是浏览器API的使用。学完语法后，找几个小例子尝试一下跟着写一下，理解一下内容，就可以直接投入开发了。
关于插件开发：
学习完HTML、CSS、JavaScript之后，你就需要去了解插件开发相关的知识了。这一块还是建议看官方文档。官方文档建议看MicrosoftEdge的插件开发文档，和GoogleChrome插件开发的内容是一样的。但是Google的文档是全英文，Edge的开发文档是有中文的。
MicrosoftEdge扩展概述
GoogleChrome扩展概述
看Google的文档……英文不好我表示看的头大，百度找的中文翻译文档很多内容都有点过时。
不想看文档，直接B站搜相关教程也可以，不过我个人认为通过阅读文档，上手会比较快，也更清楚的了解到都能实现哪些功能。
关于编辑器：
做开发，编辑器是一定要有一个的。不要使用Windows自带的记事本写代码（使用编辑器，最明显的一个好处就是，有代码提示，不会因为一些拼写错误带来一些奇奇怪怪的Bug）
编辑器只推荐使用：VisualStudioCode下载编辑器（功能强大，定制性强，免费）
如果是有基础的同学：
如果你已经在从事软件开发（前端开发），建议学习一下React，然后使用Plasmo这个库进行插件开发。通过yarnglobaladdplasmo即可安装，plasmoinit即可创建项目。它使用了React+TypeScript进行开发，支持插件热更新（也就是说，更新插件以后，你不需要再到扩展程序面板，点击重新加载）开发上也更契合sfUI=sff(sfx)的理念，即：视图=函数+输入。
具体指南大概就是这些，主要是一些对于零基础学习的建议，具体关于哪位老师的视频教程比较好，自己没去看过就不做推荐了。
只是有一点：不管看什么教程，先读一遍开发文档是最好的。里面有全的信息。各种教程大多都是如何使用文档中的某些方法。
然后就是：学自己用的上的，不要盲目的全学，内容太多了，全学一遍10天半个月就过去了，激情全磨没了，还谈什么开发呢～