JavaScript开发Chrome浏览器扩展程序UI的教程(2)

右键菜单可以出现在任意文档(或文档中的框架)中,甚至是本地文件(如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" } } }

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpfws.html