首页 >web前端 >js教程 >如何修复 Chrome 扩展程序中孤立内容脚本导致的'扩展程序上下文无效”错误?

如何修复 Chrome 扩展程序中孤立内容脚本导致的'扩展程序上下文无效”错误?

Susan Sarandon
Susan Sarandon原创
2024-11-01 04:59:27897浏览

How to Fix

如何在 Chrome 扩展程序更新后删除孤立脚本

问题

无意中重新加载 Chrome 扩展程序,尤其是处于开发者模式的扩展程序,可能会创建孤立内容脚本。这些脚本仍然在后台运行,但与扩展的其余部分失去了通信,从而导致诸如“扩展上下文无效”和“未检查的runtime.lastError”之类的错误。

解决方案

孤立的内容脚本仍然可以接收 DOM 消息。删除它:

1.从新内容脚本发送消息:

  • 在新的工作内容脚本中,使用 window.dispatchEvent 向孤立脚本发送消息。
  • 使用唯一消息标识符,例如 orphanMessageId。

2。在孤立脚本中注销监听器:

  • 在孤立脚本中,为 orphanMessageId 定义一个监听器。
  • 在此监听器中,注销所有先前的监听器并取消全局变量。
  • 这使得旧脚本符合垃圾回收的条件。

3.后台脚本:

  • 在扩展重新加载/安装时重新注入内容脚本。

4.内容脚本:

  • 使用事件侦听器的命名函数来保留其引用。
  • 设置 window.running 属性来指示活动实例。
  • 收到 orphanMessageId 时,取消注册侦听器并将脚本标记为孤立脚本。

5.弹出脚本:

  • 发送消息之前检查是否存在工作内容脚本。
  • 利用ensureContentScript确保脚本注入。

示例代码:

background.js:

<code class="javascript">// Re-inject content script
chrome.runtime.onInstalled.addListener(() => {
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    chrome.tabs.executeScript(tabs[0].id, { file: 'content.js' });
  });
});</code>

content.js:

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

// Register named listeners
chrome.runtime.onMessage.addListener(onMessage);
document.addEventListener('mousemove', onMouseMove);

// Orphan flag and cleanup function
window.running = true;

function unregisterOrphan() {
  if (chrome.runtime.id) {
    // Not orphaned
    return;
  }
  window.removeEventListener(orphanMessageId, unregisterOrphan);
  document.removeEventListener('mousemove', onMouseMove);
  try {
    chrome.runtime.onMessage.removeListener(onMessage);
  } catch (e) {}
  return true;
}</code>

popup.js:

<code class="javascript">async function sendMessage(data) {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (await ensureContentScript(tab.id)) {
    return await chrome.tabs.sendMessage(tab.id, data);
  }
}

async function ensureContentScript(tabId) {
  try {
    const [{ result }] = await chrome.scripting.executeScript({
      target: { tabId },
      func: () => window.running === true,
    });
    if (!result) {
      await chrome.scripting.executeScript({
        target: { tabId },
        files: ['content.js'],
      });
    }
    return true;
  } catch (e) {}
}</code>

以上是如何修复 Chrome 扩展程序中孤立内容脚本导致的'扩展程序上下文无效”错误?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn