Google插件开发

2020-09-10 loading

# 初衷

在一个微前段项目，有个项目的 api 需要基于其他项目的登录校验，由于项目的复杂性，无法获取项目的登录代码逻辑以及校验逻辑；通过 proxy 测试，api 的 request 中，需要指定 headers 和 cookie；不想在项目代码做过多无用逻辑，于是打算开发一个谷歌插件，用于获取父项目产生的 cookie，并拦截当前项目的 api 请求，并给它添加相应的 headers 和相应的 cookie

# 模拟实践

名称：cookie-token；用途：

拦截 baidu headers，加到 yaya12.com headers
获取 baidu cookie，添加到 yaya12.com

# 核心代码

# 配置文件 manifest.json

{
	"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()

popup 样式

# 后台执行 background.js——请求拦截

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"]
);

# 插件安装

打开谷歌浏览器——更多工具-程序扩展
打开——开发者模式
点击——加载已解压的扩展程序
- 如上图，左上角按钮
- 选择本地文件夹，完成安装

# 项目 GitHub

cookie-token 谷歌浏览器插件，拦截 baidu headers，加到 yaya12.com header

主要文件 cookie-token

# 备注

chrome.webRequest.onBeforeSendHeaders 方法中，不能直接在 headers 里设置 cookie（cookie 只能通过 chrome.cookies.set 进行获取和设置）
chrome.cookies.get 获取的 cookie 并不跟当前某个页面下存在的 cookie 强关联——即便把当前页面的 cookie 删除，依然能够获取到
- 猜测，是从浏览器的缓存读取的 cookie
在 popup.html 中，dom.onclick = ()=>{}, 这样绑定的 click 事件，只有插件第一次 popup 出现时执行一次；如果需要反复改变，需要通过 dom.addEventListener('click',()=>{})进行事件绑定

# 学习链接

: 支付宝打赏

: 微信打赏

Google插件开发

# 初衷

# 模拟实践

# 核心代码

# 配置文件 manifest.json

# 弹框样式 popup.html——获取并设置 cookie

# 后台执行 background.js——请求拦截

# 插件安装

# 项目 GitHub

# 备注

# 学习链接