Chrome插件开发之一: 搭建基本结构

àì夳堔傛蜴生んèń 2022-09-27 00:30 10阅读 0赞

本文章引自 ：[http://gdfans.net/?p=14&cpage=1\#comment-695][http_gdfans.net_p_14_cpage_1_comment-695]

欢迎喜爱Chrome的谷友进入Chrome插件开发的世界！

你很幸运，因为Chrome插件开发是如此简单，你不需要明白什么是ActiveX，不需要知道什么叫COM，嗯，让他们一边凉快去吧，这里只有HTML & Javascript，这里是互联网的世界！

首先，会英文的同学请浏览一下官方开发文档～：

[http://code.google.com/chrome/extensions/getstarted.html][http_code.google.com_chrome_extensions_getstarted.html]

本系列博文主要分享开发重点，具体细节不一一赘述（PS：若无法访问，请f-a-n, q-i-a-n-g……）

## 1. 文件列表 ##

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

[![Chrome插件基本结构][Chrome]][Chrome]

它们的作用分别是：

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

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

[![Chrome插件的额外文件][Chrome 1]][Chrome 1]

他们的作用分别是：

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

## 2. 文件说明 ##

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

\{ "name": "urlcmt", "version": "1.0", "description": "网页评论 Comment the web !", "default\_locale": "zh\_CN", "browser\_action": \{ "default\_icon": "icon.png", "popup": "popup.html" \}, "icons": \{ "128": "icon\_128.png" \}, "permissions": \[ "tabs", "http://api.gdfans.net/" \] \}

其中：

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

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

<!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="main.css" mce\_href="main.css" /> <mce:script type="text/javascript" src="./url.js" mce\_src="url.js"></mce:script> <mce:script type="text/javascript" src="./main.js" mce\_src="main.js"></mce:script> <body οnlοad="init()"> <div id="pop\_msg" class="align\_center colo\_aaa valign\_center"></div> <div class="submit\_form align\_center"> <form id="cmt\_submit\_form" οnsubmit="submit\_cmt();return false;" action="\#" method="POST"> <textarea rows="1" cols="6" id="cnt" class="align\_left" οnfοcus="show\_submit\_form();" maxlength="200">

这里注意：

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

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

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

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

function init() \{ // 隐藏编写评论的表单，以增大页面的可用区域 hide\_submit\_form(); // 从服务端获取当前网页的评论数据，并显示在界面上 refresh\_cmt\_cnt(1); \};

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

即可。

## 4. 实现功能 – 调用 Chrome API ##

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

function refresh\_cmt\_cnt(page\_no) \{ // 创建 Ajax 请求对象 var xhr = new XMLHttpRequest(); // 使用Chrome提供的tab接口获取当前选中的tab的信息 chrome.tabs.getSelected(null, function(tab) \{ // 当 getSelected 函数执行成功以后会执行到这里 var cmt\_cnt\_obj = document.getElementById("cmt\_cnt"); // 构造 POST 数据，可以通过 tab.url 来获取标签的 URL 地址 // encodeURIComponent 函数用来转义特殊字符以免发生冲突 // 在服务端可以用 PHP 函数 urldecode 再转义回来 var post\_data = 'cmd=1505&alt=json&url=' + encodeURIComponent(tab.url) + '&page\_size=5&page\_no=' + page\_no; // 指定提交的目标地址 xhr.open("POST", "http://api.gdfans.net/", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() \{ if (xhr.readyState == 4) \{ // 当 Ajax 请求接收完所有返回数据时会执行到这里 // 因为服务端返回的数据为 json 格式，因此使用前需要解析以下 var resp = JSON.parse(xhr.responseText); if (! resp) \{ show\_popmsg(null, '获取数据失败', 3); return false; \} // 解析完成以后就可以读取返回的数据了 if (resp.result == 1501) \{ clear\_popmsg(); return false; \} // 将数据显示在页面上 for (var key in resp.data) \{ htmltxt += resp.data\[key\]\['cmt'\] + ', '; \} cmt\_cnt\_obj.innerHTML = htmltxt + "/n"; \} \} // 发送 Ajax 请求，Ajax 执行成功以后会调用上面介绍的代码 xhr.send(post\_data); \}); return true; \}

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

[http_gdfans.net_p_14_cpage_1_comment-695]: http://gdfans.net/?p=14&cpage=1#comment-695
[http_code.google.com_chrome_extensions_getstarted.html]: http://code.google.com/chrome/extensions/getstarted.html
[urlcmt]: http://code.google.com/p/jasonwang/
[Link 1]: http://code.google.com/p/jasonwang/source/checkout
[Link 2]: https://chrome.google.com/extensions/detail/bmpdbngbmnacnmlkghimfldheehfjgpm?hl=zh-CN
[Chrome]: http://gdfans.net/wp-content/uploads/2010/05/file.png
[Chrome 1]: http://gdfans.net/wp-content/uploads/2010/05/Screenshot.png
[Link 3]: http://www.w3school.com.cn/