有些功能需要用到消息通讯，比如我们需要获取某个网站的cookie发送到后台服务器，那么我们手动点击之后，需要获取cookie，然后发送。
一、设置服务脚本
定义接收通讯消息的处理脚本。
{
"background": {
"service_worker": "background/service-worker.js",
"type": "module"
},
"host_permissions": [
"https://*/*",
"http://*/*"
],
"permissions": [
"cookies",
"declarativeNetRequestFeedback",
"declarativeNetRequestWithHostAccess",
"declarativeNetRequest",
"webRequest"
]
}
二、在前台发送消息给服务脚本
通过chrome的api发送“chrome.runtime.sendMessage”
<template>
<button type="primary" style="width: 100%;" @click="onSendMessage">发送消息</el-button>
</template>
<script>
const onSendMessage= async () => {
const res = await chrome.runtime.sendMessage({
diyData: dataBody
});
}
<script>
三、接收
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
console.log(request)
console.log(sender)
console.log(sendResponse)
const data = request.diyData;
chrome.cookies.getAll({
domain: "taobao.com"
}, function (cookies) {
let cookieString = ""
cookies.forEach(function (cookie) {
cookieString += cookie.name + "=" + cookie.value + ";"
}
fetch( "http://www.xx.com/api/data",
{
method: "post",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
}
).then(
res => {
console.log(res);
let reader = res.body.pipeThrough(new TextDecoderStream())
.getReader();
reader.read().then(rs => {
const data = JSON.parse(rs.value)
sendResponse(data); //发送给前端。
})
}
).catch(
err => {
console.log(err)
}
)
});
}
)
如果出现问题了，记得看看自己在清单中是否申请了权限。
