内容脚本并非总是会收到来自后台脚本的消息

Question

我遇到一个问题，我的后台脚本始终正常运行并正在发送消息，但是内容脚本并不总是收到该消息。

后台脚本

chrome.webNavigation.onHistoryStateUpdated.addListener(details => {
  chrome.tabs.query({ active: true }, tabs => {
    const tabId = tabs[0].id

    if (!tabId) {
      return
    }

    console.log('sending message!', tabId)

    chrome.tabs.sendMessage(tabId, { action: 'hello' }, response => {
      console.log({ response })
    })
  })
})

内容脚本

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'hello') {
    console.log('message received!')
    sendResponse('message received in content script!')
  }
})

这是一个可行的场合：

内容脚本控制台

后台脚本控制台

---

当我刷新页面时，我的后台脚本执行发送消息，但是我的内容脚本未接收到消息。

内容脚本控制台

后台脚本控制台

---

我需要刷新该页面大约十二次，然后才能再次使它工作：

内容脚本控制台

后台脚本控制台

---

这是我的manifest.json，以防万一：

{
  "manifest_version": 2,
  "name": "myproject",
  "version": "0.1.0",
  "background": {
    "scripts": ["./npm-background.js"],
    "persistent": false
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "content_scripts": [
    {
      "matches": [
        "https://www.npmjs.com/*",
        "https://npmjs.com/*"
      ],
      "js": ["./npm-content.js"],
      "run_at" : "document_end"
    }
  ],
  "permissions": [
    "tabs",
    "webNavigation"
  ]
}

任何建议将不胜感激，谢谢！