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

时间:2021-07-05 17:50:05

 

本文章引自 :http://gdfans.net/?p=14&cpage=1#comment-695

 

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

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

 

首先,会英文的同学请浏览一下官方开发文档~:

http://code.google.com/chrome/extensions/getstarted.html

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

1. 文件列表

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

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

它们的作用分别是:

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

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

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

他们的作用分别是:

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

2. 文件说明

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

 

其中:

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

popop.html 为整个插件的界面,代码如下:

<textarea cols="50" rows="15" name="code" class="javascript">&lt;!DOCTYPE html&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;&lt;link rel="stylesheet" href="main.css" mce_href="main.css" /&gt;&lt;mce:script type="text/javascript" src="./url.js" mce_src="url.js"&gt;&lt;/mce:script&gt;&lt;mce:script type="text/javascript" src="./main.js" mce_src="main.js"&gt;&lt;/mce:script&gt;&lt;body onload="init()"&gt; &lt;div id="pop_msg" class="align_center colo_aaa valign_center"&gt;&lt;/div&gt; &lt;div class="submit_form align_center"&gt; &lt;form id="cmt_submit_form" onsubmit="submit_cmt();return false;" action="#" method="POST"&gt; &lt;textarea rows="1" cols="6" id="cnt" class="align_left" onfocus="show_submit_form();" maxlength="200"&gt;</textarea>


这里注意:

  • 第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() 函数,用以进行插件的初始化工作

 

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

 

即可。

4. 实现功能 – 调用 Chrome API

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

 

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