Chrome（谷歌）浏览器扩展开发初探

        FF（火狐）浏览器插件已经完成了，确实也很好用，但是有些同学不习惯使用ff浏览器，喜欢使用谷歌浏览器，点击这里查看上篇问题。那么我们就开发一个chrome的扩展，实现订餐功能。
        在FF浏览器扩展中，我们使用xul定义FF的界面，使用javascript实现处理逻辑，在谷歌浏览器中，我们同样不需要学习activeX,也不需要学习com，只是使用html和javascript即可实现开发谷歌浏览器扩展的功能，只是为了简单起见，我们这次手动点击按钮，出发订餐操作。
         第一步先学习下谷歌插件知识，推荐两篇不错的问题Chrome插件开发之一: 搭建基本结构http://gdfans.net/?p=14&cpage=1，Chrome插件开发之二: 添砖加瓦http://gdfans.net/?p=210  。 相对于firefox浏览器，谷歌浏览器的扩展开发简单的很多。关于基本入门上面两篇文章已经介绍的很详细了。这里顺便说下谷歌扩展管理方面的东东。你可以通过工具-》扩展程序来管理你的扩展，新开发的扩展可以通过

里面的“载入正在开发的扩展程序…”来打开正在开发扩展的目录，即可在扩展程序中管理你的程序。开发完成后，也不用像FF扩展那样需要手工打成zip，再修改为xpi后缀。而在谷歌浏览器中，只需要按下“打包扩展程序”即可完成打包，打的包会有两个，crx后缀的为打包文件，可以直接交给别人安装，pem是私钥文件，下次打包的时候使用。
有了以上知识，我做出来的谷歌浏览器扩展是这个样子的

点击“订”按钮触发登陆网站并执行操作，详细代码点击此处获得。

附上两篇介绍谷歌浏览器扩展的文章

1. 文件列表

本文引用项目 urlcmt 作为开发示例（urlcmt是一个可以对任意网页进行评论的Chrome插件，你可以下载源代码，或安装此插件），为了让插件正常工作，至少需要这几个文件：

它们的作用分别是：

  • icon.png: 插件工具栏图标
  • manifest.json: 控制整个插件行为的配置文件
  • popup.html: 点击插件图标后弹出的窗口，是插件的主界面

如果希望插件具有更加合理的结构和功能，则还可以有以下文件：

他们的作用分别是：

  • imgs: 存放插件界面图片
  • background.html: 在此运行的代码不会因为popup.html窗口消失而停止运行
  • icon_128.png: 在插件描述中作为插件的Logo
  • main.css: 插件界面元件的样式表
  • main.js: 插件中可以使用的js函数

2. 文件说明

manifest.json 为整个插件的主控文件，基本功能描述如下：

01 {
02     "name": "urlcmt",
03     "version": "1.0",
04     "description": "网页评论 Comment the web !",
05     "default_locale": "zh_CN",
06     "browser_action": {
07         "default_icon": "icon.png",
08         "popup": "popup.html"
09     },
10     "icons": {
11         "128": "icon_128.png"
12     },
13     "permissions": [
14         "tabs",
15         "http://api.gdfans.net/"
16     ]
17 }

其中：

  • 第2行: 所有代码思想的核心，它就是插件的名称！
  • 第3行: 插件版本，发布插件时会生成一串密文，那时会用到
  • 第4行: 描述信息，会显示在插件属性里
  • 第5行: 默认编码为中文
  • 第7行: 指定插件图标的路径
  • 第8行: 指定 popup.html 文件的路径
  • 第11行: 指定 128 像素大小的图标的路径
  • 第14行: 此权限支持读取标签（tab）中的信息
  • 第15行: 此权限支持向 http://api.gdfans.net/ 发送 Ajax 请求

popop.html 为整个插件的界面，代码如下：

01 <!DOCTYPE html>
02 <metahttp-equiv="Content-Type"content="text/html;
charset=UTF-8"/>
03 <linkrel="stylesheet"href="main.css"/>
04 <scripttype="text/javascript"src="./url.js"></script>
05 <scripttype="text/javascript"src="./main.js"></script>
06  
07 <bodyonload="init()">
08     <divid="pop_msg"class="align_center
colo_aaa valign_center"></div>
09     <divclass="submit_form align_center">
10         <formid="cmt_submit_form"onsubmit="submit_cmt();return
false;"action="#"method="POST">
11             <textarearows="1"cols="6"id="cnt"class="align_left"onfocus="show_submit_form();"maxlength="200"></textarea>
12             <br/>
13             <divclass="align_right">
14                 <inputtype="submit"id="sbmt"value="submit">
15             </div>
16         </form>
17     </div>
18     <divid="cmt_cnt"></div>
19 </body>

这里注意：

  • 第1行: 加上这个以后，显示插件界面时，不会在底部出现一大片空白区域
  • 其余都和普通 web 页面开发相同，空的 div 供 Ajax 填充从服务端获取的数据

3. 实现功能 – 插件初始化

有了 manifest.json 和 popup.html，就可以实现最基本的 hello world 的功能了，接下来需要为插件增加其它功能，这些功能可以用 Javascript & Ajax 实现，对此项技术不太熟悉的同学，请点击这里 查阅 w3c school 里的教程。

这些 Javascript & Ajax 代码可以写在 main.js 中，因为不仅 popup.html 要用到，后续要介绍的 background.html 中也要用到，所以为了重用起见，还是放在单独的文件里比较好。main.js 中可以包含一个 init() 函数，用以进行插件的初始化工作

1 function init()
2 {
3     // 隐藏编写评论的表单，以增大页面的可用区域
4     hide_submit_form();
5     // 从服务端获取当前网页的评论数据，并显示在界面上
6     refresh_cmt_cnt(1);
7 };

然后在 popup.html 的 body 标签中，加上

1 <bodyonload="init()">

即可。

4. 实现功能 – 调用 Chrome API

Chrome为插件提供了可以通过 Javascript 调用的 API，在插件的 Js 代码可以直接使用，例如想获取当前标签中的 URL 地址，并向服务端发送 Ajax 请求获取这个 URL 对应的评论信息，可以这么写：

01 function refresh_cmt_cnt(page_no)
02 {
03     // 创建 Ajax 请求对象
04     varxhr =newXMLHttpRequest();
05  
06     // 使用Chrome提供的tab接口获取当前选中的tab的信息
07     chrome.tabs.getSelected(null,function(tab) {
08         // 当 getSelected 函数执行成功以后会执行到这里
09         varcmt_cnt_obj = document.getElementById("cmt_cnt");
10  
11         // 构造 POST 数据，可以通过 tab.url 来获取标签的 URL 地址
12         // encodeURIComponent 函数用来转义特殊字符以免发生冲突
13         // 在服务端可以用 PHP 函数 urldecode 再转义回来
14         varpost_data ='cmd=1505&alt=json&url='+
15                         encodeURIComponent(tab.url) +
16                         '&page_size=5&page_no='+ page_no;
17  
18         // 指定提交的目标地址
19         xhr.open("POST","http://api.gdfans.net/",
20                  true);
21         xhr.setRequestHeader("Content-Type",
22                              "application/x-www-form-urlencoded");
23  
24         xhr.onreadystatechange =function() {
25             if(xhr.readyState == 4) {
26                 // 当 Ajax 请求接收完所有返回数据时会执行到这里
27                 // 因为服务端返回的数据为 json 格式，因此使用前需要解析以下
28                 varresp = JSON.parse(xhr.responseText);
29                 if(! resp) {
30                     show_popmsg(null,'获取数据失败', 3);
31                     returnfalse;
32                 }
33  
34                 // 解析完成以后就可以读取返回的数据了
35                 if(resp.result == 1501) {
36                     clear_popmsg();
37                     returnfalse;
38                 }
39  
40                 // 将数据显示在页面上
41                 for(varkeyin
resp.data) {
42                     htmltxt += resp.data[key]['cmt'] +', ';
43                 }
44  
45                 cmt_cnt_obj.innerHTML = htmltxt +"\n";
46             }
47         }
48  
49         // 发送 Ajax 请求，Ajax 执行成功以后会调用上面介绍的代码
50         xhr.send(post_data);
51     });
52  
53     returntrue;
54 }

至此一个可以从服务端获取 URL 评论数据的简单插件就制作完成了，只要你熟悉 Web 开发，开发 Chrome 插件就是小菜一碟～
好了，休息一会，接下来的文章再继续分享其它内容 ^-^

接着上一篇文章《Chrome插件开发之一：搭建基本结构》开始说起，有了基本结构，urlcmt的基本功能已经实现了，接下来需要对插件进行完善和修饰，下面介绍一些基本结构以外的内容。

1. 关于Background.html

popup.html中定义的Javascript变量会在popup.html页面关闭时被释放，那么如何保存一些一直需要使用的变量呢？这就是background.html的作用，background.html页面中定义的javascript变量会在Chrome浏览器生命期中一直存在，可以把需要一直存在的数据保存在这里。

那么我们如何在background.html中保持popup.html页面中的数据呢？可以这么写，先在background.html中定义好变量，例如以下保存用户登录信息的变量

1 var global_email ="";
2 var global_passwd ="";

然后在popup.html中用以下方式来引用这些变量，可以改变或者读取变量的值

1 var bgpg = chrome.extension.getBackgroundPage();
2 bgpg.global_email = "somebody@domain.com";
3 bgpg.global_passwd = "password";

2. 将数据保存在磁盘

Chrome本身没有提供用于保存变量的值的接口，不过可以通过Javascript操作Cookie保存数据，另外还有一种更加方便的保存数据方式，那就是使用HTML5的localStorage功能保存数据，这也是Chrome插件开发手册中推荐的方式，例如我们希望保存刚才在background.html中定义的用户登录信息，只需要执行以下代码即可

1 localStorage['email'] = golbal_email;
2 localStorage['passwd'] = global_passwd;

这样就算关闭了Chrome浏览器，用户的登录数据还是一样不会丢失，下次启动Chrome浏览器时，只需要执行以下代码就又可以获取这些登录数据了

1 global_email = localStorage['email'];
2 global_passwd = localStorage['passwd'];

3. 插件图标右下角的数字

经常可以看见某些插件会在插件图标的右下角显示数字，可以很直观的看到一些信息，还是非常有用的，Chrome插件开发文档称这个数字为badge，可以翻译成徽章的意思。
如果想为自己的Chrome添加这个badge，可以使用以下代码

1 // 在插件图标的右下角显示数字3
2 chrome.browserAction.setBadgeText({text: ‘3’});

有了上面介绍的这些功能，插件能提供的服务就又进了一步，好了，今天的分享就到这里，下次再介绍Chrome插件开发的其它内容。

参考资料
Chrome插件开发之一: 搭建基本结构http://gdfans.net/?p=14&cpage=1
Chrome插件开发之二: 添砖加瓦http://gdfans.net/?p=210http://gdfans.net/?p=210
Tutorial Google chrome Extentsionshttp://code.google.com/chrome/extensions/getstarted.html

时间： 2024-11-06 17:31:38

Chrome（谷歌）浏览器扩展开发初探的相关文章

Firefox（火狐）浏览器扩展开发初探

        最近开发一个FF的扩展,自动完成公司的订餐操作,主要完成的功能很简单:登陆网站,执行一个特定操作,并在ff的状态栏内显示执行的成功或者失败的状态.以前没有写过FF扩展,需要从头学习,在完成这个扩展过程中,有些收获记录下来,一方面自己记录,另一方面也方便有此需求的同学.在整个开发过程中碰到一些问题,也走了一些弯路,希望对其他同学有所帮助.         由于是第一开发FF扩展,没什么经验,所以,第一步先去搜索些关于FF插件开发的文档.先几乎把所有关于FF插件开发的中文文档看个边,

IE（微软）浏览器扩展开发初探

         最近开发浏览器插件有点上瘾,先开发了一个FF(火狐)浏览器插件,后来又开发了一个谷歌浏览器的插件,还是不觉得不过瘾,这次要尝试开发一个粗糙的IE浏览器插件,最终实现在一键实现订餐,一键取消订餐操作.          凡事知道就好做了,只是这次走了些弯路.网上只要提到IE插件开发的无不提到Com,BHO等等概念,为此我还下载了vs2010,安装platform sdk,并到codeproject下载N个例子进行研究,虽然已经好几年不用vs2010了,也不曾在写com了,还好有点

谷歌Chrome浏览器扩展程序开发小记_javascript技巧

根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一样的,每次都要一个个估算这个月的大概工作时间,十分不方便.后来看到公司有人在用一个Chrome扩展程序,可以计算出一个月的工作时间,但是我觉得还是没有看到我想看的东西,因为除了每个月的累计工作时间外,我还想看到:平均每天工作时长.每一天的工作时长.20点以后的天数(20点以后下班的可以报销晚饭的,哈

谷歌将阻止用户被引诱安装Chrome浏览器扩展

谷歌 Chrome 浏览器有一个名为"inline install"的方便功能,让用户直接从开发者网站上安装扩展,而无需去谷歌网上商店安装 Chrome 浏览器扩展.不幸的是,此项功能已经被攻击者滥用,他们以提供软件更新为名来诱骗用户安装一个恶意扩展,以显示付费广告.对此,谷歌表示它正在努力结束对这种功能的滥用问题. 谷歌已经停止不通过网上商店来安装浏览器扩展的功能.如果谷歌检测到一个广告试图安装Chrome浏览器扩展,它会禁用内嵌安装,并迫使它们重定向到Chrome网上应用商店,来先

JavaScript开发Chrome浏览器扩展程序UI的教程_javascript技巧

基本知识 1.插件文件结构 1.1.manifest.json每一个扩展.可安装的WebApp.皮肤,都有一个JSON格式的manifest文件,里面存放重要的插件相关信息. 一个最基本的配置例子: { "name": "browser action demo", "version": "1.0", "permissions": [ "tabs", "http://*/*&qu

创建您自己的浏览器扩展：将您的触角延伸至Chrome

开始之前 对于本文,您需要下载和安装 Google Chrome V19 或更高版本(本文示例是基于 V19 的 ).您也需要一些可以编辑 HTML.CSS 和 JavaScript 的工具.如果您有使用 Chrome 或者 Chrome 扩展的 经验将会很有帮助的.花一点时间浏览 Chrome Web Store.看看提供的扩展并先行试用一番,这将为本文提 供一些相关背景. 为什么构建浏览器扩展? 您想要构建一个浏览器扩展有几个原因,浏览器扩 展的常见应用是在一个浏览器和另一应用程序或服务之间

EXT.NET高效开发（三）——使用Chrome浏览器的开发人员工具

    这篇帖子老少皆宜,不分男女,不分种族,不分职业.俗话说:"磨刀不误砍柴工".掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力).本篇就讲述如何利用Chrome浏览器(这里讲述的版本是14.0.835.2)的开发工具(因为IE浏览器的开发工具实在不敢恭维,不过大部分功能还是健全的).之所以使用Chrome浏览器,是因为对它情有独钟吧.Chrome浏览器的开发工具是一个比较强大的工具,主要包括以下面板: 元素 (Elements) 面板 资源 (Res

chrome扩展开发其他地方调用sendmessage里的response

问题描述 chrome扩展开发其他地方调用sendmessage里的response var sysconfig={}; chrome.runtime.sendMessage({type : 'getload'}, function(response){ sysconfig=response.configs; console.log(sysconfig);//可以打印出来 }); console.log(system);///打印为空对象 background.js里是 case 'getloa

基于.net开发chrome核心浏览器【五】

原文:基于.net开发chrome核心浏览器[五] 一:本篇将解决的问题 本章主要为了解决一下几个问题: 1.JsDialog的按钮错位的问题 我们开发出的浏览器,在有些操系统上调用alert,confirm之类的对话框时,确定和取消按钮会出现错位的情况 2.右键菜单问题 我们开发的浏览器,在网页上点右键,会出现一些讨厌的英文菜单. 3.打印的问题 我们开发的浏览器,网页在调用window.print的时候,没有任何反应. 4.打开chrome的调试器 谷歌浏览器调试网页的调试器非常好用,我们开