Webextkits Docs

Appearance

注意事项 ​

contentScript 的中转 ​

由于 background 无法直接发送消息到 injectScript 因此需要 contentScript 充当 bridge

因此请不要删除 contentScript 中下面的代码

typescript
import { extId } from "@/const";
import { useMessageBridgeContentScript } from "@webextkits/messages-center/contentScript";

useMessageBridgeContentScript(extId);
import { extId } from "@/const";
import { useMessageBridgeContentScript } from "@webextkits/messages-center/contentScript";

useMessageBridgeContentScript(extId);

消息监听器的唯一性 ​

根据 chrome 官方文档的说明

If you use callbacks, the sendResponse() callback is only valid if used synchronously, or if the event handler returns true to indicate that it will respond asynchronously. The sendMessage() function's callback is automatically invoked if no handlers return true or if the sendResponse() callback is garbage-collected.

如果你在 background 中有任何对 runtime.onMessageExternal.addListener 的监听函数，并且返回了值，这可能导致整个消息监听处理失效。

比如下面的写法

错误的方式 ❌ ​

typescript
//  这里使用 async 标识符，代表着这个事件监听器始终有返回值那就是 `Promise`，
//  因此导致其他的事件监听都会失效
runtime.onMessageExternal.addListener(async (message, sender) => {
  if (message.greeting === "dosomething") {
    //  todo someting
  }
});
//  这里使用 async 标识符，代表着这个事件监听器始终有返回值那就是 `Promise`，
//  因此导致其他的事件监听都会失效
runtime.onMessageExternal.addListener(async (message, sender) => {
  if (message.greeting === "dosomething") {
    //  todo someting
  }
});

请避免直接在 addListener 传入 async function

如果你需要使用异步，就这样写

正确的方式 ✅ ​

typescript
runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
  if (message.greeting === "dosomething") {
    dosomething.then((res) => {
      sendResponse(res);
    });
    return true;
  }
});
runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
  if (message.greeting === "dosomething") {
    dosomething.then((res) => {
      sendResponse(res);
    });
    return true;
  }
});

这也是根据 Google 官方文档的写法 https://developer.chrome.com/docs/extensions/mv3/messaging/

Powered by Vitepress