开发Firefox扩展实战——切换主题
来源：互联网 发布：人工智能报告2000字 编辑：程序博客网 时间：2024/06/05 10:55
www.l99.com
要维护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，有个机制可以设置应用于哪些页面。
先这样吧，以后再改进。
- 开发Firefox扩展实战——切换主题
- 实战 Firefox 扩展开发
- 实战 Firefox 扩展开发
- 实战 Firefox 扩展开发
- 实战 Firefox 扩展开发
- firefox 扩展开发 实战步骤！
- Mozilla学习：《实战Firefox 扩展开发》心得。
- Chrome扩展开发指南(7)——Themes(主题制作)
- Chrome扩展开发指南(7)——Themes(主题制作)
- PHP内核介绍及扩展开发指南—高级主题
- PHP内核介绍及扩展开发指南—高级主题
- PHP内核介绍及扩展开发指南—高级主题
- Mozilla Firefox扩展（Extensions）开发——jpm
- Mozilla Firefox扩展（Extensions）开发——xulrunner
- Firefox扩展开发初级教程——开发一个简单的扩展
- Firefox扩展开发之一
- firefox 扩展的开发
- Firefox 扩展开发 - 总结
- C#反射属性例子
- 详细解析Java中抽象类和接口的区别
- poj 2186 Popular Cows
- 异常处理，简单而又复杂的问题
- oracle 10g 登录em后，提示java.lang.Exception Exception in sending Request null
- 开发Firefox扩展实战——切换主题
- 二叉树
- （二）2005年我的第一次软件行业创业，烧掉30万、2年时间打水漂的惨痛教训
- 使用Hudson进行持续集成(一)
- 这个女人不简单，解决了大数据重大问题
- 分布式哈希和一致性哈希
- sdibt 2548 将十进制数转换成二进制数
- \r\n写入unicode文本文件的问题
- C# serialport
