2

在查看了有关 stackoverflow 的几个相关问题后，我提出了这个问题。我从如何检测是否安装了扩展开始。我选择了在某些页面上使用内容脚本将 div 添加到正文的方法。这就是我是如何做到的......

清单.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 中的run_at属性。但这也没有解决问题。我尝试了所有三个, ,值。我在这里做错了什么？document_startdocument_idledocument_end

4

3 回答 3

7

它看起来像您自己的扩展程序和网站，在这种情况下使用内联安装会容易得多。

if (typeof chrome !== "undefined" && typeof chrome.app !== "undefined" && chrome.app.isInstalled) {
  // extension is installed.
}
于 2012-02-16T16:13:46.653 回答
0

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

清单.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);

通知.js

if (document.documentElement.querySelector("#HOST_SITE")) {
    alert("Installed");
} else {
    alert("Not Installed");
};
于 2012-02-16T15:04:10.187 回答
0

我得到了这个工作...

  • 在加载 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");
    }
};

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

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

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

于 2012-02-17T05:34:38.680 回答