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

关键词：

【中文标题】Chrome 扩展程序：如何在 chrome 扩展程序更新后删除孤立的脚本【英文标题】：Chrome extension: How to remove orphaned script after chrom extension update 【发布时间】：2019-12-19 10:45:25 【问题描述】：

我有一个带有弹出页面的 chrome 扩展，它通过简单的一次性请求将布尔变量传递给我的内容页面。然后，内容页面将根据从弹出页面传递的布尔变量的状态执行一些操作。在我不小心删除了扩展程序（仍处于开发人员模式，扩展程序已解压缩）并不得不重新加载它之前，这一直运行良好。

这导致弹出检查控制台中出现扩展上下文无效错误，并且网页控制台似乎验证了弹出页面和内容脚本没有通信。启用 chrome 扩展程序的网页显示以下错误：Unchecked runtime.lastError: The message port closed before a response was received。

根据我已经看到的一些答案，似乎重新加载我的 chrome 扩展程序已经从我的扩展程序的其余部分“孤立”了我的原始工作内容脚本，这导致了前面提到的“Unchecked runtime.lastError: The message port在收到回复之前关闭。”网页控制台出错。

我相信我不能只是再次重新注入我的内容脚本，因为我的内容脚本有 DOM 事件侦听器。有没有可能删除当前正在运行的孤立脚本的方法？或者有什么解决这个问题的建议？

这是我的 popup.js：

chrome.tabs.query('active': true, 'currentWindow': true, function (tabs) 
    chrome.tabs.sendMessage(tabs[0].id, cTabSettings: (some boolean variable));
);

这是我的 content.js：

// Listening for message from popup.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) 
    if (request.cTabSettings === true) 
      enabled = true;
     else if (request.cTabSettings === false) 
      enabled = false;
    
);

// DOM listener and action
document.addEventListener('mousemove', function (e) 
   // Some action
   chrome.runtime.sendMessage(sender: "content", selText : "blah", function () 
      console.log("success");
   );
, false);

我使用的是 chrome 开发者模式版本 76。只是换个说法，这个 chrome 扩展正在工作（内容脚本与弹出窗口通信），然后我意外地重新加载了它。

【问题讨论】：

【参考方案1】：

由于孤立的内容脚本仍然可以接收 DOM 消息，例如，通过 window 从您的新工作内容脚本发送一条到幻影内容脚本。收到消息后，您将取消注册所有侦听器（并取消所有全局变量），这也将使您的旧脚本符合自动垃圾收集的条件。

content.js：

var orphanMessageId = chrome.runtime.id + 'orphanCheck';
window.dispatchEvent(new Event(orphanMessageId));
window.addEventListener(orphanMessageId, unregisterOrphan);

// register all listeners with named functions to preserve their object reference
chrome.runtime.onMessage.addListener(onMessage);
document.addEventListener('mousemove', onMouseMove);

// the popup script checks it to see if a usable instance of content script is running
window.running = true;

function unregisterOrphan() 
  if (chrome.i18n) 
    // someone tried to kick us out but we're not orphaned! 
    return;
  
  window.removeEventListener(orphanMessageId, unregisterOrphan);
  document.removeEventListener('mousemove', onMouseMove);
  try 
    // 'try' is needed to avoid an exception being thrown in some cases 
    chrome.runtime.onMessage.removeListener(onMessage);
   catch (e) 
  return true;
);

function onMessage(msg, sender, sendResponse) 
  //...........


function onMouseMove(event) 
  // DOM events still fire in the orphaned content script after the extension
  // was disabled/removed and before it's re-enabled or re-installed
  if (unregisterOrphan())  return 
  //...........

我假设 popup.html 会加载 WebExtension browser API polyfill，因为它允许我们使用 async/await 语法而不是令人难以置信的回调地狱，从而使生活变得更加轻松。

<script src="browser-polyfill.min.js"></script>

popup.js 应确保在发送消息之前注入内容脚本：

async function sendMessage(data) 
  const [tab] = await browser.tabs.query(active: true, currentWindow: true);
  if (await ensureContentScript(tab.id)) 
    return await browser.tabs.sendMessage(tab.id, data);
  


async function ensureContentScript(tabId) 
  try 
    const [running] = await browser.tabs.executeScript(tabId, 
      code: 'window.running === true',
    );
    if (!running) 
      await browser.tabs.executeScript(tabId, file: 'content.js');
    
    return true;
   catch (e) 

【讨论】：

【参考方案2】：

请查看this answer

这不是关于删除脚本，而是为了避免错误。

【讨论】：

如何在chrome浏览器安装第三方扩展

简单教你·Chrome浏览器如何安装第三方扩展程序谷歌在2012年ChromeV21+开始禁止第三方扩展静默安装，2014年ChromeV30+开始任何非Chrome网上应用店(ChromeWebStore)下载的扩展将自动停用。自己瞎折腾一个Chrome插件crx打包之后拖进chrome://exten... 查看详情

如何在 Chrome 扩展程序中录制音频？

】如何在Chrome扩展程序中录制音频？【英文标题】：HowtorecordaudioinaChromeExtension?【发布时间】：2011-11-3015:23:52【问题描述】：设置chrome扩展程序以从麦克风录制音频的最简单方法是什么？我看到有一个有效的experimentalspeechinputAPI... 查看详情

如何在 Chrome 扩展程序中禁用同源策略？

】如何在Chrome扩展程序中禁用同源策略？【英文标题】：HowtodisablesameoriginpolicyinChromeextension?【发布时间】：2011-08-2810:27:27【问题描述】：也许有一些设置可以在扩展上下文中禁用它。因为我正在开发一个扩展，所以我应该有责... 查看详情

如何在 chrome 扩展本机消息传递和 c# 应用程序之间发送/接收消息

】如何在chrome扩展本机消息传递和c#应用程序之间发送/接收消息【英文标题】：Howtosend/receivemessagebetweenchromeextensionnativemessagingandc#app【发布时间】：2016-05-2017:06:53【问题描述】：我是chrome扩展的新手，所以我需要通过使用原生消... 查看详情

如何将 blob 从 Chrome 扩展程序传递到 Chrome 应用程序

】如何将blob从Chrome扩展程序传递到Chrome应用程序【英文标题】：HowtopassablobfromaChromeextensiontoaChromeapp【发布时间】：2014-10-2909:51:38【问题描述】：一点背景我已经在Chrome扩展程序上工作了几天，该扩展程序每天多次截取给定网页... 查看详情

如何使用 chrome.tabs.getCurrent 在 Chrome 扩展程序中获取页面对象？

】如何使用chrome.tabs.getCurrent在Chrome扩展程序中获取页面对象？【英文标题】：Howdoyouusechrome.tabs.getCurrenttogetthepageobjectinaChromeextension?【发布时间】：2011-10-0618:58:33【问题描述】：该代码旨在将用户正在查看的页面的当前选项卡对... 查看详情

如何在 chrome 扩展中实现支付

】如何在chrome扩展中实现支付【英文标题】：Howtoimplementpaymentsinchromeextension【发布时间】：2021-03-1510:28:57【问题描述】：我有一个slim4应用程序，它将使用客户端的firebaseauth提供的JWT令牌来授权用户对某些端点进行ajax调用。客户... 查看详情

如何在 chrome 扩展程序中获取选项卡通知，以便扩展程序可以在每次新通知到达时显示桌面警报

】如何在chrome扩展程序中获取选项卡通知，以便扩展程序可以在每次新通知到达时显示桌面警报【英文标题】：HowcanIgettabnotificationsinchromeextension,sothattheextensioncanshowdesktopalerteachtimewhennewnotificationarrives【发布时间】：2011-09-2808:22:5... 查看详情

如何自动重新加载我正在开发的 Chrome 扩展程序？

】如何自动重新加载我正在开发的Chrome扩展程序？【英文标题】：HowdoIauto-reloadaChromeextensionI\'mdeveloping?【发布时间】：2011-02-2703:23:54【问题描述】：我希望每次在扩展文件夹中保存文件时都重新加载我的chrome扩展，而不必在chrome... 查看详情

如何同步 chrome 扩展选项

】如何同步chrome扩展选项【英文标题】：Howtosyncchromeextensionoptions【发布时间】：2011-05-1123:06:46【问题描述】：我制作了一个带有选项页面的Chrome扩展程序。数据保存在本地存储中并且可以正常工作。Chrome不会将本地存储同步到... 查看详情

在 Chrome 扩展程序中，如何确保在使用 chrome-promise 的下一个承诺之前解决上一个承诺？

】在Chrome扩展程序中，如何确保在使用chrome-promise的下一个承诺之前解决上一个承诺？【英文标题】：InaChromeextension,howtoensurepreviouspromiseresolvesbeforethenextoneusingchrome-promise?【发布时间】：2017-11-0904:29:33【问题描述】：我一直在使... 查看详情

在开发 chrome 扩展程序时，如何打开一个空白页来运行脚本？

】在开发chrome扩展程序时，如何打开一个空白页来运行脚本？【英文标题】：WhendevelopingachromeextensionhowcanIopenablankpagetorunascripton?【发布时间】：2013-10-2019:42:02【问题描述】：我正在创建一个chrome扩展，它需要打开一个空白页面，... 查看详情

如何在 Chrome 扩展中使用 fontawesome？

】如何在Chrome扩展中使用fontawesome？【英文标题】：HowtousefontawesomeinChromeExtension?【发布时间】：2017-05-0509:18:23【问题描述】：我正在开发一个显示在特定网站上的GoogleChrome扩展程序。我想在我的chrome扩展中使用Fontawesome。当我尝... 查看详情

如何从chrome浏览器中导出扩展程序为crx文件？

1.chrome扩展程序的安装目录在哪里？在哪个文件夹？找到插件所在的文件夹。默认位置未为C:Users“你的用户名”AppDataLocalGoogleChromeUserDataDefaultExtensions，也可以先找到chrome安装位置，再点“UserData”-"Default"--"Extensions"... 查看详情

如何在 Chrome 扩展程序 browser_action 中登录 Google？

】如何在Chrome扩展程序browser_action中登录Google？【英文标题】：HowcanIsignintoGoogleinsideaChromeExtensionbrowser_action?【发布时间】：2020-04-1919:26:40【问题描述】：我试图让这一切尽可能简单，以便它可以成为处于相同情况的其他人的资源... 查看详情

Chrome 扩展程序：如何在新标签页中打开链接？

】Chrome扩展程序：如何在新标签页中打开链接？【英文标题】：Chromeextension:Howtoopenalinkinnewtab?【发布时间】：2013-05-0609:56:31【问题描述】：在我的***文件夹中，我有***.ico和2个波纹管文件。将其导入Chrome时，它​​会在地址栏中... 查看详情

Chrome 扩展程序 |如何在 CDN 的内容和后台脚本中包含库

】Chrome扩展程序|如何在CDN的内容和后台脚本中包含库【英文标题】：ChromeExtension|Howtoincludelibraryincontentandbackgroundscriptsfromcdn【发布时间】：2016-10-0305:58:21【问题描述】：我的Chrome扩展程序有两个文件：内容和后台脚本。我还需要... 查看详情

如何触发对 chrome 扩展按钮的点击？

】如何触发对chrome扩展按钮的点击？【英文标题】：Howtotriggeraclickonachromeextensionbutton?【发布时间】：2018-04-1300:51:34【问题描述】：我正在使用SeleniumWebDriver构建一个自动化测试套件。在某个时候，我必须通过打开或关闭Chrome扩展... 查看详情