如何检测访客Chrome浏览器是否安装了我的自定义扩展？

针对你用原生JS搭建的网站和Manifest V3版本的Chrome扩展，下面提供两种可靠的检测方案：

方法一：请求扩展内的可访问资源 #

核心逻辑是让网站尝试请求一个扩展中对外暴露的资源，能成功请求则说明扩展已安装。

1. 修改扩展的manifest.json #

添加web_accessible_resources字段，指定一个网站可访问的空文件：

{
    "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"
    },
    "web_accessible_resources": [
        {
            "resources": ["check-installed.txt"],
            "matches": ["*://你的网站域名/*"] // 替换成你实际的网站域名，比如"*://example.com/*"
        }
    ]
}

然后在扩展根目录创建一个空的check-installed.txt文件。

2. 网站端原生JS检测代码 #

在你的网站中加入以下代码发起请求判断：

async function checkExtensionInstalled() {
    // 替换成你的扩展ID，可在Chrome扩展管理页（chrome://extensions/）开启开发者模式后查看
    const extensionId = "你的扩展ID";
    const resourceUrl = `chrome-extension://${extensionId}/check-installed.txt?t=${Date.now()}`; // 加时间戳避免缓存

    try {
        const response = await fetch(resourceUrl);
        if (response.ok) {
            console.log("扩展已安装");
            // 这里写扩展安装后的逻辑，比如显示专属提示、加载对应功能
        } else {
            console.log("扩展未安装");
        }
    } catch (error) {
        console.log("扩展未安装");
    }
}

// 调用检测函数
checkExtensionInstalled();

方法二：通过Chrome.runtime消息通信 #

让网站向扩展发送消息，扩展收到后返回响应，以此判断是否安装。

1. 扩展中添加消息监听 #

新建background.js文件，加入监听代码：

chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => {
    // 验证消息来源是你的网站，防止恶意调用
    if (sender.origin === "https://你的网站域名") {
        if (message.type === "check_installation") {
            sendResponse({ installed: true });
        }
    }
    return true; // 保持端口开放支持异步响应
});

然后修改manifest.json注册background脚本：

{
    // 原有字段保留
    "background": {
        "service_worker": "background.js"
    },
    "externally_connectable": {
        "matches": ["*://你的网站域名/*"] // 指定允许通信的网站域名
    }
}

2. 网站端检测代码 #

在网站中添加以下代码发送消息：

async function checkExtensionInstalled() {
    const extensionId = "你的扩展ID";
    try {
        const response = await chrome.runtime.sendMessage(extensionId, { type: "check_installation" });
        if (response?.installed) {
            console.log("扩展已安装");
            // 执行后续逻辑
        } else {
            console.log("扩展未安装");
        }
    } catch (error) {
        console.log("扩展未安装");
    }
}

// 先判断是否是Chrome环境，避免非Chrome浏览器报错
if (typeof chrome !== "undefined" && chrome.runtime) {
    checkExtensionInstalled();
} else {
    console.log("非Chrome浏览器，无需检测");
}

注意事项 #

• 两种方法都需要你获取扩展的ID，开启Chrome扩展管理页的开发者模式即可查看。
• 域名匹配规则要精准，避免其他网站滥用你的检测逻辑。

内容的提问来源于stack exchange，提问作者miladjurablu