内容发布更新时间 : 2024/11/9 3:06:32星期一 下面是文章的全部内容请认真阅读。
哥教你混鸟房
之浏览器插件开发骨灰级入门
通过林博给找的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事件了
},