Chrome浏览器插件开发心得

一、学习基础知识

从现在的经验来看，基本只需要看一下，360翻译的开发文档即可，开发出一个适合大部分人要求的插件了。

文档：http://open.chrome.360.cn/extension_dev/overview.html

二、实战经验

先给出我开发的XPlayer的配置，下面的经验可参考。

{
“name”: “XPlayer “,
“version”: “0.2″,
“description”: “XP(XPlayer),豆瓣音乐播放器”,
“manifest_version”: 2,
“homepage_url”: “http://www.xiongchuan.org/xplayer”,
“icons”:{
“16″ : “icon_16.png”,
“48″ : “icon_48.png”,
“128″ : “icon_128.png”
},
“browser_action”: {
“default_icon” : “icon_128.png”,
“default_title” : “XPlayer”,
“default_popup” : “popup.htm”
},
“background”:{
“page”:”background.htm”
},
“permissions”: ["tabs"],
“content_scripts”:[
{
"matches":["http://*.douban.com/*"],
“js”:["js/jquery.min.js","js/content_scripts.js"]
}
]

}

1、权限问题

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: “script-src ‘self’ chrome-extension-resource:”.

一般类似这样的报错有这样两种可能：

第一、在你的manifest.json里面要加入 ”permissions”: ["tabs","https://*/*"] 这样的配置

第二、在你的html代码里面（如popup.htm,background.htm），a标签之类的在onclick=”" ，href=”javascript:;”加了Inline(内敛)js脚本。在实际使用中，A标签的href=”javasript:;”很常见，即使错误控制台有这样的报警也不用理会。

2、生命周期

a. popup.htm 页面的变量会随着popup.htm消失而消失

b.background.htm 会一直存在，直到浏览器关闭，但是如果你安装了 Google的新聊天工具：”环聊”，它默认会使Chrome在后台运行，就是说即使你关了浏览器，只要环聊还开着，实际上background.htm也是存在的。

3、调试

popup.htm 当弹出时可以使用Chrome的开发者工具调试。

background.htm 可以 chrome://chrome/extensions/ 插件管理器界面，点击background.htm链接打开开发者工具

4、消息交互

popup.htm,background.htm,content_scripts 之间大体上分为两种交互方式。

a.直接调用

popup.htm与background.htm 里面的数据可以直接调用，例如：

popup.htm调用background.htm的Window对象：var backgroundWindow = chrome.extension.getBackgroundPage();

此时，popup.htm页面就拥有了background.htm的整个对象，只需要获取一次，如果background.htm里面有计划任务，数据一直在变，可以通过backgroundWindow变量，直接使用。但是如果background.htm里面的文档也在变化，popup.htm想要直接使用background.htm文档页面，就不行，必须要实时刷新文档页面，可以采用定时器实时的把background.htm的页面，刷新到popup.htm页面来。