Расширение Chrome: как определить, установлено ли расширение с помощью скриптов содержимого - PullRequest
Новая
       20

Расширение Chrome: как определить, установлено ли расширение с помощью скриптов содержимого

2 голосов
/ 16 февраля 2012

Я задаю этот вопрос после просмотра нескольких связанных вопросов по 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");
    }
});

Моя проблема в том, что предупреждение с сообщением not_installed всегда всплывает, прежде чем chrome сможет внедрить узел в DOM. Я прочитал об атрибуте run_at в manifest.json здесь . Но это тоже не решило проблему. Я перепробовал все три значения document_start, document_idle, document_end. Что я здесь не так делаю?

Ответы [ 3 ]

7 голосов
/ 16 февраля 2012

Похоже, у вас есть расширение и веб-сайт, в этом случае будет гораздо проще использовать Встроенная установка . 

if (typeof chrome !== "undefined" && typeof chrome.app !== "undefined" && chrome.app.isInstalled) {
  // extension is installed.
}
0 голосов
/ 17 февраля 2012

У меня это работает ...

  • Сделать расширение для вставки скрипта контента после загрузки 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 - лучший способ сделать это (ответом на мой комментарий будет глазурь на торте)

0 голосов
/ 16 февраля 2012

Я не уверен, как это сделать с JQuery, поскольку $("#something"), кажется, ищет только голову и тело? ... и нам нужно document.documentElement.Причина в том, что мы вставляем что-то в document_start и тогда нет тела / заголовка, но есть 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);

messages.js 

if (document.documentElement.querySelector("#HOST_SITE")) {
    alert("Installed");
} else {
    alert("Not Installed");
};
...