Chrome扩展开发指南(3)——Browser Action(扩展图标)

cuso4321 2010-04-13

展开全文

Chrome扩展开发指南(3)——Browser Action(扩展图标)

这是扩展开发指南的第三篇，前面我们首先作了第一个扩展，然后学习了Chrome扩展的大概结构，看完后可能会有些迷惑，别担心，相信随着我们学习的深入，我们渐渐发现我们已经可以做扩展了。当然为了做出优秀的扩展，我们还需要学习一些HTML、CSS、JavaScript的基础知识，http://www.w3school.com.cn/网站就不错。

今天的文章翻译自http://code.google.com/chrome/extensions/browserAction.html，介绍Browser Action，即右侧的扩展图标。这节的内容还是挺有趣的。(同样，有翻译需要改进的地方请指出来)

Browser Actions的作用就是控制Chrome地址栏右侧添加一个图标。除了给chrome增加一个图标的功能外，还可以设置提示文字、图标标记、弹出窗口。

下图中，在地址栏右侧的彩色图标就是一个Browser Action。

Browser Actions创建的图标是一直可见的，如果你想创建一个不是一直不可见的图标，可以使用page action。

Browser Action在Manifest文件中的位置

下面是个在扩展的manifest文件中注册browser action的例子：

{
"name": "My extension",
...
"browser_action": {
"default_icon": "images/icon19.png", // required
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
...
}

复制代码

UI部分

Browser Action必须有一个图标。同时还可以有提示文字、图标标记、弹窗。

图标

Browser Action的图标会被浏览器缩放成19px*19px大小，太大的图标是没有意义的。

你可以用两种方法定义图标：用一个静态图片，或者用HTML中的canvas元素。用静态图片的话简单些，但是用canvas元素可以创建更加平滑的图片。

静态图片可以是任意常见格式的图片，包括BMP, GIF, ICO, JPEG, or PNG。

我们可以在manifest文件中用default_icon语句来定义这个图标，也可以调用setIcon()函数。

提示文字

提示文字是指将鼠标移到扩展图标上显示的文字。我们可以在manifest中用default_title定义，也可以通过调用setTitle()函数。

图标标记

图标标记是指覆盖在扩展图标上的一些文字，比如Gmail提醒图标上未读邮件数，PR查询工具上PR值。由于标记的位置很小，他最多只能容纳4个字母。

设置标记文字或者背景可以分别使用 setBadgeText() and setBadgeBackgroundColor()。

弹窗

当我们点击一些扩展的时候，会发现有个小弹窗出现,比如我们一开始的例子中。这个弹窗可以包含任何HTML内容，他的大小也是和内容自适应的。

给Browser Action增加弹窗可以在manifest的default_popup定义弹窗中显示的html文件名字，当然也可以使用setPopup()函数。

几个小提醒

为了扩展更加美观，请遵守下列守则：

仅在这个扩展需要在大部分页面运行的时候才使用browser action

仅在小部分页面起作用的话就不要用browser action，而是用page actions。

使用显眼的图标

不要试图模仿chrome浏览器原有的扳手/页面图标，你的扩展要独特一些。

你的图标边缘应该使用alpha透明，这样的话可以融合到各种不同的浏览器主题里。

例子解析

激动人心的时候来了，在这个文件夹下examples/api/browserAction有些browser action的例子。其中有个set_page_color，我们试着重新编写他。

首先我们知道，首先新建一个文件夹myExtension用来存放所有文件，我们知道每个Chrome扩展需要有个manifest.json文件来描述这个扩展，新建文件manifest.json，用文本编辑器打开，输入：

{
"name": "我的扩展实例",
"version": "1.0",
"browser_action": {
"default_title": "Set this page's color.",
"default_icon": "icon.png",
"popup": "popup.html"
}
}

复制代码

这是一个很简单的manifest.json文件模板，其中browser_action就是这篇文章降到的东西，default_title是描述，default_icon是图标，popup是弹窗。这里的弹窗调用了popup.html文件，我们再创建一个文件popup.html，popup.html是个普通的HTML文件，内容如下：

<style>
body {
overflow: hidden;
margin: 0px;
padding: 0px;
background: white;
}
div:first-child {
margin-top: 0px;
}
div {
cursor: pointer;
text-align: center;
padding: 1px 3px;
font-family: sans-serif;
font-size: 0.8em;
width: 100px;
margin-top: 1px;
background: #cccccc;
}
div:hover {
background: #aaaaaa;
}
#red {
border: 1px solid red;
color: red;
}
#blue {
border: 1px solid blue;
color: blue;
}
#green {
border: 1px solid green;
color: green;
}
#yellow {
border: 1px solid yellow;
color: yellow;
}
</style>
<script>
function click(color) {
chrome.tabs.executeScript(null,
{code:"document.body.style.backgroundColor='" + color.id + "'"});
window.close();
}
</script>
<div onclick="click(this)" id="red">red</div>
<div onclick="click(this)" id="blue">blue</div>
<div onclick="click(this)" id="green">green</div>
<div onclick="click(this)" id="yellow">yellow</div>

复制代码

这个文件的内容有三种语言，HTML、CSS、JavaScript，这三种语言组成一个基本的网页，如果你还不是很清楚的话可以以后慢慢学些。其中调用了Chrome接口函数chrome.tabs.executeScript，也是以后会看到的。整个文件的意思是：1、显示四格不同颜色的矩形框，2、当点击这些矩形框的时候变换页面背景色。

我们还需要一个图标显示在工具栏上，把这个图片保存到文件夹中。

好了，我们的扩展制作完成了，载入他们测试一下吧!

如果有一些JavaScript知识，可以修改这些扩展，创建一些丰富多彩的效果。

比如把popup.html中的

function click(color) {
chrome.tabs.executeScript(null,
{code:"document.body.style.backgroundColor='" + color.id + "'"});
window.close();
}
</script>
<div onclick="click(this)" id="red">red</div>
<div onclick="click(this)" id="blue">blue</div>
<div onclick="click(this)" id="green">green</div>
<div onclick="click(this)" id="yellow">yellow</div>

复制代码

换成

function click(color) {
chrome.tabs.executeScript(null,
{code:"document.getElementById('lg').getElementsByTagName('img')[0].src='" + color.title + "'"});
window.close();
}
</script>
<div onclick="click(this)" id="red" title="http://www./intl/zh-CN/images/logo_cn.gif">Google</div>
<div onclick="click(this)" id="blue">blue</div>
<div onclick="click(this)" id="green">green</div>
<div onclick="click(this)" id="yellow">yellow</div>