转载链接:http://blog.csdn.net/qustdong/article/details/46046553
chrome插件开发资料还是相对丰富的
360官方提供的资料:http://open.chrome.360.cn/extension_dev/overview.html
某大神也讲解的比较详细: http://www.cnblogs.com/guogangj/p/3235703.html
有坑的地方要注意:popup.html中的js在插件中无效,需要通过引用popup.js,动态绑定js事件
先摘录相关的内容:
程序开发,必定要涉及到调试,记得我刚开始做WEB开发前,问一些做了好久WEB开发的朋友,你们是怎样做JavaScript调试的,我发觉大多数人竟然回答:用alert一点点试吧——不是不行,是太原始,太低效了,对吧?其实Chrome直接支持javascript的调试,拥有了Chrome,就相当于拥有了一个强大的javascript调试器了。
Chrome打开开发者工具的方法是<Ctrl>+<Shift>+<I>(Windows版),大致如下:
我们这次需要关心的有“Elements”、“Sources”和“Console”这三个标签。Elements是用来做DOM分析的,功能有点类似Firebug,帮助我们分析页面的内容;而Sources,是我们用来调试javascript的;Console则是我们的Log的输出窗口,也是一个调试利器。
调试Content Script
如我提供的这个例子,可在Sources的“Copntent Scripts”下看到“content_script.js”然后设断点,执行到断点处时,Chrome会挺住,你可以观察到上面的值,如图:
太cool了,请问你还要一点点alert吗?
调试Background
由于background和content script并不在同一个运行环境中,因此上面的方法是看不到Background的javascript的。要调试Background,还需要打开插件页,也就是“chrome://extensions”。点对应的插件的“generated background page.html”,就出现了调试窗口,接下来的操作就跟前面的类似了。如图:
至于你看到ID,“aajnhhjiia……”这一长串东西,这是chrome自动安排的一个ID。
调试Popup
虽然Popup和Background是处于同一运行环境中,但在刚才的Background的调试窗口中是看不到Popup的代码的。调试Popup还需要这样:
然后……就跟前面差不多了。
一些问题
也许有时候你会发觉调试器不是很灵,至少我用下来感觉如此,比如你可能发现断点设不了,或者断点不起作用,或者看不到你自己的javascript文件。我的方法是在插件页中,把对应的插件的“已启用”这个复选框去掉,再重新勾上,然后再点一下“重新加载(Ctrl+R)”,通常能解决问题。当然了,还有些很古怪的问题,还不好重现,总体的解决思路就是重新载入一下,实在不行的话重启浏览器,或者清除浏览器缓存什么的,再试试看。
在做插件调试的时候我还遇到一个十分郁闷的问题,那就是我的Chrome使用了“Go Agent”,关于*是用来干嘛的,这个嘛,可以去google一下,我相信绝大多数程序员都会喜欢上它……可由于使用了这个东西,很可能会导致插件的XMLHttpRequest工作不正常,而且可能你会思索半天也找不到原因,好吧,暂时把*停用掉,甚至可能你需要重启下Chrome——我的经验。