基本知识 1、插件文件结构 1.1、manifest.json
每一个扩展、可安装的WebApp、皮肤,都有一个JSON格式的manifest文件,里面存放重要的插件相关信息。一个最基本的配置例子:
1.2、popup
插件的弹窗,上面配置中的browser_action中default_popup就是这个页面。1.3、background page
绝大多数应用都包含一个背景页面(background page),用来执行应用的主要功能。1.4、Content scripts
通过content script可以使应用和web页面交互,content script是指能够在浏览器已经加载的页面内部运行的Javascript脚本。可以将content script看做是网页的一部分,而不是它所在的应用的一部分。2、文件之间的交互
popup弹窗中可以直接调用背景页面中的函数。Content script可以读取并修改当前web页面的dom树,但是它并不能修改它所在应用的背景页面(background)的dom树。
Content script与应用之间的交互:可以互相发送消息
3、为web页面注入JS(Content scripts)文件:
方法一,在manifest.json文件中配置:方法二,通过executeScript():
向页面注入JavaScript 脚本执行。
UI外观 1、browser action:
在chrome主工具条的地址栏右侧增加一个图标。注意:Packaged apps不能使用browser actions
1.1、manifest.json 中配置
注册browser action:1.2、配置项说明
(1)default_icon 图标 19 *19px修改browser_action的manifest中 default_icon字段,或者调用setIcon()方法。
设置browser action的图标。图标可以是一个图片的路径或者是从一个canvas元素提取的像素信息.。无论是图标路径还是canvas的imageData,这个属性必须被指定。
(2)default_title 修改browser_action的manifest中default_title字段,或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串;点击Internationalization查看详情。
chrome.browserAction.setTitle(object details)
设置browser action的标题,这个将显示在tooltip中。
(3)Badge Browser actions可以选择性的显示一个badge— 在图标上显示一些文本。Badges 可以很简单的为browser action更新一些小的扩展状态提示信息。
因为badge空间有限,所以只支持4个以下的字符。
设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。
chrome.browserAction.setBadgeText(object details)
设置browser action的badge文字,badge 显示在图标上面。
设置badge的背景颜色。
(4)default_popup Popup 气泡提示
修改browser_action的manifest中default_popup字段来指定HTML文件, 或者调用setPopup()方法。
设置一个点击browser actions时显示在popup中的HTML。
1.3、提示
为了获得最佳的显示效果,请遵循以下原则:确认 Browser actions 只使用在大多数网站都有功能需求的场景下。 确认 Browser actions 没有使用在少数网页才有功能的场景, 此场景请使用page actions。 确认你的图标尺寸尽量占满19x19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。 不要尝试模仿Google Chrome的扳手图标,在不同的themes下它们的表现可能出现问题,,并且扩展应该醒目些。 尽量使用alpha通道并且柔滑你的图标边缘,因为很多用户使用themes,你的图标应该在在各种背景下都表现不错。 不要不停的闪动你的图标,这很惹人反感。
2、右键菜单
您可以选择针对不同类型的对象(如图片,链接,页面)增加右键菜单项。您可以根据需要添加多个右键菜单项。一个扩展里添加的多个右键菜单项会被Chrome自动组合放到对应扩展名称的二级菜单里。
右键菜单可以出现在任意文档(或文档中的框架)中,甚至是本地文件(如file://或者Chrome://)中。若想控制右键菜单在不同文档中的显示,可以在调用create()和update()时指定documentUrlPatterns。
2.1、manifest.json 中配置
在清单中声明“contentMenus”权限。同时,您应该指定一个16x16的图标用作右键菜单的标识。例如:3、桌面通知
通知用户发生了一些重要的事情。桌面通知会显示在浏览器窗口之外。 下面的图片是通知显示时的效果,在不同的平台下,通知的显示效果会有些细微区别。直-接使用一小段 JavaScript 代码创建通知,当然也可以通过扩展包内的一个单独HTML页面。
3.1、manifest.json 中配置
3.2、与扩展页交互:
使用 getBackgroundPage() 和 getViews()在通知与扩展页面中建立交互// 从扩展页面调用通知的方法...
chrome.extension.getViews({type:"notification"}).forEach(function(win) {
win.doOtherThing();
});
4、OmniBox
omniBox 应用程序界面允许向Google Chrome的地址栏注册一个关键字,地址栏也叫omniBox必须在 manifest 中包含omniBox 关键字段。需要指定像素为16x16的图标,以便当用户输入关键字时,在地址栏中显示。
4.1、manifest.json 中配置
Chrome 自动创建灰度模式16x16像素的图标。你应该提供全色版本图标以便可以在其他场景下使用。
5、选项页
为了让用户设定你的扩展功能,你可能需要提供一个选项页。如果你提供了选项页,在扩展管理页面 chrome://extensions上会提供一个链接。点击选项链接就可以打开你的选项页。5.1、manifest.json 中配置
6、覆写特定页
使用替代页,可以将Chrome默认的一些特定页面替换掉,改为使用扩展提供的页面。6.1、manifest.json 中配置
"pageToOverride": "myPage.html"
},...
}
7、Page Actions
使用page actions把图标放置到地址栏里。想让扩展图标总是可见,则使用browser action。
打包的应用程序不能使用page actions。
7.1、manifest.json 中配置
7.2、配置项说明
同browser actions一样,page actions 可以有图标、提示信息、 弹出窗口。但没有badge使用方法 show() 和 hide() 可以显示和隐藏page action。缺省情况下page action是隐藏的。当要显示时,需要指定图标所在的标签页,图标显示后会一直可见,直到该标签页关闭或开始显示不同的URL (如:用户点击了一个连接)