Chrome扩展开发教程(三)Browser Action(扩展图标)
文章翻译自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",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"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中的
<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>
换成
<script> 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.google.com.hk/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>
在百度主页上打开这个扩展,点击第一个按钮"Google",可以把百度的logo换成google的。
加支付宝好友偷能量挖...