为了账号安全,请及时绑定邮箱和手机立即绑定

写个简单的chrome插件-京东商品历史价格查询

标签:
前端工具

chrome 插件是什么,能做什么

增强浏览器功能,HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。
从界面到网络请求,到本地资源的交互,都是统统可以的。
比如:

  • ColorZilla: 取色工具

  • Octotree: github 项目的右边导航

  • FeHelper: Web 前端助手, json, 二维码,加密等等

  • React Develop tools: React 调试工具

  • Tampermonkey: 油猴脚本

核心五部分

  • Manifest
    声明文件

  • Background Script
    运行在后台的脚本, 当然不仅仅是脚本, 也有html

  • UI Elements
    browser action 和page action, omnibox, popup等等

  • Content Script
    运行在当前内容页面的脚本

  • Options Page
    配置页面

官方资料 (需要FQ)

你有上面这四个链接, 你基本无所不知,无所不能了。

一个简单的京东商品历史价格查询

本人喜欢在京东买东西,各种活动很累, 很烦。 因为没有比较,就没有伤害。 以后喜欢借助慢慢买查看,但是要来回切换, 麻烦。

其实已经有很多比较成熟的比价插件了。比如

  • 惠惠购物助手

  • 懒人比价购物助手

  • 购物党

  • 淘帮手

  • 等等

但是,个人保持学习态度, 写一个极其简单的,点击一下, 一条曲线。

正题

项目结构

项目结构如下, 本插件核心就是

  • manifest.json 申明文件

  • index.js 执行网络请求,解析数据,渲染图标
    https://img1.sycdn.imooc.com//5beaedbc0001b4db04130361.jpg

manifest

{    //必须为2
    "manifest_version": 2, 
    "name": "JD Price History",    "version": "1.0.0",    "description": "京东商品历史价格查询",    // 右上角图标
    "browser_action": {  
        "default_icon": {            "128": "icons/icon128.png",            "16": "icons/icon16.png",            "48": "icons/icon48.png"
        },        "default_title": "检查商品的历史价格"
    },    // 脚本
    "content_scripts": [
        {            "matches": [                "http://*/*",                "https://*/*"
            ],            "js": [                "content/echarts.common.min.js",                "content/md5.js",                "content/encrypt.js",                "content/index.js"
            ],            // 运行实际
            "run_at": "document_end"
        }
    ],    // 扩展程序网站
    "homepage_url": "https://github.com/xiangwenhu",    "icons": {        "128": "icons/icon128.png",        "16": "icons/icon16.png",        "48": "icons/icon48.png"
    },    // 权限,其实这里不需要那么多
    "permissions": [        "contextMenus",        "tabs",        "notifications",        "webRequest",        "webRequestBlocking",        "storage",        "https://*/",        "http://*/",        "https://*.manmanbuy.com/",        "http://*.manmanbuy.com/"
    ]
  
}

比较有用的是

  • browser_action 右上角的标

  • permissions 权限,不然你发送请求是不会成功

  • content_scripts 内容脚本

content script

我们调用慢慢买的一个接口, 需要传入类似这样的地址http://item.jd.com/4813300.html,请求这个地址就能获得历史数据, 但是需要引入慢慢买的两个加密文件。

function getRequestUrl(requestUrl) {
    requestUrl = requestUrl.split('?')[0].split('#')[0];    var url = escape(requestUrl);    var token = d.encrypt(requestUrl, 2, true);    var urlArr = [];
    urlArr.push('https://tool.manmanbuy.com/history.aspx?DA=1&action=gethistory&url=');
    urlArr.push(url);
    urlArr.push('&bjid=&spbh=&cxid=&zkid=&w=951&token=');
    urlArr.push(token);    return urlArr.join('');

}

封装简单的http_get请求,这里你应该是可以引入jQuery,网上有人说要拦截请求,我这里正常的发送是没有问题的。

function http_get(options) {    var timeout = options.onTimeout    var url = options.url;    var success = options.success;    var error = options.error;    var xhr = new XMLHttpRequest();
    xhr.timeout = 10000;
    xhr.ontimeout = function (event) {        console.log('request url' + url + ', timeout');
        timeout && timeout()
    }
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {        if (xhr.readyState == 4 && xhr.status == 200) {
            success && success(xhr.responseText);
        }
    }
    xhr. = function () {
        error && error(xhr.statusText)
    }
    xhr.send();
}

基本发送http请求, 解析数据就好了。

最后发一张图
https://img1.sycdn.imooc.com//5beaedc80001682316000947.jpg

开发插件本身内容还是很复杂的, 需要慢慢品读。

最后送上源码地址:chromeExt-jd-price-history

原文出处:https://www.cnblogs.com/cloud-/p/9954823.html  

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消