46

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

 5 years ago
source link: https://xiangwenhu.github.io/blog/2018/11/13/chrome/extension/simple-ext/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

说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 

{
    //必须为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请求， 解析数据就好了。

最后发一张图

IvI7bmN.jpg!web

))

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK