Chrome插件开发 – UI外观
本文由发表于4年前 | Javascript | 评论数 1 |  被围观 7,502 views+
1、browser action:1.1、manifest.json 中配置1.2、配置项说明default_icondefault_titleBadgedefault_popup1.3、提示1.4、实例2、右键菜单2.1、manifest.json 中配置3、桌面通知3.1、manifest.json 中配置3.2、与扩展页交互:4、Omnibox4.1、manifest.json 中配置5、选项页5.1、manifest.json 中配置6、覆写特定页6.1、manifest.json 中配置7、Page Actions7.1、manifest.json 中配置7.2、配置项说明7.3、提示8、主题8.1、manifest.json 中配置

Chrome插件API中,提供了一些关于UI外观的操作。这里需要了解的几个概念:Browser Actions,右键菜单,桌面通知,Omnibox,选项页,覆写特定页,Page Actions,主题。

首先我们还是需要先了解一下基本的概念和一些常用的方法:chrome插件编写中需要了解的几个概念和一些方法。

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、配置项说明
default_icon

图标 19 *19px

修改browser_action的manifest中 default_icon字段,或者调用setIcon()方法。

chrome.browserAction.setIcon(object details)

设置browser action的图标。图标可以是一个图片的路径或者是从一个canvas元素提取的像素信息.。无论是图标路径还是canvas的imageData,这个属性必须被指定。

default_title

修改browser_action的manifest中default_title字段,或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串;点击Internationalization查看详情。

chrome.browserAction.setTitle(object details)

设置browser action的标题,这个将显示在tooltip中。

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的背景颜色。

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,你的图标应该在在各种背景下都表现不错。
不要不停的闪动你的图标,这很惹人反感。
1.4、实例

Chrome插件开发实例 – 开关灯(browser action)

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"
    }
  }
}

参考资源:

chrome extensions:https://developer.chrome.com/extensions/index.html
chrome扩展程序,非官方中文版:https://crxdoc-zh.appspot.com/extensions/index.html
360急速浏览器应用开放平台:http://open.chrome.360.cn/extension_dev/overview.html
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/chrome-plugin-development-ui-appearance.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2013 6/4
文章评论
    一条评论
  1. 我是小小莎拉 2013年10月27日02:04:39  #-49楼 回复 回复

    谷歌浏览器好占内存。。。。

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Java Web笔记 – Servlet多线程同步问题及其解决方法 2011/11/10
2 Java基础笔记 – 线程介绍及其创建的两种方法 如何退出线程 2011/10/23
3 Java Web笔记 – Servlet中的Listener监听器的介绍 常用监听器接口 实现监听器 2011/11/12
4 扩展自jsoup的HTML XSS过滤程序 2015/3/9
5 系统从实模式跳转到保护模式的基本步骤 2011/5/3
6 SQL语句实用例子 MySQL编码设置 2011/10/13
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.