说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)
你有上面这四个链接， 你基本无所不知，无所不能了。
一个简单的京东商品历史价格查询
本人喜欢在京东买东西，各种活动很累， 很烦。 因为没有比较，就没有伤害。 以后喜欢借助慢慢买查看，但是要来回切换， 麻烦。
其实已经有很多比较成熟的比价插件了。比如
- 惠惠购物助手
- 懒人比价购物助手
- 购物党
- 淘帮手
- 等等
但是，个人保持学习态度， 写一个极其简单的，点击一下， 一条曲线。
正题
项目结构
项目结构如下， 本插件核心就是
- 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