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

发布于 2025-01-05 18:34:34 字数 1405 浏览 0 评论 0原文

我在查看 stackoverflow 上的几个相关问题后提出这个问题。我从如何检测是否安装了扩展开始。我选择了在某些页面上使用内容脚本将 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 注入节点之前，总是会弹出带有消息 not_installed 的警报在 DOM 中。我在 manifest.json 中阅读了有关 run_at 属性的信息。但这也没有解决问题。我尝试了所有三个 document_start、document_idle、document_end 值。我在这里做错了什么？

原文

I am asking this question after looking at several related questions on stackoverflow. I started with how to detect if an extension is installed. I opted for the method where I add a div to body using content scripts on some pages. Here is how I did it...

manifest.json

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

insert_node.js (content script)

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

host page

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

extension install script

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

My problem is that the alert with message not_installed always pops up before the chrome can inject the node in DOM. I read about run_at attribute in manifest.json over here. But that didn't solve the problem either. I tried all the three document_start, document_idle, document_end values. What am I doing wrong over here?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北恋 2025-01-12 18:34:34

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

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

It looks like your own the extension and website, in which case it would be much easier to use Inline Installation.

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

回复收藏 0 原文

眼眸 2025-01-12 18:34:34

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

Im not sure how to do this with JQuery as $("#something") only seems to search the head and body?...and we need document.documentElement. Reason being that we are inserting something at document_start and there's no body/head then, but there is 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");
};

回复收藏 0 原文

傻比既视感 2025-01-12 18:34:34

我得到了这个工作...

使扩展在 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 是实现此目的的更好方法（对我的评论的回答将是锦上添花）:)

I got this working...

Make the extension insert content script after DOM loads but before other resources like images are loaded

manifest.json (added "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/*"
    ]
}

use window.onload instead of $(document).ready

insert_node.js (changed the $(document).ready to window.onload)

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

However, I don't completely understand why using window.onload works and $(document).ready does not.

May be someone can shed some light on that?

Also I agree with @abraham that using chrome.app.isInstalled is a better way to do this (answer to my comment would be the icing on cake) :)

回复收藏 0 原文

~没有更多了~