月度归档： 2024 年 4 月

有些功能需要用到消息通讯，比如我们需要获取某个网站的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)
                }
            )
        });
    }
)

如果出现问题了，记得看看自己在清单中是否申请了权限。