返回
在一个微前段项目,有个项目的 api 需要基于其他项目的登录校验,由于项目的复杂性,无法获取项目的登录代码逻辑以及校验逻辑;通过 proxy 测试,api 的 request 中,需要指定 headers 和 cookie;不想在项目代码做过多无用逻辑,于是打算开发一个谷歌插件,用于获取父项目产生的 cookie,并拦截当前项目的 api 请求,并给它添加相应的 headers 和相应的 cookie
名称:cookie-token;用途:
{
"manifest_version": 2,
"name": "get token",
"version": "1.0",
"description": "截取token,用于跨域使用",
"author": "ff",
// 安装后显示的图标
"icons": {
"48": "icon.png",
"128": "icon.png"
},
// 该插件需要的权限
"permissions": [
"declarativeContent",
"webNavigation",
"tabs",
"notifications",
"http://*/",
"https://*/",
"webRequest",
"webRequestBlocking",
"storage",
"cookies"
],
// 默认执行的js
"background": {
"scripts": ["js/background.js"],
"persistent": true
},
// 鼠标放到插件icon上时,出现的弹框界面
"browser_action": {
"default_popup": "popup.html"
},
"web_accessible_resources": []
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨网站设置cookie</title>
</head>
<body>
<button id="setCookie">设置cookie</button>
<script src="js/popup.js"></script>
</body>
</html>
popup.js,获取 baidu 的 cookie,并添加到 https://www.yaya12.com
const setCookieBtn = document.getElementById('setCookie')
const cookieNeed = ['pplogid','pplogid_BFESS','PSTM']
const cookieNeedFromPath = ['pplogid','pplogid_BFESS']
const cookieFrom = 'https://baidu.com'
const cookieFromPath = "https://passport.baidu.com"
const cookieTo = 'https://www.yaya12.com'
function getCookies(name,callback){
const url = cookieNeedFromPath.includes(name) ? cookieFromPath : cookieFrom
chrome.cookies.get({url,name},(cookie)=>{
if(callback){
callback(cookie)
}
})
}
function setCookie(){
cookieNeed.forEach(item=>{
getCookies(item,(cookie)=>{
if(!cookie) return
const {name,value}=cookie
chrome.cookies.set({url:cookieTo,name,value})
})
})
}
setCookieBtn.onclick = setCookie()
const headers = ['sig','shaOne']
let headersValue = []
if (!headersValue.length) {
chrome.webRequest.onBeforeSendHeaders.addListener(
(details) => {
headersValue = details.requestHeaders.filter(item=>Headers.inclues(item))
}, {
urls: ['*://www.baidu.com/*'],
// types:['xmlhttprequest'] // 用以设置拦截的请求的类型
}, ["blocking", "requestHeaders"]
);
}
chrome.webRequest.onBeforeSendHeaders.addListener(
(details) => {
details.requestHeaders = details.requestHeaders.concat(headersValue)
return {
requestHeaders: details.requestHeaders
};
}, {
urls: ['*://www.yaya12.com/*'],
// types:['xmlhttprequest']
}, ["blocking", "requestHeaders"]
);
cookie-token 谷歌浏览器插件,拦截 baidu headers, 加到 yaya12.com header
主要文件 cookie-token
chrome.webRequest.onBeforeSendHeaders 方法中,不能直接在 headers 里设置 cookie(cookie 只能通过 chrome.cookies.set 进行获取和设置)
chrome.cookies.get 获取的 cookie 并不跟当前某个页面下存在的 cookie 强关联——即便把当前页面的 cookie 删除,依然能够获取到
在 popup.html 中,dom.onclick = ()=>{}, 这样绑定的 click 事件,只有插件第一次 popup 出现时执行一次;如果需要反复改变,需要 通过 dom.addEventListener('click',()=>{})进行事件绑定