自己开发谷歌浏览器插件-问题集锦

      2021年03月23日 星期二 13:07:53     未分类      插件    

啥也不说了先来吐槽一下自己写一个播放器插件的问题,这些问题真的是很坑,花了我大量的时间,下面就总结一下开发中遇到的总总问题,有些忘记了是什么错了但我还是尽可能写下来,已备以后遇到有参考或者方便大家参看

1.vue的使用,疯狂报错

在开发谷歌浏览器插件时候,使用的版本不能是普通的vue,pia的把路径扔上去结果会发现不是#app not define就是给html绑定的事件循环一堆错;必须使用vuejs1.x版本或则webpack+那个啥(不记得了,网上找到)打包的可以直接使用vue最新的版本(本人直接用vue1.0.x,不用再打包啥的),参考连接:https://segmentfault.com/q/1010000009571202,其他就自行上网找.
vue1.0.x csp版本直接下载:https://files.cnblogs.com/files/RorinL/vue.js(我博客园的博客哈^ _ ^)

2.获取所有元素或则获取单个元素.

在vue1.x版本中,没有mounted等生命周期钩子,但是有功能相同的,参考:https://www.cnblogs.com/wuxianqiang/archive/2017/07/25/7231976.html,而且想要在ready()生命周期中获取某个类所有元素的长度或者遍历,需要使用定时器:
在这里插入图片描述
获取data-*(元素的data-xxx,需要这样写allplay[i].attributes[0].ownerElement.dataset.mid
获取元素: allplay[i].attributes[0].ownerElement,例如设置backgroundColor,需要这样:allplay[i].attributes[0].ownerElement.style.backgroundColor,不是allplay[i].style.backgroundColor,这样写不生效。

3.backgroundjs与popupjs的通信

直接贴图
3-1:发送消息给backgroundjs
在这里插入图片描述
3-2:backgroundjs接受消息
在这里插入图片描述

4.Unchecked runtime.lastError: The message port closed before a response was received

翻译:未检查运行时.lastError:消息端口在收到响应之前关闭
在 sender(背景页)收到 tab 页的响应消息之前,sendResponse 的消息端口就已经关闭了,从而导致 sender(背景页)出现未检查的运行时错误。更详细参考https://blog.csdn.net/lamp_yang_3533/article/details/100174074
解决办法:
在这里插入图片描述
注意这里的callb,这个是callback,它必须要有
例如popup发送消息给background
在这里插入图片描述
backgroundjsj接受,并响应
在这里插入图片描述

5.设置cookie,获取cookie

1.需要在mainfest中的permissions中声明”cookies”这个权限

2.设置cookie例子

let sendjson = {
    type: 6, //这里为了在background.js的chrome.runtime.onMessage中执行不同的功能代码,仅为示例,具体请看自己的开发需求
    data: {

    // some data...
    }
}
chrome.runtime.sendMessage(sendjson, function(res) {
	console.log("向后台background.js发送事件,设置cookie",res);
})

3.在background中接受事件,并设置cookie(即在background.js中设置cookie,popup.js中设置cookie不行)

chrome.runtime.onMessage.addListener(function(req, sender, callb) {

               // ...
		if(req.type === 6){
			let unistmp = Math.round(new Date() / 1000) + 2592000; //当前时间加30天
			chrome.cookies.set({
				domain: 'rfbynet.club',
				url: 'https://www.rfbynet.club/music/',
				name: req.data.mid,
				value: "{mname:" + req.data.mnane + ",artist:" + req.data.artist + ",mid:" + req.data.mid + ",murl:" + req.data.murl + "}",
				expirationDate: unistmp
			},function(cookie){
				console.log("set cookie success",cookie);
			});
			callb({
				type: "set a cookie"
			});
		}
})

这样就能设置cookie了,但是获取cookie不成功,即使用chrome.cookies.getAll无法成功,但是在插件页面中打开开发者工具并调用chrome.cookies.getAll({},function(cookies){console.log(cookies)});是能够实现,经过我的测试和讨论,发现chrome.runtime.onMessage.addListener(function(req, sender, callb){})中的callb(回调函数)是异步执行的,因此数据是可能获取了,但是就因为这个函数是异步执行,提早返回allcokie这个空数组.

        var allcokie = [];
        chrome.cookies.getAll({
            domain: "rfbynet.club",
            path: "/music"
        },function(cookies){
            console.log("success getall cookies!!");
            allcokie = cookies;
        });

        callb({
            type: "getall cookie",
            gtype: 1,
            data: allcokie
        });
//这个写法无法将allcokie赋值并由callb回调函数返回

希望看到这篇文章的你若知晓如何操作,烦请在下方评论处留言,不胜感激。

我的csdn博客:https://blog.csdn.net/gfhj778?spm=1000.2115.3001.5343

我的博客园:https://www.cnblogs.com/RorinL/


暂无评论

发表评论