chrome插件simpleTBK学习笔记

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

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

simpleTBK插件示例

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

      插件与浏览器的主要交互功能由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函数。

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

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

Comments

  1. By k

    回复

    • By live

      回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Fork me on GitHub