前两章我们所设计的扩展，使用的UI设计都非常简单。对于一个面向用户的产品，这样显然是不合适的。用户对一个程序的第一印象就是UI的设计，拙劣的UI设计完全可能将90%的用户挡在门外——即使功能设计得非常完美。

本章将专门讲解Chrome扩展的UI界面，通过Chrome提供丰富的界面API，我们可以设计出交互出色的扩展。

3.1CSS简述

CSS是Cascading Style Sheets的缩写，翻译过来叫做层叠样式表，一般简称为样式表，但通常大家还是习惯叫CSS。

最初的HTML很单一，甚至无法显示图片，随着使用范围越来越广泛，HTML支持的标签开始多了起来，所支持的样式也开始增多。但是把样式完全交给HTML去做不是一个好想法，因为HTML更侧重于页面的结构，于是在1994年CSS被提出。CSS旨在对HTML元素的外观加以描述，来提供更多更加复杂丰富的样式。

现在多数浏览器会默认使用一些样式，比如div元素默认会占据整行——两个div元素不会出现在同一行，而span元素则不是这样，这就是因为浏览器默认将div元素样式的display属性值设为了block。

浏览器这种为HTML元素附加默认样式的做法，大部分情况下是好的，但有时为了个性化设计，我们需要另外编写CSS来自定义HTML元素的外观。

Chrome会自动为HTML元素附加margin和padding样式

我们来看看上图所示的页面在Chrome浏览器中的渲染结果。可以看到HTML元素并没有被指定样式，因为我们没有编写CSS。但是Chrome已经自动为文本框添加了margin和padding样式，这在外观表现上，会在文本框周围有一圈间隙，这样其他HTML元素不会与它挨得太紧。这种设计显然是出于好意，但有时我们需要更加灵活个性化的样式，这就是为什么在前面的例子中都会出现下面的代码。

* {
    margin: 0;
    padding: 0;
}

CSS的选择器在第1章第4节已经介绍过，在此就不再赘述。下面讲一讲CSS的基本语法。

CSS是一种描述型语言，它更像是一种陈述，而不是逻辑运算。CSS的语法形式如下所示：

选择器 {
    属性名: 属性值;
}

CSS的选择器非常灵活，更加高级的使用方法大家可以参考相关的书籍。CSS的属性名也非常丰富，涉及到尺寸、边框、边距、位置、层叠顺序、文字（包括颜色、字体、粗细等等）和背景等等。

CSS使用box模型处理元素的尺寸、边框和边距，下图展示了它们之间的关系。

CSS的box模型

那么margin和padding有什么区别呢？padding区域算元素的一部分，所以元素的背景样式同样也会适用于padding区域。比如元素背景颜色设定为灰色，padding区域的背景颜色也会是灰色的，就如上图所示的那样。

需要注意的地方是，虽然padding是元素的内边距，也算元素的一部分，但元素的高度和宽度却并不包含padding区域。

元素的margin、padding、height和width的单位一般为px，即像素，也可以使用百分百的形式，如50%。如果使用的是百分百的形式，所相对的是此元素指定了绝对尺寸的父系元素。比如下面的例子：

<div id="outer" style="width: 500px">
    <div id="inner">
        <div id="content" style="width: 80%">Hello</div>
    </div>
</div>

其中id为content的div元素的宽度为80%，这80%是相对id为outer的元素而言的。虽然content的直接父系元素为inner，但是由于inner并没有指定宽度，所以会继续向上寻找父系元素，直到找到定义了width的元素为止。如果所有的父系元素都没有指定，则这个值是相对于body的。

对于元素的位置，默认情况就像报纸排版一样，将一个板块设计好之后，下一个板块会接着排列。这种像瀑布一样的排列方式我们形象地称为HTML流（flow）。默认情况下元素的position属性值为static，元素排列在正常的流中。position属性还有另外的三个值，分别是absolute、relative和fixed。如果元素的位置属性为absolute，则它的位置是相对于除static定位以外的父系元素的，如果没有这样的父系元素，则相对于body；如果元素的位置属性为relative，则它的位置是相对于它默认在HTML流中位置的；如果元素的位置属性为fixed，则它的位置是相对于浏览器窗口的。

不同位置属性的元素的定位效果

上图中浅灰色的元素是所有元素的父系元素，它的position属性为relative。深灰色和黑色边框的元素position都是默认的static，所以它们按照HTML流的方式依次布局。黑色的元素拥有absolute的位置属性，并指定left为10px，top为10px，它的定位是相对于浅灰色元素的。

对于relative定位，更像是对原有定位的偏移。对于left来说，负值向元素的左侧偏移，正值向右侧偏移，right与其相反；对于top来说，负值向元素的上侧偏移，正值向下侧偏移，bottom与其相反。需要注意的是，relative定位所定义的偏移不会影响元素原本在HTML流中的位置，下图给出了说明。

relative定位所定义的偏移不会影响元素原本在HTML流中的位置

虽然中间深灰色的元素相对于HTML流中的位置产生了偏移，但它原本在HTML流中的位置却没有改变，所以并没有影响下面浅灰色元素的位置。

默认情况下，如果元素和元素有重叠的部分，在HTML文档中靠后的元素会被显示在上面。但是可以通过CSS的z-index属性改变层叠顺序，z-index的值大的元素会显示在z-index值小的元素下面。如果一个元素没有被指定z-index的值，则在Chrome中默认为0（注意，并非所有浏览器都是这样，比如IE默认为负无穷大）。position属性为static的元素（即没有指定position属性的元素）z-index的值会被浏览器忽略。

CSS还可以定义元素中文字的大小、字体和颜色等，高级的属性还可以定义文字之间的距离、段首缩进、文字阴影等特殊的效果，下面我们主要讲讲对文字大小、字体和颜色的控制。

CSS使用font-size属性控制文字的大小，font-size的值可以是固定值也可以是百分比。如果是百分比，则相对的是父系的文字尺寸。如果是固定值，常见的单位有px、pt和em，另外还有一些其他的单位，如in、cm、mm、ex和pc。px最好理解，就是像素，和其他属性一个道理；pt是印刷界的单位，这个单位与物理尺寸相对应，如果使用pt作为单位，则在任何设备上，显示出来的大小都是一样的；em是个相对的单位，它是相对于元素当前文字尺寸的，比如元素当前文字尺寸为16px，则font-size为2em，显示出来的文字大小为32px。另外也可以使用特定的常量来设定文字大小，如xx-small、medium和large等，smaller和larger则把font-size设置为比父元素更小和更大的尺寸。

文字的字体使用font-family属性控制，这个属性可以有多个值。浏览器优先使用靠前的值，但如果用户的系统中没有安装指定的字体，则浏览器就会考虑使用后面的值，如果所有指定的字体用户的系统中都没有，则浏览器使用默认字体。对于Windows操作系统，中文的默认字体一般是宋体。需要注意的是，如果字体的名称中包含空格，需要用引号将字体名包含，多个值之间用逗号隔开。

文字的颜色使用color属性控制，color的值常见的有三种方式，分别是颜色名、十六进制颜色值和rgba。除此之外还可以使用HSL和HSLA格式。颜色名有black、red等，网上可以找到一份比较全的颜色名列表。但是能用名称表示的颜色十分有限，多数情况还是需要用颜色值表示。用十六进制的颜色值表示颜色的方法，是一个#符号后面接着6位十六进制数值，这6位数值每两位为一组，从左至右分别代表红色、绿色和蓝色的强度，#000000代表黑色，#FFFFFF代表白色。有时我们会遇到用三位十六进制数值表示颜色的情况，这是颜色值的缩略表示方式，表示每组颜色的十六进制码两位相同，如#ABC和#AABBCC表示的颜色相同。rgba表示方式除了包含红绿蓝三种颜色强度外还包含不透明度。其中前三个数字表示色值，第四个数字表示透明度。表示色值的数字有效值为0-255的整数或百分比（百分比也可以表示成小数，如50%也可以用0.5表示），表示透明度的数字有效值为0-1的小数。比如rgba(255, 0, 0, 0.5)表示透明度为0.5的红色。

CSS可以通过font属性将多种和文字相关的属性连在一起作为值，这种方式对初学者来说不直观，但对于熟练的人是个节省时间的好办法。

另外不得不再提一下line-height这个属性。对于文字来说，它每行所占据的高度是它的大小决定的，默认情况下两行相邻的文字不会重叠，也不会离得太远。下图展示了通过调整line-height属性使得两行相邻的文字重叠。

调整line-height属性使得两个相邻行的文字重叠

当想让文字在元素中垂直居中时，就可以通过指定line-height与height相同而达到目的1。

1 也可以使用vertical-align属性控制垂直位置。

CSS还可以控制元素的背景颜色和背景图片。背景颜色通过background-color进行控制，值的形式与color属性相同。背景图片通过background-image进行控制，值为url(图片位置)。对于背景图片，往往还要结合background-repeat和background-position使用。前者是控制图片重复的方式，默认是平铺，还可以指定为repeat-x（横向重复）、repeat-y（纵向重复）和no-repeat（不重复）。background-position是控制背景图片的位置，值的形式可以是top、bottom、left、right和center的结合，比如top left为左上角，center left为左侧中间，如果只指定了一个值，则另一个值默认为center。也可以是x% y%的形式，同样是相对于父系元素尺寸的。也可以以像素为单位，如10px 20px为距左侧10像素，上侧20像素。

背景样式还有很多更加丰富的属性，如background-size，这些更加高级的属性留给感兴趣的读者自行研究吧 :)

最后再强调一次，本节只是对CSS的简述，如果想学好CSS还应参考相关更加专业的书籍和资料，本节的作用只是避免没有任何基础的读者阅读后面的内容有障碍。

3.2Browser Actions

Browser Actions将扩展图标置于Chrome浏览器工具栏中，地址栏的右侧。如果声明了popup页面，当用户点击图标时，在图标的下侧会打开这个页面1。同时图标上面还可以附带badge——一个带有显示有限字符空间的区域——用以显示一些有用的信息，如未读邮件数、当前音乐播放时间等。

1 如果没有足够的空间，会在图标的上侧打开。

下面将对Browser Actions中的图标、popup页面、标题和badge做详细介绍。

3.2.1图标

Browser Actions可以在Manifest中设定一个默认的图标，比如：

"browser_action": {
    "default_icon": {
        "19": "images/icon19.png",
        "38": "images/icon38.png"
    }
}

一般情况下，Chrome会选择使用19像素的图片显示在工具栏中，但如果用户正在使用视网膜屏幕的计算机，则会选择38像素的图片显示。两种尺寸的图片并不是必须都指定的，如果只指定一种尺寸的图片，在另外一种环境下，Chrome会试图拉伸图片去适应，这样可能会导致图标看上去很难看。

另外，default_icon也不是必须指定的，如果没有指定，Chrome将使用一个默认图标。

通过setIcon方法可以动态更改扩展的图标，setIcon的完整方法如下：

chrome.browserAction.setIcon(details, callback)

其中details的类型为对象，可以包含三个属性，分别是imageData、path和tabId。

imageData的值可以是imageData，也可以是对象。如果是对象，其结构为{size: imageData}，比如{'19': imageData}，这样可以单独更换指定尺寸的图片。imageData是图片的像素数据，可以通过HTML的canvas标签获取到。

path的值可以是字符串，也可以是对象。如果是对象，结构为{size: imagePath}。imagePath为图片在扩展根目录下的相对位置。

不必同时指定imageData和path，这两个属性都是指定图标所要更换的图片的。

tabId的值限定了浏览哪个标签页时，图标将被更改。

callback为回调函数，当chrome.browserAction.setIcon方法执行成功后，callback指定的函数将被运行。此函数没有可接收的回调结果。

下面来编写一个图标不停旋转的扩展。

首先在Manifest中定义如下browser_action：

"browser_action": {
    "default_icon": {
        "19": "images/icon19_0.png",
        "38": "images/icon38_0.png"
    },
    "default_title": "Turtle"
}

为了让图标动起来，需要一个background脚本在后台不停地换图标，这个脚本如下：

function chgIcon(index){
    if(index === undefined){
        index = 0;
    }
    else{
        index = index%20;
    }
    chrome.browserAction.setIcon({path: {'19': 'images/icon19_'+index+'.png'}});
    chrome.browserAction.setIcon({path: {'38': 'images/icon38_'+index+'.png'}});
    setTimeout(function(){chgIcon(index+1)},50);
}
chgIcon();

为了达到动态旋转的效果，我们需要制作多张图片连续替换，这和gif的工作原理是一样的。

如果你不想用这种费力的方法，可以只制作两幅图片，分别对应于19像素和38像素两个尺寸，在background中通过canvas绘图来动态改变图片角度，然后输出imageData。感兴趣的读者可以搜索HTML5 canvas了解更多，本文在此不做详细介绍。

本小节编写的扩展源码可以通过https://github.com/sneezry/chrome_extensions_and_apps_programming/tree/master/browser_actions_icon  下载到。

3.2.2Popup页面

Popup页面是当用户点击扩展图标时，展示在图标下面的页面。下图是“网易云音乐（Unofficial）”扩展的popup页面。

“网易云音乐（Unofficial）”扩展的popup页面

Popup页面提供了一个简单便捷的UI接口。由于有时新窗口会使用户反感，而popup页面的设计更像是浏览器的一部分，看上去更加友好，但popup页面并不适用于所有情况。由于其在关闭后，就相当于用户关闭了相应的标签页，这个页面不会继续运行。当用户再次打开这个页面时，所有的DOM和js空间变量都将被重新创建。

所以，popup页面更多地是用来作为结果的展示，而不是数据的处理。通常情况下，如果需要扩展实时处理数据，而不是只在用户打开时才运行，我们需要创建一个在后端一直运行的页面或者脚本，这可以通过manifest.json的background域来声明，具体请参考2.3节所讲述的内容。而popup页面获取后端运行的结果，可以通过扩展内部的通信接口来完成，具体请参考2.5节所讲述的内容。

下面来重点讲述一下popup页面的设计和需要注意的地方。

Popup页面是一个扩展与用户交互的窗口，这个窗口设计的好坏直接会影响到用户的使用体验，所以更应加以重视。

首先，popup页面会根据内容自动显示合适的大小，但还是建议给出页面中body元素的尺寸，主要原因有两点：第一，如果不指定页面尺寸，在用户点击图标的瞬间会打开一个很小的窗口，DOM渲染完毕后页面尺寸才会正常，这个小的细节可能会给用户带来不好的体验；第二，我们也应该设计尺寸可控的页面，这样才能更好地优化布局，同时又不会出现小屏幕设备无法完全显示的情况。考虑到部分小尺寸的上网本，建议popup页面的高度最好不要超过500像素。当然也可以先给出一个默认的500像素高度，之后再通过js获取当前设备屏幕的尺寸后，再决定是否需要更改这个高度。但请注意，一个默认的页面尺寸是必要的。

不要尝试模仿Chrome的原生UI。有的开发者为了使自己的扩展看上去更像Chrome的一部分，而去刻意模仿Chrome的原生UI，这样做并不值得鼓励。首先我们应该让用户一眼就能看出，哪些部分是Chrome自带的功能，哪些部分是来自第三方提供的扩展功能，混淆用户的判断不是一个好主意。另外如果用户使用的不是Chrome的默认主题，这种设计看上去将很不协调。

使用带有滚动条的DIV容器。指定body元素的尺寸后，如果页面内容过长，就会被撑开，导致高度不可控，这可不是我们想要的结果。一个可行的解决办法是通过带有滚动条的DIV容器来防止页面被撑开。通常需要设定DIV容器的高度为100%，overflow-y属性为auto，这样当不需要滚动条时，DIV容器将不会显示滚动条。

设定body高度为200像素后不使用DIV容器和使用DIV容器的对比

设计一个更好的滚动条样式。每款浏览器都有自己默认的滚动条样式，一般情况下不需要去更改它们——有些浏览器也不允许我们去更改，但对于扩展的popup页面则是另外一回事了。首先我们并不是在设计一个网站，而是在设计一款程序，滚动条作为程序的一部分，应尽量和程序的整体风格保持一致；再者，Chrome默认的滚动条，对尺寸有限的popup页面来说显得过于臃肿。“网易云音乐（Unofficial）”扩展就有一个自定义的滚动条样式，这要比直接使用默认的滚动条强上百倍。关于如何通过CSS来自定义webkit内核浏览器的滚动条样式，可以通过http://css-tricks.com/custom-scrollbars-in-webkit/了解更多。

考虑屏蔽右键菜单。如果你是一个追求尽善尽美的开发者，也许不希望用户在你的扩展页面上点击右键时，会出现Chrome的默认菜单，取而代之的应该是你自己设计的菜单。你要做的就是屏蔽掉右键，同时通过DIV浮动层模拟出一个自己的菜单。但需要注意的是，由于这个模拟的菜单还是在popup窗口之内的DOM元素，所以它不会像系统菜单那样可以超越页面边界。在设计这个菜单时要考虑到会不会有部分被遮挡，在用户点击鼠标唤出菜单前，请先让一段代码决定这个菜单适当的显示位置。

使用外部引用的脚本。这并不只是popup页面需要注意的地方，实际上Google在之前较早的某个版本开始，就不再允许HTML和JavaScript写在一个文件里了。所以要通过<script src="script-path/script-name.js"></script>来引用外部的脚本，而不是将JavaScript代码直接写在<script>标签内。

不要在popup页面的js空间变量中保存数据。由于popup页面只在用户点击图标时才会开启，当用户关闭这个页面时就会停止，并没有一个从始至终的实例分配给popup页面。所以每当用户打开popup页面时，它都是崭新的，之前保存在变量中的数据都会消失。如果需要通过popup页面保存用户的数据，可以通过通信将数据交给后台页面处理，或者通过localStorage和chrome.storage将数据保存在用户的硬盘上。

3.2.3标题和badge

将鼠标移至扩展图标上，片刻后所显示的文字就是扩展的标题。

在Manifest中，browser_action的default_title属性可以设置扩展的默认标题，比如如下的例子：

"browser_action": {
    "default_title": "Extension Title"
}

在这个扩展中，默认标题就是“Extension Title”。还可以用JavaScript来动态更改扩展的标题，方法如下：

chrome.browserAction.setTitle({title: 'This is a new title'});

标题不仅仅只是给出扩展的名称，有时它能为用户提供更多的信息。比如一款聊天客户端的标题，可以动态地显示当前登录的帐户信息，如号码和登录状态等。所以如果能合理使用好扩展的标题，会给用户带来更好的体验。

标题我们已经清楚了，那么什么是badge呢？我们来看一幅图：

扩展的标题和badge

上图中，标有“Extension Title”的地方就是扩展标题，而标有“Badg”的地方就是badge。Badge是扩展为用户提供有限信息的另外一种方法，这种方法较标题优越的地方是它可以一直显示，其缺点是只能显示大约4字节长度的信息，这就是为什么上例中显示的是“Badg”而不是“Badge”。

目前来看使用badge比较典型的应用是音乐播放器，它们使用badge显示当前音乐播放的时间；另一些内容类的应用，如邮件、微博、RSS阅读器等，则显示未读条目。无论你打算用badge显示何种信息，请记住它只能显示4字节长度的内容。对于内容类的扩展，当用户未读条目足够多时，一般采用的解决方法是显示“999+”。

Badge目前只能够通过JavaScript设定显示的内容，同时Chrome还提供了更改badge背景的方法。如果不定义badge的背景颜色，默认将使用红色，就是上图显示的那样。

下面的代码显示了一个背景颜色为蓝色，内容为“Dog”的badge：

chrome.browserAction.setBadgeBackgroundColor({color: '#0000FF'});
chrome.browserAction.setBadgeText({text: 'Dog'});

对于背景颜色的设定，设定值可以是十六进制的字符串颜色码，如#FF0000代表颜色；也可以是rgba格式的数组，但需要注意的是其中的alpha变量的取值范围同样为0-255，这与CSS有所区别。

下面的例子使用rgba的定义方式，将背景设置为50%透明度的绿色：

chrome.browserAction.setBadgeBackgroundColor({color: [0, 255, 0, 128]});

最后需要注意的一点，就是badge目前还不支持更改文字的颜色——始终是白色，所以应避免使用浅颜色作为背景。

3.3右键菜单

当用户在网页中点击鼠标右键后，会唤出一个菜单，在上面有复制、粘贴和翻译等选项，为用户提供快捷便利的功能。Chrome也将这里开放给了开发者，也就是说我们可以把自己所编写的扩展功能放到右键菜单中。

要将扩展加入到右键菜单中，首先要在Manifest的permissions域中声明contextMenus权限。

"permissions": [
    "contextMenus"
]

同时还要在icons域声明16像素尺寸的图标，这样在右键菜单中才会显示出扩展的图标。

"icons": {
    "16": "icon16.png"
}

Chrome提供了三种方法操作右键菜单，分别是create、update和remove，对应于创建、更新和移除操作。

通常create方法由后台页面来调用，即通过后台页面创建自定义菜单。如果后台页面是Event Page，通常在onInstalled事件中调用create方法。

右键菜单提供了4种类型，分别是普通菜单、复选菜单、单选菜单和分割线，其中普通菜单还可以有下级菜单。连续相邻的单选菜单会被自动认为是对同一设置的选项，同时单选菜单会自动在两端生成分割线。下面的代码生成了一系列的菜单：

chrome.contextMenus.create({
    type: 'normal',
    title: 'Menu A',
    id: 'a'
});
chrome.contextMenus.create({
    type: 'radio',
    title: 'Menu B',
    id: 'b',
    checked: true
});
chrome.contextMenus.create({
    type: 'radio',
    title: 'Menu C',
    id: 'c'
});
chrome.contextMenus.create({
    type: 'checkbox',
    title: 'Menu D',
    id: 'd',
    checked: true
});
chrome.contextMenus.create({
    type: 'separator'
});
chrome.contextMenus.create({
    type: 'checkbox',
    title: 'Menu E',
    id: 'e'
});
chrome.contextMenus.create({
    type: 'normal',
    title: 'Menu F',
    id: 'f',
    parentId: 'a'
});
chrome.contextMenus.create({
    type: 'normal',
    title: 'Menu G',
    id: 'g',
    parentId: 'a'
});

上面的代码生成的菜单如下图所示。

自定义右键菜单

我们还可以定义自定义的右键菜单在何时显示，比如当用户选择文本时，或者在超级链接上单击右键时。下面的代码定义当用户在超级链接上点击右键时，在菜单中显示“My Menu”菜单：

chrome.contextMenus.create({
    type: 'normal',
    title: 'My Menu',
    contexts: ['link']
});

contexts域的值是数组型的，也就是说我们可以定义多种情况下显示自定义菜单，完整的选项包括all、page、frame、selection、link、editable、image、video、audio和launcher，默认情况下为page，即在所有的页面唤出右键菜单时都显示自定义菜单。其中launcher只对Chrome应用有效，如果包含launcher选项，则当用户在chrome://apps/或者其他地方的应用图标点击右键，将显示相应的自定义菜单。需要注意的是，all选项不包括launcher。

有时我们不仅想在特定的情况下显示自定义菜单，还希望限定URL，chrome同样提供了匹配URL的选项。documentUrlPatterns允许限定页面的URL，比如我们可以限定只在Google的网站上显示自定义菜单；targetUrlPatterns和documentUrlPatterns差不多，但它所限定的不是标签的URL，而是诸如图片、视频和音频等资源的URL。

如果在创建菜单时，定义了onclick域，则菜单被点击后就会调用onclick指定的函数。调用的函数会接收到两个参数，分别是点击后的相关信息和当前标签信息。点击后的相关信息包括菜单id、上级菜单id、媒体类型（image、video或audio）、超级链接目标、媒体URL、页面URL、框架URL、选择的文字、是否可编辑（只针对text input和textarea等控件）、用户点击前是否被选中和当前是否被选中（只针对checkbox或radio）。完整的信息结构可以通过http://developer.chrome.com/extensions/contextMenus#type-OnClickData查看。

update方法可以动态更改菜单属性，指定需要更改菜单的id和所需要更改的属性即可。remove方法可以删除指定的菜单，removeAll方法可以删除所有的菜单。

下面我们来创建一个通过右键菜单使用Google翻译当前用户所选文本的扩展。我们希望只有当用户选择了文本才显示这个菜单，所以要将contexts的值设为selection。

chrome.contextMenus.create({
    type: 'normal',
    title: '使用Google翻译……',
    id: 'cn',
    contexts: ['selection']
});

下面来编写调用的函数。Google翻译可以通过http://translate.google.com.hk/#auto/zh-CN/{翻译文本}调用，所以只需要获取用户所选择的文本，同时打开这个URL就可以了。

function translate(info, tab){
    var url = 'http://translate.google.com.hk/#auto/zh-CN/'+info.selectionText ;
    window.open(url, '_blank');
}

现在我们把create函数补充完整，把调用函数添加进去：

chrome.contextMenus.create({
    type: 'normal',
    title: '使用Google翻译……',
    contexts: ['selection'],
    id: 'cn',
    onclick: translate
});

最后把这段代码写进background.js中，让扩展在浏览器启动后自动执行就可以了。

Google翻译扩展

但我们发现这样无法在菜单中动态显示用户所选择的内容，那么如何动态显示诸如用Google翻译“XXX”这样的菜单呢？首先要获取用户所选择的文本，可以通过下面的代码来实现：

window.onmouseup = function(){
    var selection = window.getSelection();
    if(selection.anchorOffset != selection.extentOffset){
        //do something
    }
}

那么这段代码在background中执行会成功吗？显然不能，因为background和当前页面并不在一个空间中，所以我们需要用content_script来注入脚本，对content_script不了解的读者可以参考2.1节的内容。content_script获取到用户所选文字后，就可以通过2.5节所讲述的内容，传递给后台页面。

改进后的Google翻译扩展

由于改进的部分不是本章的重点，所以就不详细讲解了，大家可以参考前面的章节1。完整的代码可以通过https://github.com/sneezry/chrome_extensions_and_apps_programming/tree/master/google_translate下载得到。

1 创建菜单时也可以直接使用%s表示选定的文字。

Chrome还提供了onClicked事件，虽然在create方法中可以指定点击时调用的函数，但对于Event Page只能通过onClicked事件调用函数。Event Page与一般的background类似，但它只按需加载，并不像background那样一直驻守后台。

3.4桌面提醒

之前的章节提到过利用标题和badge向用户提供有限的信息，那么如果需要向用户提供更加丰富的信息怎么办呢？Chrome提供了桌面提醒功能，这个功能可以为用户提供更加丰富的信息。

桌面提醒，图片来自http://developer.chrome.com

要使用桌面提醒功能，需要在Manifest中声明notifications权限。

"permissions": [
    "notifications"
]

创建桌面提醒非常容易，只需指定标题、内容和图片即可。下面的代码生成了标题为“Notification Demo”，内容为“Merry Christmas”，图片为“icon48.png”的桌面提醒窗口。

var notification = webkitNotifications.createNotification(
    'icon48.png',
    'Notification Demo',
    'Merry Christmas'
);

桌面系统窗口创建之后是不会立刻显示出来的，为了让其显示，还要调用show方法：

notification.show();

需要注意的是，对于要在桌面窗口中显示的图片，必须在Manifest的web_accessible_resources域中进行声明，否则会出现图片无法打开的情况：

"web_accessible_resources": [
    "icon48.png"
]

如果希望images文件夹下的所有png图片都可被显示，可以通过如下声明实现：

"web_accessible_resources": [
    "images/*.png"
]

桌面提醒窗口提供了四种事件：ondisplay、onerror、onclose和onclick。

除了用户主动关闭桌面提醒窗口外，还可以通过cancel方法自动关闭。下面的代码可以实现5秒后自动关闭窗口的效果。

setTimeout(function(){
    notification.cancel();
},5000);

由于桌面提醒界面可能将不再支持引入JS脚本，桌面提醒窗口与其他界面的通信本节不进行讲解。

桌面提醒已经被纳入了W3C草案，相关信息可以访问http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification查看。

除此之外，也可以通过Chrome提供的chrome.notifications方法来创建功能更加丰富的提醒框。

3.5Omnibox

Chrome和其他浏览器相比一个最大的区别就是地址栏——其实不仅仅是地址栏，而是一个多功能的输入框，Google将其称为omnibox（中文为“多功能框”）。我们熟悉的一个功能就是用户可以直接在omnibox搜索关键字，Chrome也将omnibox开放给开发者，这使得omnibox更加强大。

要使用omnibox需要在Manifest的omnibox域指定keyword：

"omnibox": { "keyword" : "hamster" }

同时最好指定一个16像素的图标，当用户键入关键字后，这个图标会显示在地址栏的前端。

"icons": {
    "16": "icon16.png"
}

Chrome会自动将这个图标渲染成灰度图标，而无需开发者指定一个灰度的图标，由于右键菜单等其他地方也会用到16像素的图标，所以应该指定一个彩色的图标。

Omnibox只提供了一个方法，就是setDefaultSuggestion，这个方法用来定义默认建议。对于这个默认建议用文字怎么讲解恐怕都不容易讲清楚，那么不妨来看一看设置了默认建议和不设置默认建议的对比：

未设置默认建议和设置了默认建议的对比

上图中左侧为未设置默认建议，显示为“运行 XXX 命令：XXX”，这样显然看起来不够友好。右侧则用更加友好的方式显示查询当前美元价格。

默认建议会在用户输入keyword之后一直显示在地址栏下方并且紧挨着地址栏，所以设定一个默认建议是必要的，否则简单地显示“运行 XXX 命令：XXX”会让用户摸不到头脑。

Omnibox有四种事件：onInputStarted、onInputChanged、onInputEntered和onInputCancelled，分别用于监听用户开始输入、输入变化、执行指令和取消输入行为。其中执行指令是指用户敲击回车键或用鼠标点击建议结果。

onInputStarted(function(){console.log('Input started.')});
onInputCancelled(function(){console.log('Input cancelled.')});

上面的代码执行后，用户开始输入和取消输入时，都会在控制台记录相应日志。下面我们重点来讲一讲另外两个事件。

onInputChanged事件所承接的只有一个function类型的参数，这个function参数又有两个承接参数，第一个参数是字符串型，值为用户当前的输入值，第二个参数还是function型，用于返回建议结果，建议的结果为数组型数据，数组中的元素是建议结果对象。

chrome.omnibox.onInputChanged.addListener(function(text, suggest){
    suggest([{
        content: text,
        description: 'Search '+text+' in Wikipedia'
    }]);
});

onInputEntered事件同样只有一个function类型的承接参数，这个function有两个承接参数，第一个是用户输入的值，字符串型，第二个是对结果的建议打开方式，字符串型，但取值范围固定。

chrome.omnibox.onInputEntered.addListener(function(text, disposition){
    switch(disposition){
        case 'currentTab': //do something in the current tab
                 break;
        case 'newForegroundTab': //do something in a new tab and active it
                 break;
        case 'newBackgroundTab': //do something in a new tab
                 break;
    }
});

下面来制作一款实时查询美元价格的扩展。首先通过异步请求获取Yahoo上美元的价格，对这部分不熟悉的读者可以参考前面2.2节的内容。获取到数据后我们就要开始编写提供建议的函数了。

function updateAmount(amount, exchange){
    amount = Number(amount);
    if(isNaN(amount) || !amount){
        exchange([{
            'content': '$1 = ¥'+price,
            'description': '$1 = ¥'+price
        },{
            'content': '¥1 = $'+(1/price).toFixed(6),
            'description': '¥1 = $'+(1/price).toFixed(6)
        }]);
    }
    else{
        exchange([{
            'content': '$'+amount+' = ¥'+(amount*price).toFixed(2),
            'description': '$'+amount+' = ¥'+(amount*price).toFixed(2)
        },{
            'content': '¥'+amount+' = $'+(amount/price).toFixed(6),
            'description': '¥'+amount+' = $'+(amount/price).toFixed(6)
        }]);
    }
}
var url = 'http://query.yahooapis.com/v1/public/yql?'+
          'q=select%20Rate%20from%20'+
          'yahoo.finance.xchange%20'+
          'where%20pair%20in%20(%22USDCNY%22)&'+
          'env=store://datatables.org/alltableswithkeys&'+
          'format=json';
var price;
httpRequest(url, function(r){
    price = JSON.parse(r);
    price = price.query.results.rate.Rate;
    price = Number(price);
});
chrome.omnibox.onInputChanged.addListener(updateAmount);

大家可以对照前面所讲解的部分来看这段代码，代码中的每个部分都与前面的讲解有所对应。接下来编写用户执行指令时所运行的函数。

function gotoYahoo(text, disposition){
    window.open('http://finance.yahoo.com/q?s=USDCNY=X');
}
chrome.omnibox.onInputEntered.addListener(gotoYahoo);

此例中并没有理会disposition的取值，Chrome官方也指出disposition只是给出结果呈现的建议方式，而非必须遵循的方式，所以是否理会这个值由你自己说了算。

最后就像前面所说的那样，记得设定一个默认的建议，这样会使你的扩展看起来更加友好。

前面讲解默认建议的截图就是这个例子运行的结果，所以在此就不重复贴图了。本例的完整代码可以通过https://github.com/sneezry/chrome_extensions_and_apps_programming/tree/master/usd_price  下载，载入扩展后在浏览器地址栏中输入“usd”后按空格键或Tab键就可以使用。

3.6Page Actions

Page Actions与Browser Actions非常类似，除了Page Actions没有badge外，其他Browser Actions所有的方法Page Actions都有。另外的区别就是，Page Actions并不像Browser Actions那样一直显示图标，而是可以在特定标签特定情况下显示或隐藏，所以它还具有独有的show和hide方法。

chrome.pageAction.show(integer tabId);
chrome.pageAction.hide(integer tabId);

tabId为标签id，可以通过tabs接口获取，有关tab相关的内容将在后面进行讲解。

由于Page Actions和Browser Actions有大量相似之处，在此就不详细介绍了，还请读者参照前面3.2节的内容。

-----------------------------------------------------
转载请注明来源此处
原地址：#