寫個簡單的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
  配置頁面

官方資料 (需要FQ)

• overview
  
• Deleloper Guide
  
• Samples
  
• API

你有上面這四個鏈接， 你基本無所不知，無所不能了。

一個簡單的京東商品歷史價格查詢

本人喜歡在京東買東西，各種活動很累， 很煩。 因爲沒有比較，就沒有傷害。 以後喜歡藉助慢慢買查看，但是要來回切換， 麻煩。

其實已經有很多比較成熟的比價插件了。比如

• 惠惠購物助手
• 懶人比價購物助手
• 購物黨
• 淘幫手
• 等等

但是，個人保持學習態度， 寫一個極其簡單的，點擊一下， 一條曲線。

正題

項目結構

項目結構如下， 本插件核心就是

• 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