chrome扩展程序开发

开发chrome extensions

chrome extension开发官网地址

developer.chrome.com/extensions

根据文档要求，开发插件有两种模式：

• popup html模式
• content_scripts模式

先讲一下两种模式的共同点，一个chrome插件须要一个配置文件，manifest.json:

{
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2
}
复制代码

这三个字段是extensions的三要素，必需要声明，否则在chrome添加附加组件时会提示错误

先介绍下popup html

"browser_action": {
    "default_popup": "./src/index.html",
    "default_icon": "./assets/whoami.jpg"
}
复制代码

whoami.jpg为插件图标，index.html为当你点击插件以后展现的内容。例如草料插件，index.html里面及js css html三驾马车开发模式，这里不赘述

再介绍下content_scripts

这个就比较高端了，即script注入，这是在浏览器tab打开时自动运行的，因此安全系数也会相对要求比较高

"permissions": ["activeTab"],
"content_scripts": [  
    {  
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "css": [
            "./lib/font-awesome/font-awesome.min.css",
            "./lib/APlayer/APlayer.min.css",
            "./music/music.css"
        ],
        "js": [
            "./lib/jquery/jquery-3.2.1.min.js",
        ]
    }
]
复制代码

若是不声明permissions，会在每一个tab页都注入当前js，安全系数比较低，在chrome插件发布提交审核时比较难过，声明activeTab会比较容易过
这里三个字段，matches声明匹配网址，css和js即为注入的js css代码

调试chrome extensions

打开 chrome://extensions/

加载已解压的扩展程序，便可，在浏览器中头部标签就会显示当前的插件。能够开始测试你的插件了

发布chrome extensions

chrome.google.com/webstore/de… 以上为发布地址，须要一个chrome帐号，这个帐号须要花费5💲，以后能够免费发布，支付帐号费须要使用visa卡
注册帐号： chrome.google.com/webstore/de…

chrome extension demo

git地址：github.com/xxoojs/iMus… 能够直接下载安装到chrome浏览器，iMusic插件在写文章时还在审核中，chrome应用商店还不能下载安装