返回
谷歌/Google
说说Chrome插件从开发调试到打包发布
2023-09-18 14:01

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

什么是Chrome插件

Chrome插件其实和一个普通web应用一样都是由html+css+js经过zip打包组成的，插件可以使用Chrome提供的浏览器API，增强浏扩展览器的功能。

Chrome插件通常是.crx后缀的文件，通过谷歌网上应用商店下载或者在开发者模式中可以直接拖入到浏览器进行安装。插件安装成功以后可以出现在两个位置：

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

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

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

这里是GitHub地址/mai-kuraki/…

项目结构

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

.
├── 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

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

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

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

项目开发

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

后台页面/事件页面()

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

用户界面网页(popup)

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

内容脚本(content)

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

1.工具栏popup界面

点击工具栏/地址栏（具体位置取决于配置文件）插件图标出来的弹窗其实就是一个html页面，弹窗要显示的文件说说Chrome插件从开发调试到打包发布，和工具栏小图标在.json文件中配置。

{
    "browser_action": {
        "default_title": "clearRead",
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
}

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

2.内容脚本content.js

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

{
    "content_scripts": [
        {
            "matches": ["*:/*",
                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文件可能报错（本人使用会有这个问题）需要拖入已解压的文件夹才能安装2.调试popup

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

会弹出Chrome的，调试方式和普通页面一样。3.调试

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

3.调试content

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

发布上架

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

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

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

一些API文档地址

开发者指南.json 完整字段Chrome APIs

【本文来源于互联网转载，如侵犯您的权益或不适传播，请邮件通知我们删除】

发表评论
0评