最近公司需要做一个电商平台店铺统计的系统，大致的需求是将某电商平台的多个店铺数据全部进行收集，放到公司内部自己的系统里进行管理和分析。为了获取店铺在电商平台的数据，就必须要解决电商平台的登录Cookie问题，拿到登录的Cookie后用接口模拟请拿到数据。为了图方便省事，于是写了一个小小的浏览器插件，专门用于获取登录Cookie，以下简单的对插件作一些介绍。
1. manifest.json 文件
{
"manifest_version": 2,
"name": "电商系统插件",
"version": "1.0",
"description": "公司内部电商系统专用，通过获取相关平台的登录凭证，从而拿到店铺相关的数据。",
"author": "aiguangyuan",
"icons":
{
"48": "icon.png",
"128": "icon.png"
},
"permissions":
[
"cookies",
"http://*/*",
"https://*/*"
],
"browser_action":
{
"default_icon": "icon.png"
},
"background":
{
"page": "background.html"
},
"content_scripts":
[
{
"matches": ["<all_urls>"],
"js": ["jquery-1.8.3.js", "content-script.js"],
"run_at": "document_start"
}
],
"web_accessible_resources":
[
"inject.js"
]
}这个文件是每一个浏览器插件所必须要定义的，主要用来介绍插件的名称、简介、权限、背景文件、内容脚本等。
详解可参考：http://chrome.cenchy.com/manifest.html
2. content-script.js 文件
(function() {
var href = window.location.href;
// console.log(href);
if (href.indexOf("dashboard") !=-1 && href.indexOf("redirect") ==-1) {
// 发送消息给后台文件
chrome.runtime.sendMessage({
action: "get_cookies",
},function(a) {
})
}
})();这个文件在manifest.json文件里是有注册的，主要的作用是用来跟页面打交道，只有这个文件才能感知前台页面发生的一些变化。
3. background.html 文件
<!DOCTYPE html>
<html>
<head>
<title>背景页</title>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="container">
<h1>这是背景页</h1>
</div>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="background.js"></script>
</body>
</html>这个文件在manifest.json文件里是有注册的，以这个命名的文件权限很大，主要的作用是用来配合前台文件实现具体的功能。
以下是该页面中引入的 background.js文件，具体的操作逻辑全在里面。
// 监听前台文件发送的消息
chrome.runtime.onMessage.addListener(function (result) {
// action需要与前台文件对应
if(result.action=='get_cookies'){
// 获取指定网址的Cookie
chrome.cookies.getAll({
url: "https://www.youzan.com/",
},function (result) {
var res = result;
var list =[];
if(res.length){
// 对获取的结果进行处理
for(var i = 0 ;i<res.length;i++){
var item = res[i].name +'='+res[i].value;
list.push(item);
};
var cookies = list.join(',');
console.log(cookies);
// 发起请求给后端
$.post("入库地址", {"cookies":cookies},function(data){
});
};
})
}
})
为了方便操作，同时引入了jquery-1.8.3.js文件，这个可以去官方下载即可。
4. icon 图标
这个文件在manifest.json文件里是有注册的，主要的作用是在加载插件以后在右上角显示插件，方便操作。
以下是整件插件目录结构。
更多参考：
http://chrome.cenchy.com/index.html
https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html