要维护16套主题的样式,并且保证浏览器兼容,实在是个枯燥乏味又无聊的事。每次改完样式,就要更换主题一个一个去检查。
比如当前页面为默认主题的首页,一系列的点击顺序是:更换主题->选择主题->下一页(50%的机会点击)->确认安装,15套主题更换完需要的点击次数为15*3 + 15/2 = 52。
如果提供选择主题的工具条,更换模板仅需要点击15次。正好也刚刚看完火狐扩展开发的官方文档,小小实践一下。在官方提供的helloWorld基础上改造。
1. 所需文件
helloWorld的扩展是加入到工具菜单中,点击选项弹出新窗口chrome://helloworld/content/hello.xul。这里不需要弹出新窗口,而且还要考虑窗口之间发送数据。故不用hello.xul和hello.js这两个文件。其实,最想做的是像web developer那样显示在状态条中,还要继续看相关的文档。所以干脆做得简单点,直接把内容写入当前页面。如图所示:
2.修改overlay.js
找到方法onMenuItemCommand,这是点击工具条中切换模板时调用的方法。
①获取当前页面信息,为了方便我引入了jquery,可是$("#")却取不到元素。放弃之。直接用document.getElementById("")仍然取不到元素。打印出来为null,打印window.location.href为chrome://helloworld/content/overlay.xul。难道还是浏览器本身的chrome,并不是当前页面。在这卡了很久。
继续查官方文档,使用content.document.title可以获得当前页面的title,可是仍然无法使用content.document.getElementById。放弃。
继续查官方文档,使用以下几句:
var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
var recentWindow = wm.getMostRecentWindow("navigator:browser");
var t = recentWindow ? recentWindow.content.document.location : null;
终于获得了正确的url,但不幸的是getElementById仍然为null。如此这般创建的节点var newWrapper = document.createElement("div");竟然也是HTMLObject XULElement,而不是DIVElement。幸好getElementsByTagName这个还能用。
② 把选择主题的HTML片段插入到body中,通过字符串拼接完成,recentWindow.content.document.body.innerHTML=“”。
③为每个button绑定事件。
本想使用hello.js写事件,再通过动态加载入当前页面,如下:
var jsWrapper = document.createElement("script");
jsWrapper.setAttribute('type','text/javascript');
jsWrapper.setAttribute('src','hello.js');
//jsWrapper.innerHTML = 'alert(55)';
alert(jsWrapper.innerHTML);
取不到hello.js,就如同两个隔离的环境,chrome中的hello.js无法加载到当前页面。通过innerHTML也不行。好吧,直接绑定事件吧。
var wrapper = recentWindow.content.document.body.childNodes[0]; var btnCollection = wrapper.childNodes; for(var i = 0 ;i < btnCollection.length; i++){ btnCollection[i].onclick = (function(i){ return function(){ $.get("http://www.l99.com/EditTemplet_install.action",{templetId:i+1},function(data){ //window.reload();这种方法不能实现 recentWindow.content.document.location.reload(); setTimeout(function(){ addOn(); },2000); }); } })(i) }
④更换主题的url为http://www.l99.com/EditTemplet_install.action?templetId=?通过ajax调用,成功后刷新当前页面。可是选择主题的HTML片段也没有了,只好延迟2s再插入一次。这个地方确实很不方便,页面刷新和跳转扩展就没了。不像google chrome,有个机制可以设置应用于哪些页面。
先这样吧,以后再改进。