一个简单的Chrome插件

天猫商品评论页没有淘宝一样的"原图、向左转、向右转",简单做了个加上

重温了一遍chrome扩展开发的API

简单说:一个manifest.json作为入口,里面配置了插件要引入的css、js等资源,配置了插件的基本信息,还有插件要生效的页面、权限等乱七八糟的...

js部分分为内容js后景js(这么叫可能不标准)

  • 内容js也就是content_scripts,一般放一些跟dom操作的代码
  • 后景js也就是background_script,可以做一些计算类、请求类...不需要参与dom的事
  • 两者均在沙盒中运行,彼此通过chrome开放的MessageAPI通信,实测两者均无法共享目标页的数据和变量,如你在content_scripts中引入jquery,目标页是无法访问的

能做的事挺多的...

代码在这:chrome-tmall-rate-thumb-extend

对了,用了一个叫MutationObserver的API,可以对Dom的变动进行监听

淘宝本身的长这样:

/proxy/i2.muimg.com/567571/a4285901165d9e29.png

插件用起来长这样:

/proxy/i4.buimg.com/567571/0ea480a1f7c65f62.png

一些相关链接:

本文于 2017/4/10 上午 发布在 Code 分类下,当前已被围观 480 次

相关标签:Web开发ChromeJavascript

永久地址:https://surmon.me/article/31

版权声明:自由转载-署名-非商业性使用  |  Creative Commons BY-NC 3.0 CN