说说Chrome插件从开发调试到打包发布-CSDN博客

什么是Chrome插件

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

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

出现的位置可以在配置文件中配置。

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

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

项目结构

接下来看一下项目结构。真正打包的目录是buildSrc文件夹，由于项目使用ES6语法进行开发所以将ES6文件放到devSrc中进过编译后输出到buildSrc中。如果直接使用ES5可以省略devSrc目录直接在buildSrc中开发。

.
├── 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清单文件，提供有关扩展程序的各种信息。

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

这是一个最简单的清单文件，注意manifest_version字段的值固定是2，清单的所有配置项可以查看文档。

项目开发

Chrome插件可以分为三部分，分别运行在不同的环境。

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

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

用户界面网页(popup)

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

内容脚本(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文件