说说Chrome插件从开发调试到打包发布

时间 2019-11-06

原文原文链接

什么是Chrome插件

Chrome插件其实和一个普通web应用同样都是由html+css+js通过zip打包组成的，插件可使用Chrome提供的浏览器API，加强浏扩展览器的功能。
Chrome插件一般是.crx后缀的文件，经过谷歌网上应用商店下载或者在开发者模式中能够直接拖入到浏览器进行安装。插件安装成功之后能够出如今两个位置：css

浏览器的地址栏中
浏览器的工具栏中

出现的位置能够在配置文件中配置。html

接下来以clearRead为例说说Chrome插件的开发打包和发布。clearRead插件是一款提取新闻页面内容提供一个干净清爽阅读界面的工具，能够在Chrome应用商店下载安装。html5

这里是GitHub地址github.com/mai-kuraki/… git

项目结构

接下来看一下项目结构。真正打包的目录是buildSrc文件夹，因为项目使用ES6语法进行开发因此将ES6文件放到devSrc中进过编译后输出到buildSrc中。若是直接使用ES5能够省略devSrc目录直接在buildSrc中开发。github

.
├── Gruntfile.js    //grunt配置文件
├── LICENSE
├── README.md
├── buildSrc        //最终打包成crx的目录
│   ├── icon.png
│   ├── icon_gray.png
│   ├── image
│   │   └── icon.png
│   ├── js
│   │   ├── background.js
│   │   ├── contentScript.js
│   │   └── popup.js
│   ├── key.pem
│   ├── manifest.json
│   ├── mdl
│   │   ├── material.min.css
│   │   └── material.min.js
│   ├── popup.html
│   └── style
│       ├── content.css
│       ├── content.css.map
│       ├── content.scss
│       ├── style.css
│       ├── style.css.map
│       └── style.scss
├── crx             //crx文件生成的输出目录
│   ├── clearRead.crx
│   └── clearRead.zip
├── devSrc          //开发文件目录
│   ├── background.js
│   ├── contentScript.js
│   ├── lib
│   │   └── Readability.js
│   └── popup.js
├── package-lock.json
└── package.json
复制代码

一个插件的核心是manifest.json清单文件，提供有关扩展程序的各类信息。web

{
  "manifest_version": 2,
  "name": "个人扩展程序",
  "version": "版本字符串",
}
复制代码

这是一个最简单的清单文件，注意manifest_version字段的值固定是2，清单的全部配置项能够查看文档。chrome

项目开发

Chrome插件能够分为三部分，分别运行在不一样的环境。npm

后台页面/事件页面(backgrund)

顾名思义，后台网页是运行在浏览器后台的，随着浏览器的启动开始运行，浏览器关闭结束运行。事件页面则是须要调用时加载，脚本空闲时被卸载，二者都是运行在后台。json

用户界面网页(popup)

点击插件出来的小弹窗，每次点击弹出开始运行，弹窗关闭后结束，能够与backgrund脚本交互。api

内容脚本(content)

安装插件后每打开一个网页能够将content脚本注入到页面中，内容脚本能够读取浏览器访问的网页的细节，而且能够修改页面。

1.工具栏popup界面

点击工具栏/地址栏（具体位置取决于配置文件）插件图标出来的弹窗其实就是一个html页面，弹窗要显示的文件，和工具栏小图标在manifest.json文件中配置。

{
    "browser_action": {
        "default_title": "clearRead",
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
}
复制代码

在clearRead插件中，popup界面主要是提供插件的启用状态和快捷键配置功能。

2.内容脚本content.js

内容脚本在打开网页时会被注入到网页中，它们在浏览器中已加载页面的上下文中执行。应该将内容脚本视为已加载页面的一部分。clearRead的核心功能就是依赖于内容脚本。在哪些页面中注入脚本和注入什么脚本在manifest.json文件中配置。

{
    "content_scripts": [
        {
            "matches": ["*://*/*", "file://*"],
            "css": ["style/content.css"],
            "js": ["js/contentScript.js"]
        }
    ]
}
复制代码

matches字段能够设置一个匹配表达式来过滤须要注入脚本的网站。查看内容脚本文档
clearRead插件主要是利用内容脚本向页面注入脚本，经过监听快捷键激活程序，分析提取页面中的标题正文来生成阅读模式。

3.后台页面/事件页面

在manifest.json文件中配置须要运行的脚本

{
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  }
}
复制代码

配置参数persistent:false则后台页面变为事件页面，事件页面和背景页面的区别是是否常住后台运行，Chrome 22开始可使用事件页面，应该尽可能使用事件页面，查看事件页面文档。

4.content、background、popup之间通讯

在脚本中监听事件

chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
    console.log('收到消息')
    sendResponse('发送返回值');
});
复制代码

发送消息

chrome.extension.sendMessage({msg: 'send a message'},(response) => { 
    console.log(response); 
});
复制代码

三个页面之间能够互相通讯，这里须要注意的是content脚本会被注入到每一个打开的浏览器标签中，若是从popup或者background发送消息到content中须要先确认当前的content，使用chrome.tabs.query能够找到当前激活的窗口。
除了经过事件来通讯，popup和background还能经过chrome.extensionAPI来访问脚本。

chrome.extension.getBackgroundPage()
复制代码

getBackgroundPage能够返回当前扩展在后台运脚本的window对象。

chrome.extension.getViews()
复制代码

getViews返回一个数组，含有每个在当前扩展程序中运行的页面的JavaScript window 对象。

5.本地储存

应用开发还有一个比较重要的就是数据的持久化了，Chrome插件可使用html5的localStorage API来实现数据存储。对于状态Chrome提供了chrome.cookies.*API来存储cookies。同时Chrome还提供了chrome.storage.*API来储存数据。
这里主要说明一下chrome.storage，要使用储存功能首先须要在manifest.json文件中配置储存权限(cookies也须要)：

{
    "permissions": [
      "storage"
    ]
}
复制代码

storage储存分为同步模式和本地模式分别是chrome.storage.sync.*和chrome.storage.local.*二者的区别在于同步模式储存的数据若是在另外一台设备的浏览器登陆同一个帐号数据会被同步。
储存数据：

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});
复制代码

读取数据：

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});
复制代码

若是想要只读存储可使用chrome.storage.managed来存储

脚本的打包

Chrome浏览器的扩展程序页面就提供了打包扩展的功能。

首先打开开发者模式，点击打包扩展程序在这里能够选择扩展程序文件夹（buildSrc）来打包扩展。这种打包方式的缺点就是慢，在开发调试阶段打包次数可能让人奔溃。
第二种就是使用命令打包了，使用 crx模块：

npm install crx
复制代码

安装完成后直接进入目录进行打包

$ cd myFirstExtension
$ crx pack -o myFirstExtension.crx
复制代码

第三种方法比较推荐，结合grunt进行打包：

npm install grunt-crx
复制代码

安装grunt-crx模块在Gruntfile.js中配置

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);
    ...
    grunt.initConfig({
        ...
        crx: {
            myPublicExtension: {
                src: "buildSrc/**/*",
                dest: "crx/clearRead.zip",
            },
            mySignedExtension: {
                src: "buildSrc/**/*",
                dest: "crx/clearRead.crx",
                options: {
                    privateKey: "buildSrc/key.pem"
                }
            }
        }
    });
    ...
    grunt.registerTask('crxTask', ['crx']);
};
复制代码

命令行执行命令$ grunt crxTask进行打包。
注：私钥文件key.pem能够经过执行crx打包命令生成，打包文件须要生成crx和zip文件，Chrome应用商店须要上传zip文件

扩展程序调试

1.安装扩展

首先须要打开Chrome扩展管理页面打开开发者模式，普通模式下Chrome是禁止安装非商店下载的扩展的。
打开开发者模式后直接将crx/zip文件拖入浏览器便可安装。

也能够经过导航栏的加载已解压扩展程序来安装（须要解压zip文件）

注：window下直接拖入crx/zip文件可能报错（本人使用window10会有这个问题）须要拖入已解压的文件夹才能安装

2.调试popup

在工具栏的扩展小图标上右击选择审查弹出内容

会弹出Chrome的DevTools，调试方式和普通页面同样。

3.调试backgrund

在扩展管理页面，在安装的扩展上有背景页按钮点击会弹出background页面的DevTools。

3.调试content

content脚本是直接注入到页面中的全部直接在页面打开Devtools就能调试了。

发布上架

应用开发完成打包后就能够上架到应用商店了，首先须要一个Google帐号登陆开发者信息这个，首次成为开发着须要支付5美圆才能上传插件到谷歌应用商店点击添加新内容开始上传填写插件信息

上传文件后开始填写插件的图标、说明、及截图，截图将会以轮播图的形式展示。屏幕截图的尺寸必须是1280x800 或 640x400差一点点都会上传失败。

填写完全部的信息就能够发布了，通常发布十几分钟后在应用商店就能搜到你的插件。插件中的用户统计应该是每日更新的，全部刚发布后下载了可是没有用户数这是正常的。还有须要注意的是每次插件有更新须要先更新 manifest.json文件中的 manifest_version字段再打包上传。

一些API文档地址