没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Chrome 扩展程序开发调试简明教程
一、加载扩展程序
这里以加载一个已有的 Chrome 扩展程序为例。
把已有的扩展程序(.crx 文件,点击安装扩展程序的确定按钮前可以拷贝保存)后缀改为.zip,就可以把
它解压缩到某个目录,比如 Beyond Feeds Flood。
参见下图,点击“载入正在开发的扩展程序”,浏览到刚才的目录,点击确定,扩展程序就加载进去了(跟
安装的基本一样)。
二、调试扩展程序
扩展程序安装后是这个样子:
如果是调试 background.html,则插件下方“检查活动视图”中就有,点击它就可以调试了。
开发中,经常要调试的是 popup.html,它不是总处于活动中的,需要按如下方式操作:
1、确定 popup.html 的网址。(把下面网址中的 id 部分替换为你的扩展程序 id 即可)
chrome-extension://clobmlkkihhfbohnabllkobmmmdhkcmo/popup.html
2、在浏览器中打开该网址。
打开后就可以看到 popup.html 页面也在活动视图中了:
3、点击上图中的 popup.html,就打开了调试器。
如果有错误信息,点击 console 按钮就可以看到了。
点击错误信息中的位置链接,可以达到出错位置:
这里的错误信息很明显,是 reader1 没有定义。
Chrome 的 Javascript 调试器非常强大,点击左边的行号可以设置断点,可以单步跟踪,鼠标放在变量上
可以查看变量的值。
注:
1、调试中,设置了断点,有时候需要考虑采用一些措施,才会运行到那里,这需要根据你调试的功能以
及如何触发该功能的知识来确定。
2、Google Web Toolkit 是很好的扩展程序调试、优化工具,感兴趣的同学可参考:
http://code.google.com/intl/zh-CN/webtoolkit/speedtracer/get-started.html
三、编写扩展程序
这篇文章不是完整的扩展程序编写指南,它只是介绍如何利用已有的编程知识来编写 Chrome 扩展程序,
所以编写扩展程序这个章节排的比较靠后。
简单说来,Chrome 扩展程序编写主要用到的是 Javascript、Ajax(基于 javascript 的异步通信机制)、
css、html、DOM(以操纵对象的方式控制 html 页面的内容)。
这些知识可以从 http://www.w3school.com.cn/学来,遇到问题多问 Google,基本都能解决。
这里主要根据我的经验写一点扩展开发中可能用到的知识:
(更多详细信息请参考 Chrome 扩展程序开发手册çhttp://code.google.com/chrome/extensions/
getstarted.html)
1、处于活动状态的页面的函数,别的页面可以调用。典型的就是通过下面方式调用 background 页面的
函数:
chrome.extension.getBackgroundPage().markItemsAsRead(itemsToMark);
2、javascript 的赋值,除了基本类型、字符串以外,都是引用赋值。
3、涉及数据存储的,可以保存到 localStorage 中(据说云中还有个数据库也可以用来保存数据)。
4、网上有很多封装得很好的 javascript 库,使用它们有可能能减少工作量,比如我开发 Beyond Feeds
Flood 的时候,就用到了 Date 的一个封装库。
四、发布扩展程序
一般来说,有如下两种发布方式:
1、打包为 crx 文件发布。
命令行执行如下命令即可:
chrome.exe --pack-extension="D:\Projects\Beyond Feeds Flood"
执行完之后,就在 Beyond Feeds Flood 目录平级的地方生成 Beyond Feeds Flood.crx 和私钥文件
Beyond Feeds Flood.pem,私钥文件用于升级软件时使用。
前面提到的扩展程序 id,应该就是根据私钥文件生成的。
重新发布时使用的命令行是:
chrome.exe --pack-extension="D:\Projects\Beyond Feeds Flood" --pack-extension-key=“D:\
Projects\Beyond Feeds Flood.pem”
生成的 crx 用于发布,私钥文件自己保存。
2、上传到 Chrome Extension Gallary。
网址:https://chrome.google.com/extensions?hl=zh-cn
注册之后就可以上传,上传时是传的扩展程序目录所有文件打包成的一个.zip 文件(注意不是.crx)。
上传中,不需要用到 pem 文件。
注:
(1)有时候 Chrome 上传不成功,用 IE 能上传成功。
(2)至少需要上传一张截图,但截图大小严格限制为 400*275,400 为宽(虽然说是不严格),所以上
传时用工具先调整好图片大小。
随着 版本开放了扩展程序功能, 引来了越来越多的关注。ç
翻译一篇简单的扩展程序开发入门,大家快来动手实现自己的 吧!ç
原文来自
一、升级自己的浏览器ç
想要开发 的扩展程序需要使用开发版本的 ,而不是一般人使用的发布版
。ç
二、建立并加载你的扩展ç
、在电脑的任何地方建立一个文件夹,用来存放你的代码。ç
!、在建好的文件夹中创建一个文本文件,把名字改成 "#,并将下面的代码拷贝
进去。ç
什 么 ? 什 么 是 $%& ? 请 看 我 以 前 写 过 的 一 篇 介 绍 '()
*+,,-.
$ 代码çç
/
0001)2304
000 504
060078904
0(:60/
0"':000
;4
00<
0=>0
?
;
*、将这个图标也拷贝到你刚建好的文件夹中ç
.、加载扩展程序ç
现在扩展程序已经基本成型了,让浏览器加载进来吧。ç
、点击浏览器右上角的这个图标,选择“扩展程序”。ç
、点击“载入正在开发的扩展程序”,选择刚才建立的文件夹。ç
、点击“确定”,这个时候浏览器上就会出现我们程序的图标。ç
剩余45页未读,继续阅读
资源评论
- _duang__2013-04-07360的教程,还不错。
lizhenyu200901
- 粉丝: 0
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功