尝试Chrome扩展程序写登陆页面

前端 专栏收录该内容
8 篇文章 0 订阅

由于项目分为好几个模块,所以每次运行某个模块的时候都需要粘贴cookie在proxy配置里。所以考虑写一个Chrome扩展程序,把登陆放在页面上。下面是略带心酸的探索过程。。。。

第一版:首先我考虑的是搞一个弹出框,完全符合Chrome扩展程序的样子。需要登陆就点一下图标,出现登陆框。然后插件调用登陆接口拿到cookie,放进本地。问题:扩展程序发送请求origin是扩展程序的,不是真正页面发送的(比如localhost),而且扩展程序和实际页面不是一个,所以cookie也存不到页面的cookie里。需要通过background.js通讯传给页面在存。好的,涉及到代码注入啦~~

第二版:既然需要代码注入,那么不如连登陆都注入进去好了。这样连origin的问题都解决了。真棒!!然后呢发现了Tampermonkey这个Chrome插件。这是个帮你把插件架子搭好的插件。你只要把需要注入的脚本放进去就行了。于是我开始了原生js的creatElement的坎坷之路。问题:一个登陆没几个东西洋洋洒洒写了一堆。。。这后面要是有新功能需要维护怎么办。很明显这代码太缺心眼了。于是考虑第三版。。。

第三版:在大佬的安利下了解了一个神仙打包工具parcel。想写什么写什么。比如想写react,直接在顶部引入一个react就行了。打包的时候parcel会自动帮你安装react并打包你的代码。极速零配置Web应用打包工具!!!真的太棒了。只要把打包之后的js扔进Tampermonkey就可以了。Tampermonkey可以直接引入脚本路径。所以你可能需要起个服务器把脚本扔上去搞个路径回来给Tampermonkey。还有css也是可以的。有兴趣的可以去看一下API。又到了问题环节:拿回来set-cookie不会放进cookie里。res.headers能拿到别的字段,但是却拿不到set-cookie。了解了一下,原因可能是跨域不能拿cookie,请求头和响应头domain不一致浏览器不care你。心酸。。。。

第四版:终于找到了解决方法

'*': {

target: 'www.baidu.com',

secure: false,

changeOrigin: true,

onProxyReq: (proxyReq) => {

console.log('the cookie: ', cookie);

// proxyReq.setHeader('withCredentials', true);

// proxyReq.setHeader('Cookie', 'User-Token=7bc107a5-dd1e-4f06-ab41-8955fc8dbab3');

if (cookie) {

proxyReq.setHeader('Cookie', cookie);

// req.headers['Cookie'] = cookie;

}

},

onProxyRes: (proxyRes) => {

Object.keys(proxyRes.headers).forEach((key) => {

if (key === 'set-cookie' && proxyRes.headers[key]) {

const cookieTokens = proxyRes.headers[key].reduce((acc, header) => {

const tokens = header.split(';');

return acc.concat(tokens);

}, []);

cookie = cookieTokens.filter(element => element.includes('User-Token')).join(';');

}

});

},

},

在项目的proxy里面配置上这个。搞一个全局变量保存cookie,在发请求的时候拦截一下加上cookie。看起来好像解决了。但是!!!如果你的配置devServer的proxy是数组没问题,如果是object,会有排列的鬼问题。就是发请求的时候加不上。焦头烂额的时候发现把上面的都注掉就好了  后面才知道是对象排列的问题。掉接口的时候可能就跳过去还是覆盖怎么样。

好的,现在我的Chrome扩展程序开发完了。最后决定跟后端同学要个万能key,以后掉接口不用cookie了。破玩意!!!

  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值