Chrome 扩展：如何检测是否使用内容脚本安装了扩展答案

【问题标题】：Chrome Extension: How to detect if an extension is installed using Content ScriptsChrome 扩展：如何检测是否使用内容脚本安装了扩展
【发布时间】：2012-03-07 17:17:35
【问题描述】：

在查看了有关 stackoverflow 的几个相关问题后，我提出了这个问题。我从how to detect if an extension is installed 开始。我选择了在某些页面上使用内容脚本将 div 添加到正文的方法。这是我的做法...

manifest.json

{
    "name": "Install Check",
    "content_scripts": [
        {
            "matches": ["http://host.com/*"],
            "js" : ["insert_node.js"]
        }
    ],
    "permissions": [
        "tabs", "host.com/*"
    ]
}

insert_node.js（内容脚本）

var insert_node = document.createElement('div');
insert_node.id = "HOST_SITE";
document.body.appendChild(insert_node);

主机页面

<html>
<head>
</head>
<body>
    <h1>This is a host site. Welcome!!!</h1>
    <script src="jquery.js"></script>
    <script src="notification.js"></script>
</body>
</html>

扩展安装脚本

$(document).ready(function() {
    if ($('#HOST_SITE').length > 0) {
        alert("you have our extension installed");
    } else {
        alert("not installed");
    }
});

我的问题是带有消息not_installed 的警报总是在 chrome 可以在 DOM 中注入节点之前弹出。我在manifest.json over here 中读到了run_at 属性。但这也没有解决问题。我尝试了所有三个 document_start、document_idle、document_end 值。我在这里做错了什么？

【问题讨论】：

“扩展安装脚本”何时执行？您是否检查过插入是否实际发生并插入了 div？
是的，正在插入。我仔细检查了。

标签： google-chrome google-chrome-extension inject content-script

【解决方案1】：

我不确定如何使用 JQuery 执行此操作，因为 $("#something") 似乎只搜索头部和身体？...我们需要 document.documentElement。原因是我们在 document_start 插入了一些东西，然后没有 body/head，但是有 documentElement。

manifest.json

{
    "name": "Install Check",
    "content_scripts": [
        {
            "matches": ["HOST"],
            "js" : ["myscript.js"],
            "run_at":"document_start"
        }
    ],
    "permissions": [
        "tabs", "HOST"
    ],
    "version":"1.0"
}

myscript.js

var insert_node = document.createElement('div');
insert_node.id = "HOST_SITE";
document.documentElement.appendChild(insert_node);

notification.js

if (document.documentElement.querySelector("#HOST_SITE")) {
    alert("Installed");
} else {
    alert("Not Installed");
};

【讨论】：

【解决方案2】：

它看起来像你自己的扩展和网站，在这种情况下使用Inline Installation会更容易。

if (typeof chrome !== "undefined" && typeof chrome.app !== "undefined" && chrome.app.isInstalled) {
  // extension is installed.
}

【讨论】：

比我的建议要好得多，我绝对同意这个。
@abraham - 所以这个脚本适用于任何网站？我的意思是我不必在某处包含站点域？在类似权限或允许的 URL 之类的地方？
@ShiVik：阅读链接中的已验证站点要求部分。
据我了解 chrome.app.isInstalled 指的是应用程序而不是扩展程序（我的测试证实了这一点）
可能需要额外检查以确保其他浏览器不会抛出错误： if (typeof chrome !== "undefined" && chrome.app.isInstalled) { ... }

【解决方案3】：

我得到了这个工作......

在加载 DOM 之后但在加载其他资源（如图像）之前使扩展插入内容脚本

manifest.json（添加"run_at": "document_end"）

{
    "name": "Install Check",
    "content_scripts": [
        {
            "matches": ["http://host.com/*"],
            "js" : ["insert_node.js"],
            "run_at": "document_end"
        }
    ],
    "permissions": [
        "tabs", "host.com/*"
    ]
}

使用window.onload 而不是$(document).ready

insert_node.js（将$(document).ready 更改为window.onload）

window.onload = function() {
    if ($('#HOST_SITE').length > 0) {
        alert("you have our extension installed");
    } else {
        alert("not installed");
    }
};

但是，我不完全理解为什么使用 window.onload 有效而 $(document).ready 无效。

可能有人可以对此有所了解吗？

我也同意 @abraham 的观点，即使用 chrome.app.isInstalled 是一种更好的方法（对我的评论的回答将是锦上添花）:)

【讨论】：