`
yanzilee9292
  • 浏览: 542748 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Chrome扩展程序开发调试简明教程

 
阅读更多

原文来自: http://www.cnblogs.com/sinojelly/archive/2011/01/11/1933213.html

 

一、加载扩展程序

这里以加载一个已有的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。
注册之后就可以上传,上传时是传的扩展程序目录所有文件打包成的一个.zip文件(注意不是.crx)。
上传中,不需要用到pem文件。
 
注:
(1)有时候Chrome上传不成功,用IE能上传成功。
(2)至少需要上传一张截图,但截图大小严格限制为400*275,400为宽(虽然说是不严格),所以上传时用工具先调整好图片大小。

分享到:
评论

相关推荐

    chrome插件开发法

    例如,“chrome插件开发杂记.htm”可能包含了开发者在实践中遇到的问题和解决方案,“Chrome拓展简明开发指南.htm”可能是一个简化的教程,而“我的第一个Chrome插件:天气预报应用.htm”则可能是一个完整的天气预报...

    PolymerStartupKit:Polymer Startup Kit 1.0.3 的 ASP.NET 5 端口

    9. **调试和测试**:在开发过程中,开发者可能需要用到Chrome开发者工具(DevTools)进行前端调试,以及像Mocha和Chai这样的JavaScript测试框架来确保代码质量。 10. **部署**:完成开发后,项目需要部署到服务器,...

    平原型生活垃圾填埋场扩容措施研究及应用_刘志刚.pdf

    平原型生活垃圾填埋场扩容措施研究及应用_刘志刚.pdf

    跨模型迁移指南:将OpenAI项目快速适配DeepSeekAPI.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    智能推荐系统实战:DeepSeekAPI在电商场景的个性化排序应用.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    成本控制秘籍:DeepSeekAPI计费机制与优化方案全解.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    Wallpaper Engine 壁纸一键提取

    Wallpaper Engine 是一款广受欢迎的动态壁纸软件,允许用户将各种动态、交互式壁纸应用到桌面上。其丰富的创意工坊内容让用户可以轻松下载和分享个性化的壁纸。而“一键提取”功能则是 Wallpaper Engine 中一个非常实用的工具,能够帮助用户快速提取和保存壁纸资源,方便后续使用或分享。

    性价比革命:DeepSeekAPI成本仅为GPT-4的3%的技术揭秘.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    本地部署DeepSeek模型:API调用与自有算力结合的混合架构设计.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    这是一份非常有意义的实习报告

    这是一份非常有意义的实习报告

    用Python玩转DeepSeek:代码生成接口的10个实战案例.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    爱华AIWA HS-J9磁带随身听维修服务手册 说明书电路原理图PCB图

    爱华AIWA HS-J9磁带随身听维修服务手册 说明书电路原理图PCB图

    从ChatGPT到DeepSeek:API迁移指南与参数映射对照表.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    房屋租赁合同[示范文本].doc

    房屋租赁合同[示范文本].doc

    智能体开发:将DeepSeekAPI集成到知识库系统的全流程.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    单片机 入门学习视频教程 自学资料

    单片机 入门学习视频教程 自学资料

    模型定制化实战:基于DeepSeek的行业术语微调教程.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    5个提升DeepSeekAPI生成质量的调参技巧,开发者必看!.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

    参数调优手册:temperature和top_p对输出结果的影响实验.pdf

    在日常的工作和学习中,你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼?DeepSeek 或许就是你一直在寻找的解决方案!它以其高效、智能的特点,在各个行业都展现出了巨大的应用价值。然而,想要充分发挥 DeepSeek 的优势,掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发,为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习,你将能够轻松地运用 DeepSeek 解决实际问题,提升工作效率和质量,让自己在职场和学术领域脱颖而出。现在,就让我们一起开启这场实用又高效的学习之旅吧!

Global site tag (gtag.js) - Google Analytics