说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.onTimeoutvar 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