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

我在看到几个相关的问题后提出了这个问题，在stackoverflow。我从how to detect if an extension is installed开始。我选择了在某些页面上使用内容脚本将正文添加到正文的方法。下面是我它是怎么...Chrome扩展：如何检测是否使用内容脚本安装了扩展

的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节点之前弹出。我在manifest.json over here中阅读了run_at属性。但是这也没有解决问题。我尝试了所有三个document_start,document_idle,document_end的值。我在这里做错了什么？

来源

2012-02-16 vikmalhotra

当了“扩展的安装脚本”执行？你检查插入是否实际发生并插入了div？ – oliverguenther 2012-02-16 11:03:10

是插入正在发生。我仔细检查了一下。 – vikmalhotra 2012-02-17 05:22:19

它看起来像您自己的扩展和网站，在这种情况下，使用Inline Installation会更容易。

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

来源

2012-02-16 16:13:46 abraham

比我的建议好得多，我肯定会跟这个一起去。 – PAEz 2012-02-16 16:45:43

@abraham - 那么这个脚本可以在任何网站上运行？我的意思是我不必在某个地方包含网站域名？某处在类似的权限或允许的网址或什么的？ – vikmalhotra 2012-02-17 05:21:05

@ShiVik：阅读链接中**验证的网站要求**部分。 – abraham 2012-02-17 18:51:30

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

来源

2012-02-16 15:04:10 PAEz

我得到这个工作...

让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是一种更好的方式来做到这一点（回答我的意见将是对锦上添花）:)

来源

2012-02-17 05:34:38 vikmalhotra

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

回答

相关问题