Chrome扩展开发基础教程（附HelloWorld）
1 概述
Chrome扩展开发的基础教程，代码基于原生JS+H5，教程内容基于谷歌扩展开发官方文档。
2 环境
Chrome 88.0.4324.96Chromium 87.0.4280.141Brave 1.19.84FireFox 85.0WebStorm 2020.3.2Manifest V3
3 开发环境准备
开发扩展建议使用WebStorm，推荐WebStorm的原因是能够补全，在设置中的Libraries中可以下载chrome的库，这样就能够补全了：
另一个建议使用的是VSCode，但是笔者目前没有找到让VSCode补全的方式，希望知道的可以在评论指出补充一下。
当然其实扩展开发并没有规定使用哪一个IDE，常用的Web开发IDE比如HBuilder也是可以的，看个人喜好了。
4 创建manifest.json
首先创建一个空白文件夹：
mkdir FirstExtension
cd FirstExtension
接着创建一个叫manifest.json的文件，直接在WebStorm中创建即可，文件内容如下：
{
"name": "First Extension",
"description": "This is my first extension",
"version": "1.0",
"manifest_version": 3
}
打开浏览器进入管理扩展程序，并开启开发者模式，选择Load unpacked，打开刚才创建的FirstExtension文件夹：
这样就可以看到扩展了。
事实上最简单的扩展只需要一个manifest.json，来描述扩展最基本的一些属性以及行为，因此这样就算完成HelloWorld了。
5 添加弹出界面
现在扩展什么界面也没有，现在可以尝试着给扩展添加一个点击就弹出的界面，首先修改manifest.json，添加action：
{
"name": "First Extension",
"description": "This is my first extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
}
}
在与manifest.json同级目录下创建popup.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
这样点击扩展就会弹出对应文字了：
6 添加图标
在manifest.json中添加icons字段：
{
"name": "First Extension",
"description": "This is my first extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
},
"icons": {
"16": "icons/16.png",
"32": "icons/32.png",
"48": "icons/48.png",
"128": "icons/128.png"
}
}
图标文件可以从文末的源码处获取，重新加载后就可以看到扩展的图标改变了。
图标一共有四个，16*16是扩展页面中显示的图标：
而32*32是可选的，为了防止从48*48的大小中缩小造成失真，48*48是在扩展管理页面中显示的，例如：
而128*128是Chrome Web Store中显示的。
7 发布
最后一步是发布，扩展有两种安装方式，一种是通过本地安装，一种是通过Chrome Web Store安装，使用后一种方式的话，需要注册成为Chrome网上应用开发者：
这里为了方便就本地打包发布了，在插件管理页面选择Pack extension：
选择包含了manifest.json的文件夹，在这里就是刚才创建的FirstExtension：
点击打包后，会出现两个文件：
一个是crx，就是扩展的打包文件，一个是pem，创建新版本的扩展时需要使用。
浏览器中拖拽crx文件就可以安装了，一般来说Chrome/Chromium/Brave因为基于相同内核应该都不会出现问题，至于FireFox，可以参考一下文末的附录。
8 源码
9 附录：FireFox
FireFox目前最新版本（85.0）的扩展目前不支持Manifest V3，因此如果需要开发FireFox扩展，需要使用Manifest V2版本，也就是：
"manifest_version": 2
当然还有一些字段上的区别，具体可以参考这里的文档。
另外笔者测试了一下FireFox安装这个Demo扩展好像不能直接拖拽crx文件，需要打开一个叫about:debugging的链接，在设置中选择Load Temporary Add-on:
选择manifest.json文件即可安装。
Chrome扩展开发基础教程（附HelloWorld）的更多相关文章
- PostgreSQL 扩展开发基础教程
搭建基础结构 安装扩展 sudo apt-get install postgresql-contribcreatedb stupsql stucreate extension pg_buffercac ...
- Chrome扩展开发（Gmail附件管理助手）系列之〇——概述
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- Chrome扩展开发之一——Chrome扩展的文件结构
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- Chrome扩展开发之四——核心功能的实现思路
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- AndoridSQLite数据库开发基础教程（5）
AndoridSQLite数据库开发基础教程(5) 创建SQLite数据库 使用SQLiteManager创建数据库的操作步骤如下: (1)双击SQLiteManager工具,弹出SQliteMana ...
- 【转发】NPAPI学习(Firefox和Chrome扩展开发 )
NPAPI学习(Firefox和Chrome扩展开发 ) 2011-11-08 14:41:02 by [6yang], 1172 visits, 收藏 | 返回 Firefox和Chrome扩展开发 ...
- Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
- RPG游戏开发基础教程
RPG游戏开发基础教程 第一步 下载RPG Maker 开发工具包 1.RPG Maker 是什么? RPG Maker 是由Enterbrain公司推出的RPG制作工具. 中文译名为RPG制作大师. ...
随机推荐
- 数据库范式（1NF/2NF/3NF）
本文转载自数据库范式(1NF/2NF/3NF) 概述 范式:英文名称是 Normal Form,它是英国人 E.F.Codd(关系数据库的老祖宗)在上个世纪70年代提出关系数据库模型后总结出来的,范式 ...
- [Python学习笔记]正则表达式总结
常用缩写字符及其含义表格查询 缩写字符分类 含义 \d 0-9的任意数字 \D 除0-9的数字以外的任何字符 \w 任何字母.数字或下划线字符(可以认为是匹配"单词"字符) \W ...
- 鸿蒙的js开发部模式16：鸿蒙布局Grid网格布局的应用一
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口]目录:1.Grid简介2.使用Grid布局实现的效果3.grid-row-gap和grid-colunm-gap属性4.< ...
- JS数组的常用属性或方法
1.length 数组长度 计算数组的长度 var arr=[1,2,3,4,5]; console.log(arr.length);//输出结果是5 2. push() 添加元素 向数组尾部添加新元 ...
- 前端问题录——在导入模块时使用'@'时提示"Modile is not installed"
前情提要 为了尽可能解决引用其他模块时路径过长的问题,通常会在 vue.config.js 文件中为 src 目录配置一个别名 '@' configureWebpack: { resolve: { a ...
- DOS打开方式
一.CMD窗口 Ⅰ.普通身份 按下键盘组合键:Windows + R --> 出现'运行'窗口,在'打开'的输入框中输入'cmd' --> 点击确定 打开'开始'菜单 --> 找到' ...
- 高级FTP
一.作业需求 1. 用户加密认证(已完成) 2. 多用户同时登陆(已完成) 3. 每个用户有自己的家目录且只能访问自己的家目录(已完成) 4. 对用户进行磁盘配额.不同用户配额可不同(已完成) 5 ...
- 永恒之蓝(MS17-010)检测与利用
目录 利用Nmap检测 MSF反弹SHELL 注意 乱码 参考 利用Nmap检测 命令: nmap -p445 --script smb-vuln-ms17-010 [IP] # 如果运行报错,可以加 ...
- AI在出行场景的应用实践：路线规划、ETA、动态事件挖掘…
前言:又到春招季!作为国民级出行服务平台,高德业务快速发展,大量校招/社招名额开放,欢迎大家投递简历,详情见文末.为帮助大家更了解高德技术,我们策划了#春招专栏#的系列文章,组织各业务团队的高年级同 ...
- 用c++解一元二次方程
解方程 github项目地址 这两天得知初二的表妹学了一元二次方程,听说还不会解,我就想着试试用C语言编写解方程. 一元二次方程 用公式法 这种方法效果很好: #include"funct. ...