Chrome Extension: How to detect if an extension is installed using Content Scripts

Question

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?

When is the 'extension install script' executed? Did you check whether the insertion actually takes place and the div is inserted? — oliverguenther, Feb 16 '12 at 11:03

abraham · Accepted Answer · 2014-05-26T20:23:54.527

7

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.
}

edited May 26 '14 at 20:23

answered Feb 16 '12 at 16:13

abraham

46,583
10
100
152

1

Much better suggestion than mine, Id definitely go with this. – PAEz Feb 16 '12 at 16:45
@abraham - So this script works in any site? I mean I don't have to include the site domain somewhere? somewhere in like permissions or allowed URLs or something? – vikmalhotra Feb 17 '12 at 05:21
@ShiVik: Read the **verified site requirement** section from the link. – abraham Feb 17 '12 at 18:51
@abraham I am having problem with chrome.app.isInstalled. After the installation, it won't return true until I refresh my page or open another page through the extension. Is that the same case for you? Thx. – louis.luo Aug 07 '12 at 21:56
8

as far as I understand chrome.app.isInstalled refers to apps and NOT to extensions (my tests confirm this) – Pietro Mar 29 '13 at 09:14
1

Might want to include an additional check to make sure other browsers don't throw an error: if (typeof chrome !== "undefined" && chrome.app.isInstalled) { ... } – jesal Apr 26 '13 at 20:44
what extension did you check on this method? – huykon225 Nov 16 '21 at 06:59

score 0 · Answer 2 · answered Feb 16 '12 at 15:04

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

score 0 · Answer 3 · answered Feb 17 '12 at 05:34

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) :)

Chrome Extension: How to detect if an extension is installed using Content Scripts

3 Answers3

Linked