检查我的用户以查看是否安装了我的扩展程序

Question

我有一个由vanilla js创建的简单网站，我创建了一个简单的chrome extensions

我想知道有什么方法可以确定我的访问者 chrome 是否有我的扩展程序

这是我的manifest.json

{
    "name": "Covid-19 Stats UK",
    "version": "1.0.0",
    "description": "latest covid data of UK",
    "manifest_version": 3,
    "author": "Sampurna Chapagain",
    "action":{
       "default_popup": "index.html",
        "default_title": "Latest Covid Report"
    }
}

Answer 1

如果您同时控制扩展和网站，则会想到两种方法：Web 可访问资源或站点扩展消息传递。

网络可访问资源

也许检查用户是否安装了您的扩展程序的最简单方法是使用 XMLHttpRequest 或 fetch() 尝试从扩展程序加载文件。默认情况下，扩展不会向网站公开其资源，但扩展作者可以使用清单中的 "web_accessible_resources" 键有选择地公开资源。以下示例适用于 Manifest V3 扩展。

{
  "name": "",
  "version": "",
  "manifest_version": 3,
  "web_accessible_resources": [
    {
      "matches": ["https://example.com/*"],
      "resources": [
        "1x1.png",                   // Expose a single file
        "web-accessible-resources/*" // Or a directory tree
      ]
    }
  ]
}

然后，将以下 sn-p 添加到您的站点以检查是否安装了扩展程序。

async function checkExtensionInstalled() {
  try {
    await fetch(`chrome-extension://a...z/1x1.png`);
    return true;
  } catch (e) {
    if (e instanceof TypeError && e.message == 'Failed to fetch') {
      return false;
    } else {
      throw e;
    }
  }
}

// Then in your site's buisness logic, do something like this
checkExtensionInstalled.then(installed => {
  if (installed) {
    console.log("The extension IS installed.");
  } else {
    console.log("The extension is NOT installed.")
  }
});

讯息

扩展平台允许网站和扩展直接相互通信，但双方必须相互了解才能正常工作。

以下示例改编自 Chrome 的official docs。

首先，将“externally_connectable”声明添加到您的扩展清单中。

  "externally_connectable": {
    "matches": ["https://*.example.com/*"]
  }

接下来，更新您站点的 JS 以向扩展程序发送消息。

// The ID of the extension we want to talk to.
const extensionId = "abcdefghijklmnoabcdefhijklmnoabc";
const messageBody = "Ping";

if (chrome?.runtime?.sendMessage) {
  chrome.runtime.sendMessage(extensionId, messageBody, function(response) {
    console.log("The extension IS installed.", response);
  });
} else {
  console.log("The extension is NOT installed.")
}

最后，在扩展程序的后台上下文中，为该消息添加一个侦听器。

function handleExternalMessage(message, _sender, sendResponse) {
  if (message === "Ping") {
    sendResponse("Pong");
  };
}

chrome.runtime.onMessageExternal.addListener(handleExternalMessage);