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制作大师. ...
随机推荐
- RTPS解析
资料参考: https://blog.csdn.net/HBS2011/article/details/102520704
- 系统错误，MSVCP100D.dll找不到或丢失！
文章首发 | 公众号:lunvey 今日研究c++,找了一些示例程序,发现无法打开.弹出如下的报错提示: 作为新时代人类,遇见问题第一件事情就是问度娘.然而眼花缭乱的检索数据,大家众说纷纭,不知道如何 ...
- 处理ios键盘弹出按钮点击click失效
用ontouchstart绑定事件即可,然后用 document.activeElement.blur();让键盘收起 this.value = value.replace(/\s/g, " ...
- Tango with Django 1.9 中文——1.概述
译者注:英文书地址https://leanpub.com/tangowithdjango19/,作者为Leif Azzopardi 和 David Maxwell.本文仅为尝试.学习和交流,著作权利归 ...
- vue3与vue2的区别
全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...
- 别再恐惧 IP 协议（万字长文 | 多图预警）
尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 「CS-Wiki」Gitee ...
- 为 APK 文件增加右键菜单组实现快捷安装
0.结果 1.需求 迫于每次都要打开 Powershell 手动敲 adb install xxx.apk 太麻烦,就想通过注册表搞一个右键菜单,实现快捷安装 apk 的功能. 最后决定先实现三个功能 ...
- 007-变量的作用域和LED点阵
变量 一.局部变量和全局变量 局部变量:函数内申明的变量,只在函数内有效. 全局变量:函数外部申明的变量.一个源程序文件有一个或者多个函数,全局变量对他们都起作用. 备注:全局变量有副作用,降低了函数 ...
- 《进击吧！Blazor！》系列入门教程 第一章 6.安全
<进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力. 视频地址:https://s ...
- Java I/O流 01
文件IO·异常 和 File类 异常的概述和分类 * A:异常的概述 * 异常就是Java程序在运行过程中出现的错误 * B:异常的分类 * 用过API查看Throwable * Error * 服务 ...