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制作大师. ...
随机推荐
- HTTP 1.x 学习笔记 —— Web 性能权威指南
HTTP 1.0的优化策略非常简单,就一句话:升级到HTTP 1.1.完了! 改进HTTP的性能是HTTP 1.1工作组的一个重要目标,后来这个版本也引入了大量增强性能的重要特性,其中一些大家比较熟知 ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- 小白养成记——JavaWeb之文件的上传
文件的上传推荐使用commons的fileupload组件来完成.该组件还依赖于io包,因此需要用到两个jar包: commons-fileupload-X.X.jar commons-io-X.X. ...
- 优化程序性能（CSAPP）
[前言]虽然现在没有接触过大型项目,但是工作了会注重性能.学习一下,应该能更好更快的理解别人写的经典优化的代码.结合CSAPP和自己的理解,总结一下. 一.程序优化综述 1.高效程序的特点 (1)适当 ...
- nacos服务注册之服务器端Raft
Raft是持久化,数据存储在\nacos\data\naming\data目录 nacos启动后首先从数据存储目录加载数据 Raft协议中节点只有一个LEADER,只有LEADER节点负责数据写入,F ...
- 后端程序员之路 32、Index搜索引擎实现分析1-类的设计
# 1.forward_index 正排索引(正向索引)- filter_t- filter_judge # 2.inverted_index 倒排索引(反向索引)- inverted_pre_sco ...
- 力扣496. 下一个更大元素 I
原题 1 class Solution: 2 def nextGreaterElement(self, nums1: List[int], nums2: List[int]) -> List[i ...
- 《C++ Primer》笔记 第1章 开始
输出运算符<< 的计算结果就是其左侧运算对象 std::endl 结束当前行,并将与设备关联的缓冲区中的内容刷到设备中. 程序员常常在调试时添加打印语句.这类语句应该保证"一直& ...
- HDOJ-6641(欧几里得+异或运算)
TDL HDOJ-6641 关于题意,就是要找出符合f的第m大的数,而且后面还要满足异或等式. 通过观察题目,可以发现n太大了,所以不能直接枚举.当然因为m比较小,所以可以转换思路k^n,这个数最大不 ...
- 趣谈 DHCP 协议，有点意思。
计算机网络我也连载了很多篇了,大家可以在我的公众号「程序员cxuan」 或者我的 github 系统学习. 计算机网络第一篇,聊一聊网络基础 :计算机网络基础知识总结 计算机网络第二篇,聊一聊 TCP ...