如何防止 Chrome 扩展程序中出现“Unchecked runtime.lastError: The Message Port Closed...”错误？

揭开罪魁祸首：孤立的脚本和扩展程序更新

意外重新加载 Chrome 扩展程序后，您可能会遇到一个讨厌的错误：“未经检查的运行时” .lastError：消息端口在收到响应之前关闭。”此错误源于创建孤立脚本，这会中断弹出窗口和内容页面之间的通信。

掌握孤立脚本概念

孤立脚本是幽灵般的残余即使在更新或重新加载扩展后，先前加载的扩展仍会继续存在。这个幽灵脚本拦截了新内容脚本的消息，导致通信中断。

根除孤立脚本

要消除这个幽灵脚本，我们必须首先确定它是否是仍然有反应。如果是，我们可以通过窗口对象从新内容脚本中调度消息。收到此消息后，孤立脚本应取消注册所有事件侦听器并准备垃圾收集。

在重新加载时补充内容脚本

为了防止此问题再次出现，我们可以在从弹出页面发送消息之前检查是否存在可用的内容脚本。如果不存在，我们可以再次注入内容脚本。

内容脚本示例代码

要实现上述解决方案，请合并此修改后的 content.js 脚本：

<code class="javascript">var orphanMessageId = chrome.runtime.id + 'orphanCheck';
window.dispatchEvent(new Event(orphanMessageId));
window.addEventListener(orphanMessageId, unregisterOrphan);

// ... (register named functions for event listeners)

window.running = true;

function unregisterOrphan() {
  // ... (deregister listeners and nullify variables)
}

function onMessage(msg, sender, sendResponse) {
  // ... (handle message)
}

function onMouseMove(event) {
  // ... (DOM event handler)
}</code>

弹出页面验证

要确保在消息传输之前注入内容脚本，请使用以下代码段增强 popup.js 脚本：

<code class="javascript">async function sendMessage(data) {
  // ... (fetch active tab)
  if (await ensureContentScript(tab.id)) {
    return await chrome.tabs.sendMessage(tab.id, data);
  }
}

async function ensureContentScript(tabId) {
  // ... (check for existing content script)
  if (!result) {
    await chrome.scripting.executeScript({
      // ... (inject content script)
    });
  }
  return true;
}</code>

通过实施这些措施，您可以消除孤立的脚本并保持扩展程序的弹出窗口和内容页面之间的无缝通信。

以上是如何防止 Chrome 扩展程序中出现“Unchecked runtime.lastError: The Message Port Closed...”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！