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

说chrome插件编写的先关文章，首推小茗的【干货】Chrome插件(扩展)开发全攻略。

有非常完善的理论，引用和demo代码。

但是还是建议看官方的 chrome extensions。

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

配置页面

官方资料 (需要翻墙)

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

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

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

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

惠惠购物助手
懒人比价购物助手
购物党
淘帮手
等等

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

正题

项目结构

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

manifest.json 申明文件
index.js 执行网络请求，解析数据，渲染图标

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.onerror = function () {

        error && error(xhr.statusText)

    }

    xhr.send();

}

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

最后发一张图

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

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

巴特西