Question

在查看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");
    }
});

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

Answer 1

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

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

Answer 2

我不确定如何使用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");
};

Answer 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是更好的方法（回答我的评论将是锦上添花）：）

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

3 个答案: