| 标题 | JavaScript开发Chrome浏览器扩展程序UI的教程 |
| 内容 | Chrome扩展开发API中提供了一些关于UI外观的操作,如果是刚刚上手的话首先需要了解Browser Actions、Omnibox、选项页等,在这篇JavaScript开发Chrome浏览器扩展程序UI的教程中,我们先来回顾一下基本知识: 基本知识 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" } } } |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。