哥教你混鸟房之浏览器插件开发骨灰级入门

哥教你混鸟房

之浏览器插件开发骨灰级入门

通过林博给找的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

,为了取得productID需要这个方法 */

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事件了

},

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4