检测 Chrome 扩展何时安装，无需内联安装

Detect when Chrome extension was installed, without inline installation

当安装是通过 Chrome Web Store 而不是内联安装完成时，如何通知打开的选项卡刚刚安装了 Chrome 扩展？

上下文

自 2018 年 6 月及以后 Chrome has deprecated inline installation 因此，如果安装了扩展程序，以下机制会收到通知 从现在开始将不起作用：

chrome.webstore.install(url, successCallback, failureCallback)

从现在开始，扩展必须只能通过网上应用店安装。

我们构建了一个屏幕共享扩展程序，允许提示用户共享他的屏幕。

当我们的用户点击 "Share Screen" 时，我们打算将他们重定向到网上应用店中的 Chrome 扩展，并在他们安装扩展后立即重新触发共享屏幕功能。

这是我从 background script (w/o using a content script 中解决它的方法：

background.js

  • 监听 onInstalled 事件。
  • 查询与您要通知的 URL 相匹配的所有打开的选项卡。
  • 在每个选项卡中执行一个小脚本，postMessage 通知 安装成功。
chrome.runtime.onInstalled.addListener(function listener(details) {
  if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
    chrome.tabs.query({
      url: [
        'https://localhost:3000/*',
        'https://staging.foo.com/*',
        'https://production.foo.com/*'
      ]
    }, tabs => {
      Array.from(tabs).forEach(tab => {
        chrome.tabs.executeScript(tab.id, {
          code: `window.postMessage('screenshare-ext-installed', window.origin);`
        });
      });
    });

    chrome.runtime.onInstalled.removeListener(listener);
  }
});

manifest.json

只需确保 externally_connectable 和 permissions 都声明 您要通知的站点的 URL 模式。

"externally_connectable": {
    "matches": [
    "https://localhost:3000/*",
    "https://staging.foo.com/*",
    "https://production.foo.com/*"
  ]
},
"permissions": [
  "desktopCapture",
  "https://localhost:3000/*",
  "https://staging.foo.com/*",
  "https://production.foo.com/*"
],

网页

只需在某处收听由 postMessage 发出的消息 安装成功后的扩展。

window.onmessage = e => {
  if (e.data === 'screenshare-ext-installed') {
    // extension successfully installed
    startScreenShare()
  }
}

学分