乐趣区

关于chrome:Chrome扩展开发基础教程附HelloWorld

1 概述

Chrome扩大开发的基础教程,代码基于原生JS+H5,教程内容基于谷歌扩大开发官网文档。

2 环境

  • Chrome 88.0.4324.96
  • Chromium 87.0.4280.141
  • Brave 1.19.84
  • FireFox 85.0
  • WebStorm 2020.3.2
  • Manifest 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*128Chrome Web Store中显示的。

7 公布

最初一步是公布,扩大有两种装置形式,一种是通过本地装置,一种是通过 Chrome Web Store 装置,应用后一种形式的话,须要注册成为 Chrome 网上利用开发者:

这里为了不便就本地打包公布了,在插件治理页面抉择Pack extension

抉择蕴含了 manifest.json 的文件夹,在这里就是方才创立的FirstExtension

点击打包后,会呈现两个文件:

一个是crx,就是扩大的打包文件,一个是pem,创立新版本的扩大时须要应用。

浏览器中拖拽 crx 文件就能够装置了,一般来说 Chrome/Chromium/Brave 因为基于雷同内核应该都不会呈现问题,至于FireFox,能够参考一下文末的附录。

8 源码

  • Github
  • 码云
  • CODECHINA

9 附录:FireFox

FireFox目前最新版本(85.0)的扩大目前不反对 Manifest V3,因而如果须要开发FireFox 扩大,须要应用 Manifest V2 版本,也就是:

"manifest_version": 2

当然还有一些字段上的区别,具体能够参考这里的文档。

另外笔者测试了一下 FireFox 装置这个 Demo 扩大如同不能间接拖拽 crx 文件,须要关上一个叫 about:debugging 的链接,在设置中抉择Load Temporary Add-on:

抉择 manifest.json 文件即可装置。

退出移动版