chrome插件开发之manifest.json

一般而言,一个chrome插件一般包含以下目录的文件。

├── manifest.json
├── icon.png
├── popup.html
├── options.html
├── js
│ ├── background.js
│ ├── app.js

对于前端而言,除了manifest.json,以上的其他文件大家都比较熟悉。作为类似chrome插件开发的配置文件,manifest.json的结构大致是这样的:

{
    "manifest_version": 2,
 
    "name": "测试插件",
    "description": "一款测试插件的说明",
    "version": "0.0.1",
 
    "icons": {
        "16": "icon16.png",
        "32": "icon32.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
 
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "测试插件",
        "default_popup": "popup.html"
    },
 
    "page_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "测试插件",
        "default_popup": "popup.html"
    },
 
    "content_scripts": [
        {
            "matches": ["*://www.baidu.com/*"],
            "js": ["js/test.js"],
            "css": ["css/test.css"]
        }
    ],
 
    "background": {
        "scripts": ["js/background01.js", "js/background02.js"]
    },
 
    "options_page": "options.html",
 
    "permissions": [
        "https://www.baidu.com/"
    ]
}

或许你很好奇以上的属性或配置的作用,接下来,我们就分别对这些属性进行说明,你也根据自身插件的需要对属性进行增加和删除:

manifest_version

manifest_version:插件配置文件manifest.json的版本号,是由chrome官方发布的。

name

name:插件的名称

description

description:对插件的描述。定义了之后,打开chrome://extensions/,在插件名称的底部可以看到。

version

version:插件的版本

icons

icons:打开扩展程序界面 chrome://extensions/,你会在每个插件的左侧看到对应的图标,这个也就在manifest.json定义的icons。一般而言,一个插件应用都有一套对应的图标,分别是四种大小的格式(16px, 32px, 48px, 128px)。在不同的分辨率下,chrome会根据不同情况采用不同大小的图标。

值得注意的是,这个属性不是必须的。倘若你未指定icons,则chrome会采用默认的“拼图”图标。

browser_action

browser_action:一般包含 “default_icon”、”default_title” 以及 “default_popup”

–default_icon

位于工具栏右侧的插件图标,它的值可以是字符串。也可以是一个对象(如下面),当值为对象时,在不同的分辨率会选择不同图标。当未指定图标时,chrome会采用icons中指定的图标。但如果icons也没指定图标,那地址栏右侧的图标会变成一个带有“方块?”的深灰色图标,也就是系统默认的图标。

"browser_action": {
    "default_icon": {
        "19": "images/icon19.png",
        "38": "images/icon38.png"
    }
}

在js中,我们可以通过setIcon这个API来改变这个图标:

chrome.browserAction.setIcon(details, callback);

details–包含了三个属性。分别是”imageData”,”path”,”tabId”
imageData–可选,值为对象,canvas元素。
path–可选,值为字符串。图片在扩展中的的相对路径。
tabId–可选,值为整数。切换到某一特定标签时,图标改变!关闭标签时,图标重置。
callback–图标改变后,执行的函数。

–default_title

指定了鼠标悬停到工具栏右侧插件图标时显示的文字信息,很像普通html标签的title属性。我们也可以通过setTitle这个API来改变标题,如果插件有后台处理功能,那么我们就可以通过改变title来告知用户的当前状态:

chrome.browserAction.setTitle(details);

details–包含了二个属性。分别是”title”,”tabId”
title–值为字符串。鼠标经过图标时要显示的文字。
tabId–可选,值为整数。切换到某一特定标签时,标题改变!关闭标签时,标题重置。

–default_popup

看到带popup字样,我们便能联想到这是关于弹出层的信息。default_popup指定了鼠标点击工具栏右侧插件图标时显示的弹出层,它是一个html页面(popup.html),主要用于展示插件内容。我们也可以通过setPopup这个API来改变popup展示的内容:

chrome.browserAction.setPopup(details);

details–包含了二个属性。分别是”tabId”,”popup”
tabId–可选,值为整数。切换到某一特定标签时,popup展示的内容改变!关闭标签时,内容重置。
popup–值为string。鼠标点击插件图标时弹出的html文件,如果为空字符串,则不弹出内容。

Badge

Badge翻译成中文表示徽章、标记的意思,它是位于图标底部的信息块。在前面,我们必须通过点击图标或悬停在图标的方式来查看消息,这样看起来或许不那么便捷。而Badge的出现又给我们多提供了一种展现信息状态的选择!它能很直观的反馈消息。
我们可以通过以下API对Badge进行设置和读取:

chrome.browserAction.setBadgeText(details);
chrome.browserAction.getBadgeText(details, callback);

details–包含了二个属性。分别是”text”,”tabId”
text–值为字符串。显示在Badge里字,只能显示四个字符。
tabId–可选,值为整数。切换到某一特定标签时,设置生效!关闭标签时,Badge重置。
callback–设置改变后,执行的回调函数。

chrome.browserAction.setBadgeBackgroundColor(details);
chrome.browserAction.getBadgeBackgroundColor(details, callback);

details–包含了二个属性。分别是”color”,”tabId”
text–值为数组或字符串。设置Badge的背景色,可以是#cccccc,也可以是类似rgba的[100, 200, 200, 50]。
tabId–可选,值为整数。切换到某一特定标签时,设置生效!关闭标签时,Badge重置。
callback–设置改变后,执行的回调函数。
值得注意的时,当设置了Badge,我们在重新加载了插件后,还需要点击工具栏右侧图标,才会看到设置或更新的Badge。

page_action

page_action:page_action与browser_action的功能大同小异。不同点主要有:
1. browser_action中的插件图标”default_icon”是在工具栏右侧,而page_action是在地址栏的右侧。如我们看到chrome中的收藏夹图标,是一个五角星!
2. page_action具有显示和隐藏图标的API。

chrome.pageAction.show(tabId);
chrome.pageAction.hide(tabId);

tabId–值为整数。在指定标签下显示或隐藏插件图标。

content_scripts

content_scripts:通常在使用chrome插件时,我们可以对需要操作的页面进行DOM操作。它的值是一个数组,其中数组的第一个项是一个对象。包含了match、exclude_matches、css以及js等属性。这里要说明的是,chrome不允许在页面里直接内嵌js代码,因为你必须外链js文件。
match–匹配需要操作页面所在的域,即匹配到的页面,才做相应的处理。如果不作域名限制,可通过以下方式:

"matches": ["*://*/*"]

js、css–被注入到操作页面的样式和脚本,当用户打开页面,被注入的文件就会自动运行。改变UI界面,处理各种逻辑与行为。
关于content_scripts,我写了个进入百度首页,然后倒计时5秒对 chrome插件 进行搜索的chrome插件!点击下载

background

background:如果插件没有default_popup或者前台界面展示,而是通过后台脚本运行,去改变工具栏右侧插件图标的状态(比如page_action改变显示数)来通知用户。这种情况下,我们可以在manifest.json中加入background属性。
它的值是一个对象,这个对象它包含了一个scripts属性,而scripts属性的值为一个数组,数组的每项是对应的js文件。有点绕?看看配置文件里的 background 吧。

"background": {
    "scripts": ["js/background.js"]
}

比如,我们在background.js中对某个站点发送ajax请求,当站点有信息更新时,background.js也会更新工具栏右侧插件图标的状态,进而通知到用户!
关于background,我写了个每隔5s改变 Badge 内容为 yes 的chrome插件!点击下载

options_page

options_page:当我们鼠标右键工具栏右侧的插件图标时,会弹出一个菜单,菜单里包含了插件名称、选项、chrome移除和菜单隐藏操作、管理扩展程序以及审查弹出内容这几项。在我们没有在manifest.json指定options_page属性前,“选项”那项是置灰不可选。options_page的属性值是一个页面,假如像以下方式引入了options_page:

"options_page": "options.html"

再次右键插件图标会发现“选项”变为可选状态,点击它会跳转到我们创建的options.html。当然,页面名称你可以选择自定义。
通过这个页面,我们可以对插件进行个性化的功能设置,而设置后的值通常以键值对的格式保存在localstorage,虽然localstorage存在跨域限制,但chrome在插件开发方面却没有对此作要求,也正因为如此,我们能轻松读取到用户设置的数据,从而插件也能按照用户设置的状态进行运行!

permissions

permissions:web开发中跨域请求是不允许的,如前面讲到的localstrong一样,这个规则在chrome插件中也被打破。我们可以通过在permissions中指定请求的域,在后台js文件对这个域发送ajax,从而完成信息获取。permissions的值是一个数组,每项是对应的url。

"permissions": [
    "https://www.baidu.com/" // 设置跨域地址
]

关于permissions,我写了一个可预览城市一周天气的chrome插件!里面包含了前面所讲的 options_page。点击下载

评论功能已关闭。