2015年12月21日

chrome插件simpleTBK学习笔记

Posted in chrome plugin • javascript By livezingy On 2015年12月21日，4630 Views

chrome插件simpleTBK是一款用在chrome浏览器上自动获取并显示淘宝客佣金和链接的插件，这个插件的作者公布了该插件的源代码，该插件并未像一些返利网一样收取中间佣金，是一个为人民服务的纯工具。本文主要介绍个人总结的该插件源代码的结构与工作原理，作为chrome插件一篇入门笔记。

simpleTBK使用教程：新版阿里妈妈返利插件，该教程中也包含simpleTBK源代码在Github上的地址。

simpleTBK插件示例

每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，叫manifest.json，里面提供了重要的信息。simpleTBK的manifest文件如下所示，注释是我查阅相关资料后添加的，不妥之处还请多多指教。

{

"name": "SimpleTBK",

"version": "1.1.2",

"description": "Simple Taobaoke",

"icons" : {

"16": "img/qiaoba16.png",

"48": "img/qiaoba48.png",

"128": "img/qiaoba128.png"

"background": {

//运行在扩展进程中，存在于扩展的整个生命周期

"scripts": [ "js/jquery-1.9.1.min.js", "js/popup.js", "js/bg.js" ]

"browser_action": {

//在chrome主工具条的地址栏右侧增加一个图标，可以拥有popup来作为该图标的延展。popup会在用户点击图片后出现，可以作为当前扩展的菜单

"default_title": "",

"default_icon": "img/qiaoba19.png",

"default_popup": "html/popup.html"

"content_scripts": [

//在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。

{

"js": [ "js/jquery-1.9.1.min.js", "js/jquery-ui.min.js", "js/tbk.js" ],

"matches": [ "http://*/*", "https://*/*" ]

}

"web_accessible_resources": [

//指定本扩展在注入的目标页面上所需使用的资源的相对于扩展安装根目录的路径

"js/jquery.min.map"

"permissions": [

//当前扩展将使用的权限

"tabs",

"http://*/*",

"storage",

"notifications",

"cookies",

"https://*/*"

"manifest_version": 2

}

插件与浏览器的主要交互功能由js文件来实现，simpleTBK的js文件夹中一共包含5个js文件，我们重点关注后面tbk.js/bg.js/popup.js这三个文件，现假设读者的浏览器均已成功安装simpleTBK插件并已经通过该插件的菜单登录alimama，特别提示：用户需要在alimama帐号下已建立好推广位。

1. tbk.js的调试

在simpleTBK安装成功后，在浏览页面时按下F12，即可在content script中找到tbk.js，并且可以随意设置断点对该文件进行调试。

chrome插件content页面调试

2. bg.js的调试

在chrome浏览器的“设置–>扩展程序”路径下找到simpleTBK，点击“背景页”，在source页面可以看到bg.js，可以在bg.js文件中的任意位置设置断点对其进行调试。

chrome插件背景页调试

3. popup.js的调试

popup.js的调试需要在插件图片处单击右键，选择“审查弹出页面”，在弹出的新页面找到”sources–>js–>popup.js”，在该文件中设置断点进行调试。

4. 插件工作原理

通过设置断点观察各文件的执行顺序，我对simpleTBK插件的工作原理的理解暂时如下：

浏览TB的商品页面时，先执行tbk.js文件中的start函数，通过chrome.runtime.sendMessage函数将当前浏览器页面的URL与商品ID传递给bg.js中的chrome.runtime.onMessage.addListener函数。

start: function() {

url = document.location.href;

var res = Rebate.checkURL(url);

if(res === false) {

return;

}

if ('ju' != res && 'spu' != res && 'a.m' != res) {

res = 'item';

}

var item_id = Rebate.getItemId(url, res);

//alert(item_id);

if(item_id === false) {

return;

}

//将item_id与url传递给bg.js文件中的addlistner函数

chrome.runtime.sendMessage({method: "getAuction", itemid: item_id, url: url}, function(obj) {

Rebate.initEasyDarg(obj);

});

在addListener中根据商品页面以及localStorage已存储的相关登录信息获取TBK的佣金信息与链接，并将该信息传递给tbk.js。

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

if (request.method == "alimamaLogin") {

} else if (request.method == "getAuction") {

//sendResponse({click_url: 'test', commission_rate: 6});

if (localStorage['MemberId'] && request.url.indexOf(localStorage['MemberId']) != -1) {

return;

}

if (!localStorage['TbToken'] || !localStorage['SelectedAdzoneId'] || !localStorage['SelectedSiteId']) {

loadAdzons();

}

if (localStorage['SelectedAdzoneId'] && localStorage['SelectedSiteId'] && localStorage['TbToken']) {

var xhr = new XMLHttpRequest();

var itemid = request.itemid;

var auctionCodeObj = null;

var auctionListObj = null;

try {

//getAuctionCode

var URL = "http://pub.alimama.com/common/code/getAuctionCode.json?auctionid=" + itemid;

URL += "&adzoneid=" + localStorage['SelectedAdzoneId'] + "&siteid=" + localStorage['SelectedSiteId'] + "&t=" + new Date().getTime() + "&_tb_token_=" + localStorage['TbToken'] + "&_input_charset=utf-8";

xhr.open("GET", URL, false);

//xhr.onreadystatechange = funcCreator(getAuctionCode, xhr, auctionCodeObj);

xhr.send();

if (xhr.status == 200) {

try {

auctionCodeObj = JSON.parse(xhr.responseText);

} catch (err) {

auctionCodeObj = null;

}

//searchAuctionList

URL = "http://pub.alimama.com/pubauc/searchAuctionList.json?q=" + encodeURIComponent(request.url);;

URL += "&t=" + new Date().getTime() + "&_tb_token_=" + localStorage['TbToken'];

URL += "&toPage=1&perPagesize=40";

xhr.open("GET", URL, false);

//xhr.onreadystatechange = funcCreator(getAuctionList, xhr);

xhr.send()

if (xhr.status == 200) {

try {

auctionListObj = JSON.parse(xhr.responseText);

} catch(err) {

auctionListObj = null;

}

} catch (err){

}

// response

var respObj = {}

if (auctionListObj &&

auctionListObj.data) {

if (auctionListObj.data.pagelist &&

auctionListObj.data.pagelist.length == 1) {

var commissionRatePercent = auctionListObj.data.pagelist[0].commissionRatePercent;

var calCommission = auctionListObj.data.pagelist[0].calCommission;

if (auctionCodeObj.data && auctionCodeObj.data.eliteUrl) {

var clickUrl = auctionCodeObj.data.eliteUrl;

respObj.click_url = clickUrl;

respObj.commission_rate = commissionRatePercent * 100;

respObj.cal_commission = calCommission;

sendResponse(respObj);//将已获取的佣金信息与TBK链接返回TBK.js文件中

} else {

genNotify('', 'Auction Code Error', 'Please login alimama, and create your own adzones');

}

} else {

sendResponse({});

}

} else {

genNotify('', 'Get Auction List Error', 'Please login alimama, and create your own adzones');

}

} else {

genNotify('', 'No AdZone Found', 'Please login alimama, and create your own adzones');

}

});

tbk.js的函数initEasyDarg根据bg.js中传回的信息在当前浏览页面中显示出那个关键的黄色标签。

initEasyDarg: function(obj) {

var width = document.body.clientWidth - 200;

var div = document.createElement('div');

div.id = 'dragbox';

try {

document.body.appendChild(div);

} catch (e) {

document.appendChild(div);

}

var c_url = obj.click_url == null ? '#' : obj.click_url;

var c_rate = obj.commission_rate == null ? '0' :(obj.commission_rate/100).toFixed(2);

var c_commission = obj.cal_commission == null ? '0' : obj.cal_commission;

var html = '<a href="' + c_url + '"> 返利' + c_rate + '%(' + c_commission + ')</a>';

$('#dragbox').html(html);

$('#dragbox').attr('style','background-color: yellow; padding: 15px; border: 2px solid orange; width: 180px; cursor: move; position: absolute; z-index: 10000000000; top: 250px; left: ' + width + 'px;');

$("#dragbox").draggable();