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).readywindow.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 回答