东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

沙皇国际官方网址

15879558732
联系方式
全国服务热线: 15879558732

咨询热线:13680957231
联系人:刘伯堂
地址:郑州市南阳路北段

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

来源:沙皇国际官方网址   发布时间:2019-07-01   点击量:255

说chrome插件编写的先关文章, 首推小茗的【干货】Chrome插件(扩展)开发全攻略。有非常完善的理论,引用和demo代码。但是还是建议看官方的 chrome extensions。

chrome 插件是什么,能做什么

增强浏览器功能,HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。从界面到网络请求,到本地资源的交互,都是统统可以的。比如:

ColorZilla: 取色工具Octotree: github 项目的右边导航FeHelper: Web 前端助手, json, 二维码,加密等等React Develop tools: React 调试工具Tampermonkey: 油猴脚本

核心五部分

Manifest声明文件Background Script运行在后台的脚本, 当然不仅仅是脚本, 也有htmlUI Elementsbrowser action 和page action, omnibox, popup等等Content Script运行在当前内容页面的脚本Options Page配置页面

官方资料 (需要FQ)

overviewDeleloper GuideSamplesAPI

你有上面这四个链接, 你基本无所不知,无所不能了。

一个简单的京东商品历史价格查询

本人喜欢在京东买东西,各种活动很累, 很烦。 因为没有比较,就没有伤害。 以后喜欢借助慢慢买查看,但是要来回切换, 麻烦。

其实已经有很多比较成熟的比价插件了。比如

惠惠购物助手懒人比价购物助手购物党淘帮手等等

但是,个人保持学习态度, 写一个极其简单的,点击一下, 一条曲线。

正题

项目结构

项目结构如下, 本插件核心就是

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

, 1, 0, 9);

相关产品

COPYRIGHTS©2017 沙皇国际官方网址 ALL RIGHTS RESERVED 备案号:255