哥教你混鸟房
之浏览器插件开发骨灰级入门
通过林博给找的maxthon插件实例和蒋海滔的指导,最初做了个chrome插件,但是没想到bops系统的一些页面不支持chrome(在chrome下显示不正确),后来就又搞了这个maxthon插件,但是一开始写的插件在我电脑上可用,但是在运营方的电脑上不可用,挣扎了好几天,最后终于发现是跨域访问的问题,我觉得是酱紫的:我们的电脑和97是在同一个域(就是域名)hz下的,他们外包的和97不是一个域下的,由于安全方面的考虑,javascript是被限制了跨域访问的能力的,所以一开始写的插件他们点按钮时不会向97上发送后台请求。
下面的是几种主要浏览器下怎么用js编写和安装浏览器插件的简要步骤。最后附上哥写的maxthon浏览器插件,其中有jquery解决跨域访问的方法。
Chrome插件
Chrome插件有2种方法:
(1) 按照chrome插件自己的规范步骤写<新手入门个人推荐使用这种方法:简单>
1, 编写manifest.json以及它所需要的文件(包括js,html,图片,css文件
等)
2, 浏览器->工具->扩展程序->勾选“开发人员模式”,把manifest.json以
及相关文件在的目录载入即可。
详细步骤和内容看:
http://code.google.com/chrome/extensions/getstarted.html 如果想发布到网上,让别人可以用的话可以注册一下,然后在
https://chrome.google.com/webstore/developer/dashboard?hl=zh-CN这里添加新项目并提交,不过要发布的话,第一次要交5刀的注册费。
(2) 按照GreaseMonkey的规范约定来
步骤:1. 编写自己的userscript(脚本要保存成以 .user.js 结尾的文件),然后把这个js文件直接拖入浏览器就可以安装了。
具体例子见:http://userscripts.org/
Firefox插件
步骤:1.安装GreaseMonkey扩展
安装完重启后会看到greaseMonkey的欢迎界面,可以跟着它学咋么写userscript。
2.编写自己的userscript(脚本要保存成以 .user.js 结尾的文件),然后把这个js
文件直接拖入浏览器就可以安装了。也可以在
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/上注册一个账号,然后提交一个自己写的userscript。这个是freefee的,不过要遵守协议。
参考:greaseMonkey (油猴)
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
Userscript
http://userscripts.org/
IE插件
步骤:1,安装IEPro(或者类似的插件)(它会附带安装BrotherSoft_Extreme3注意) 2,编写自己的userscript(要以 .ieuser.script结尾的文件)
1, 把文件放在IEPro安装目录下userscripts的文件夹里(这个文件夹里也有
一些实例的),然后在IE->工具->IEPro preference->用户脚本 里勾选你所写的userscript就好了
Maxthon插件
(非主流浏览器,IE内核的,但是好像是公司以前默认的浏览器)
步骤:1,安装jsPlugin(或者类似的插件) 2,编写自己的userscript(以 .js结尾)
3,把文件放在maxthon安装目录下的\\Plugin\\JS-plugin\\Scripts下,重启maxthon就可以了。
(* 网上关于Maxthon的插件例子比较少,但是它是ie内核的,所以可以参考IE插
件的代码。*)
*************《完》*****************
参考例子:Userscript http://userscripts.org/ 附上哥做的文本排查的maxthon浏览器插件代码(也可以在
10.20.151.97/da_ipr/maxthon_extension/updatestatus.js下载)虽然丑陋但是可用: // ==UserScript==
// @name ipr_text_plugin
// @description ipr_text_plugin_test 用jquery的jsonp实现跨域访问 // @match http://moree.bops.alibaba.com/product/product/*
// @include http://moree.bops.alibaba.com/product/product/* // @version 1.0.0 // @updateURL http://10.20.151.97/da_ipr/maxthon_extension/ // @homepage http://10.20.151.97/da_ipr/maxthon_extension/ // ==/UserScript==
//function to get parameter from address url function getUrlPara(paraName){ var sUrl = location.href; var sReg = \这句网上搜来的,看不懂,不过是管用的
var re=new RegExp(sReg,\ re.exec(sUrl); return RegExp.$1; }
/*因为bops系统的那个页面上productID的部分是这样的NO.14 Sourcing Product href=\target=_blank>131087577
function getProductId(idAndTag){ var elems=[]; elems=idAndTag.split('<'); return elems[0]; }
//动态加载jquery脚本库
function loadScript(url, callback){
var script = document.createElement(\ script.type = \
if (script.readyState){ //IE //alert(script.readyState);
script.onreadystatechange = function(){ if (script.readyState == \
script.readyState == \ //alert(script.readyState);
script.onreadystatechange = null;
callback(); } };
} else { //Others
script.onload = function(){ callback(); }; }
script.src = url;
document.getElementsByTagName(\}
(function() { var
productType=getUrlPara(\
var
productIdString=getUrlPara(\
//执行加载外部 JS 文件
loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',function (){
$(\strong a\
style='color:red' type='button' value='app'/>\name='tbd' style='color:red' type='button'
value='tbd'/>\type='button' value='disable'/>\
$(\name='ApproveAllLeft' style='color:red' type='button' value='ApproveAllLeft' > \
//alert($);
$(\
var idAndTag=$(this).parent().find(\
var productId=getProductId(idAndTag);
$.ajax({ async:false,
url:\tId+\ // 跨域URL
contentType: \charset=utf-8\
type: 'GET', dataType: 'jsonp', jsonp: 'jsoncallback', //默认callback
timeout: 1000, beforeSend: function(){ //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
},