在页面多次刷新的情况下，插件会多次请求 api，数据和缓存缓存的数据需在 background 中，content 会在页面卸载

工具使用 webext-bridge <blockquot

pref: 使用 background js 缓存 api 查询的数据 about cratehub HOT 2 OPEN

hehehai commented on May 26, 2024 1

pref: 使用 background js 缓存 api 查询的数据

from cratehub.

Comments (2)

hehehai commented on May 26, 2024

消息传递

chrome extension onMessage, sendMessage 不支持直接异步，使用时需要注意 ref

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting === "hello")
      setTimeout(() => sendResponse({farewell: "goodbye"}), 1000)
  }

  // return true
);

直接使用，这里 sendMessage 的 response 是拿不到响应的，原因是 onMessage 的响应处理是同步的，这里在 setTimeout 的处理时，通信已关闭了，解决方法是：return true 表示惰性关闭，在sendReponse 后关闭。

这里也无法直接将 linsten 函数设置为异步，里面仅可使用 Promise then 的方式

from cratehub.

hehehai commented on May 26, 2024

工具使用 webext-bridge

webext-bridge 内部维护了通信序列，管理各端口（background, options ...）的通信，也做了兼容处理

async () => {
    const res = await sendMessage(
      "get-preferences",
      { sync: false, name: 'hehehai' },
      "background"
    )
    console.log(res)
  }

onMessage<{ name: string; sync: boolean }, "get-preferences">(
  "get-preferences",
  async ({ data }) => {
    console.log(data)
    const res = await fetch(`https://api.github.com/users/${data.name}`)
    return await res.json()
  }
)