Chrome 扩展开发 API 中提供了一些关于 UI 外观的操作, 如果是刚刚上手的话首先需要了解 Browser Actions、Omnibox、选项页等, 在这篇 JavaScript 开发 Chrome 浏览器扩展程序 UI 的教程中, 我们先来回顾一下基本知识:
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
基本知识
1、插件文件结构
1.1、manifest.json
每一个扩展、可安装的 webApp、皮肤,都有一个 JSON 格式的 manifest 文件,里面存放重要的插件相关信息。
一个最基本的配置例子:
- {
- "name": "browser action demo",
- "version": "1.0",
- "permissions": [
- "tabs", "http://*/*", "https://*/*"
- ],
- "browser_action": {
- "default_title": "开关灯",
- "default_icon": "icon.png",
- "default_popup": "popup.html"
- },
- "background": {
- "page": "background.html"
- },
- "manifest_version": 2
- }
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 文件中配置:
- "content_scripts": [
- {
- "matches": ["http://www.google.com/*"],
- "CSS": ["mystyles.css"],
- "js": ["jquery.js", "myscript.js"]
- }
- ],
方法二,通过 executeScript():
向页面注入 JavaScript 脚本执行。
- chrome.tabs.executeScript(integer tabId, object details,
- function callback) chrome.tabs.executeScript(tabId, {
- file: "func.js",
- allFrames: true
- });
UI 外观
1、browser action:
在 chrome 主工具条的地址栏右侧增加一个图标。
注意:Packaged apps 不能使用 browser actions
1.1、manifest.json 中配置
注册 browser action:
- {
- "name": "My extension",
- ...
- "browser_action": {
- "default_icon": "images/icon19.png", // optional
- "default_title": "Google Mail", // optional; shown in tooltip
- "default_popup": "popup.html" // optional
- },
- ...
- }
1.2、配置项说明
(1)default_icon
图标 19 *19px
修改 browser_action 的 manifest 中 default_icon 字段,或者调用 setIcon() 方法。
- chrome.browserAction.setIcon(object details)
设置 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 显示在图标上面。
- setBadgeBackgroundColor
- chrome.browserAction.setBadgeBackgroundColor(object details)
设置 badge 的背景颜色。
(4)default_popup
Popup 气泡提示
修改 browser_action 的 manifest 中 default_popup 字段来指定 HTML 文件, 或者调用 setPopup() 方法。
- chrome.browserAction.setPopup(object details)
设置一个点击 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 的图标用作右键菜单的标识。例如:
- {
- "name": "My extension",
- ...
- "permissions": [
- "contextMenus"
- ],
- "icons": {
- "16": "icon-bitty.png",
- "48": "icon-small.png",
- "128": "icon-large.png"
- },
- ...
- }
3、桌面通知
通知用户发生了一些重要的事情。桌面通知会显示在浏览器窗口之外。 下面的图片是通知显示时的效果,在不同的平台下,通知的显示效果会有些细微区别。
直 - 接使用一小段 JavaScript 代码创建通知,当然也可以通过扩展包内的一个单独 HTML 页面。
3.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "permissions": [
- "notifications"
- ],
- ...
- }
3.2、与扩展页交互:
使用 getBackgroundPage() 和 getViews() 在通知与扩展页面中建立交互
- // 在通知中调用扩展页面方法...
- chrome.extension.getBackgroundPage().doThing();
- // 从扩展页面调用通知的方法...
- chrome.extension.getViews({
- type: "notification"
- }).forEach(function(win) {
- win.doOtherThing();
- });
4、Omnibox
omnibox 应用程序界面允许向 Google Chrome 的地址栏注册一个关键字,地址栏也叫 omnibox
必须在 manifest 中包含 omnibox 关键字段。需要指定像素为 16x16 的图标,以便当用户输入关键字时,在地址栏中显示。
4.1、manifest.json 中配置
- {
- "name": "Aaron's omnibox extension",
- "version": "1.0",
- "omnibox": {
- "keyword": "aaron"
- },
- "icons": {
- "16": "16-full-color.png"
- },
- "background_page": "background.html"
- }
Chrome 自动创建灰度模式 16x16 像素的图标。你应该提供全色版本图标以便可以在其他场景下使用。
5、选项页
为了让用户设定你的扩展功能,你可能需要提供一个选项页。如果你提供了选项页,在扩展管理页面 chrome://extensions 上会提供一个链接。点击选项链接就可以打开你的选项页。
5.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "options_page": "options.html",
- ...
- }
6、覆写特定页
使用替代页,可以将 Chrome 默认的一些特定页面替换掉,改为使用扩展提供的页面。
6.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "chrome_url_overrides" : {
- "pageToOverride": "myPage.html"
- },
- ...
- }
7、Page Actions
使用 page actions 把图标放置到地址栏里。
想让扩展图标总是可见,则使用 browser action。
打包的应用程序不能使用 page actions。
7.1、manifest.json 中配置
- {
- "name": "My extension",
- ...
- "page_action": {
- "default_icon": "icons/foo.png", // optional
- "default_title": "Do action", // optional; shown in tooltip
- "default_popup": "popup.html" // optional
- },
- ...
- }
7.2、配置项说明
同 browser actions 一样,page actions 可以有图标、提示信息、 弹出窗口。但没有 badge
使用方法 show() 和 hide() 可以显示和隐藏 page action。缺省情况下 page action 是隐藏的。当要显示时,需要指定图标所在的标签页,图标显示后会一直可见,直到该标签页关闭或开始显示不同的 URL (如:用户点击了一个连接)
7.3、提示
要只对少数页面使用 page action;
不要对大多数页面使用它,如果功能需要,使用 browser actions 代替。
没事别总让图标出现动画,那会让人很烦。
8、主题
主题是一种特殊的扩展, 可以用来改变整个浏览器的外观。主题和标准扩展的打包方式类似, 但是主题中不能包含 JavaScript 或者 HTML 代码。
8.1、manifest.json 中配置
- {
- "version": "2.6",
- "name": "camo theme",
- "theme": {
- "images" : {
- "theme_frame" : "images/theme_frame_camo.png",
- "theme_frame_overlay" : "images/theme_frame_stripe.png",
- "theme_toolbar" : "images/theme_toolbar_camo.png",
- "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
- "theme_ntp_attribution" : "images/attribution.png"
- },
- "colors" : {
- "frame" : [71, 105, 91],
- "toolbar" : [207, 221, 192],
- "ntp_text" : [20, 40, 0],
- "ntp_link" : [36, 70, 0],
- "ntp_section" : [207, 221, 192],
- "button_background" : [255, 255, 255]
- },
- "tints" : {
- "buttons" : [0.33, 0.5, 0.47]
- },
- "properties" : {
- "ntp_background_alignment" : "bottom"
- }
- }
- }
来源: http://www.phperz.com/article/17/0223/265730.html