乐趣区

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

jiezi

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*128 是Chrome 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 文件即可装置。

退出移动版