标签:图片 官方 json 网络 交互 history document response match
说chrome插件编写的先关文章, 首推小茗的【干货】Chrome插件(扩展)开发全攻略。
有非常完善的理论,引用和demo代码。
但是还是建议看官方的 chrome extensions。
增强浏览器功能,HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。
从界面到网络请求,到本地资源的交互,都是统统可以的。
比如:
你有上面这四个链接, 你基本无所不知,无所不能了。
本人喜欢在京东买东西,各种活动很累, 很烦。 因为没有比较,就没有伤害。 以后喜欢借助慢慢买查看,但是要来回切换, 麻烦。
其实已经有很多比较成熟的比价插件了。比如
但是,个人保持学习态度, 写一个极其简单的,点击一下, 一条曲线。
项目结构如下, 本插件核心就是
{
//必须为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/"
]
}
比较有用的是
我们调用慢慢买的一个接口, 需要传入类似这样的地址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
标签:图片 官方 json 网络 交互 history document response match
原文地址:https://www.cnblogs.com/cloud-/p/9954823.html