检查用户是否安装了某个扩展 [英] Checking if user has a certain extension installed
问题描述
我刚刚发现 Screen Capture by Google 扩展程序使我网站的 window.onresize 事件不会触发.
I just found out that the Screen Capture by Google extension makes my website's window.onresize event not fire.
我想执行 javascript 检查以查看用户是否安装了 ScreenCapture，如果安装了，请警告用户该问题.
I want to perform a javascript check to see if the user has ScreenCapture installed and if so, warn the user of the problem.
一年前我想我听说过一些 javascript 代码可以做到这一点，也许使用了一些谷歌 API，但我不记得了.
A year ago I think I heard of some javascript code that could do this, maybe using some google API, but I don't remember.
对此有任何见解吗?我还没有开发任何扩展，所以我真的不知道它们是如何工作的.
Any insight on this? I haven't developed any extensions so I don't really know how they work.
所以我被要求展示一些代码.正如我之前的问题所见( window.onresize不是在 Chrome 中触发，而是在 Chrome Incognito 中触发)，问题发生在任何 window.onresize 事件函数上，所以我认为我的代码并不重要.
So I have been asked to show some code. As seen in my previous question ( window.onresize not firing in Chrome but firing in Chrome Incognito ), the problem occurs on any window.onresize event function, so I don't think my code really matters.
另外，我的代码很多，我不知道要粘贴多少，或者是否有帮助.
Also, there is quite a lot of my code, I don't know how much of it to paste or if it would be helpful.
var debounce = function (func, threshold, execAsap)
{
var timeout;
return function debounced () {//alert("1.1 Y U NO WORK?");
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
}
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
};
window.onresize = debounce(function (e) { //alert("1.2 Y U NO WORK?");
flag = true;
var point = window.center({width:1,height:1});
doCenter(point);
// does something here, but only once after mouse cursor stops
}, 100, false);
我想强调的是，问题不是由于去抖动造成的.window.onresize = t;function t (e) { alert("wtf?");} 也不起作用.
I would like to stress that the problem is not due to the debounce. window.onresize = t; function t (e) { alert("wtf?");} won't work either.
结果如下:
var screenCapture = null;
var screenCaptureImg = document.createElement("img");
screenCaptureImg.setAttribute("src", "chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/images/arrow.png");
/*
* Add event listeners for both "load"- and "error"-event
* Set the variable showing the existence of the extension by
* setting it to "true" or "false" according to the fired event
*/
screenCaptureImg.addEventListener("load", doLoad, false);
function doLoad(e){
screenCapture = true; //removeImgTag(e);
alert("I've so cleverly detected that your Chrome has the ScreenCapture extension enabled.
This extension interferes with my website's DOM and long story short, it won't be able to scale properly.
So please disable it.
Consider this extension: "Disable All Extensions Plus", it's a handy selective disabler.");
}
screenCaptureImg.addEventListener("error", function(e){
screenCapture = false; //removeImgTag(e);
}, false);
/*
function removeImgTag(e) {
e.currentTarget.parentNode.removeChild(e.currentTarget);
}
*/
请注意，我无法让 removeImgTag 工作，因为(至少在 chrome 中)，我似乎无法按顺序访问 document 对象在这些事件函数中从我的页面创建或删除元素.这也是为什么我要显示一个 alert 而不是优雅地编写一个 document.getElementById("something").innerHTML=...
Note that I couldn't get removeImgTag to work, because (at least in chrome), I don't seem to have access to the document object in order to create or remove elements from my page, from within these event functions. This is also why I'm displaying an alert instead of elegantly writing up a document.getElementById("something").innerHTML=...
推荐答案
要检测 Chrome 中是否安装了扩展程序，您可以检查扩展程序中包含的已知资源，例如图像.使用以下 URL 模式引用扩展程序的资源:
To detect if an extension is installed in Chrome, you can check for a known resource included in the extension such as an image. Resources for the extension are referenced using the following URL pattern:
chrome-extension://<extensionID>/<pathToFile>
基本的检测技术包括创建一个隐藏的图像标签并将加载和错误事件附加到它以查看图像是否加载(如此处 用于 Firefox):
The basic detection technique involves creating a hidden image tag and attaching load and error events to it to see if the image loads (as described here for Firefox):
extensionImg.setAttribute("src", "chrome-extension://<INSERT EXTENSION ID HERE>/images/someImage.png"); // See below for discussion of how to find this
/*
* Add event listeners for both "load"- and "error"-event
* Set the variable showing the existence of the extension by
* setting it to "true" or "false" according to the fired event
*/
extensionImg.addEventListener("load", function(e) {
extensionExists = true;
removeImgTag(e);
}, false);
extensionImg.addEventListener("error", function(e) {
extensionExists = false;
removeImgTag(e);
}, false);
function removeImgTag(e) {
e.currentTarget.parentNode.removeChild(e.currentTarget);
}
在 Chrome 配置中检查扩展程序的安装目录，找到可能的检测目标.在我的 Linux 工作站上，扩展位于:
Check the installation directory of the extension in the Chrome configuration to find a likely target for detection. On my Linux workstation extensions are located in:
~/.config/chromium/Default/Extensions
你可以看到我现在安装了 3 个扩展:
You can see that I have 3 extensions installed right now:
~/.config/chromium/Default/Extensions$ ls
cpecbmjeidppdiampimghndkikcmoadk nmpeeekfhbmikbdhlpjbfmnpgcbeggic
cpngackimfmofbokmjmljamhdncknpmg
奇怪的名称是扩展程序上传到 Chrome 网上应用店时为其指定的唯一 ID.您可以从网上商店或通过转到扩展选项卡(扳手 -> 扩展)并将鼠标悬停在指向相关扩展的链接上或在这种情况下为屏幕截图(由 Google)"获取 ID(注意带星号的扩展)身份证):
The odd looking names are the unique IDs given to the extension when it is uploaded to the Chrome webstore. You can obtain the ID either from the webstore or by going to the Extensions tab (wrench -> Extensions) and hovering over the link to the extension in question, or "Screen Capture (by Google)" in this case (note the asterisked extension ID):
https://chrome.google.com/webstore/detail/**cpngackimfmofbokmjmljamhdncknpmg**
扩展目录中会有一个或多个版本；你可以忽略这一点.在版本目录中是扩展的实际内容:
In the extension directory there will be one or more versions; you can ignore this. Within the version directory is the actual content of the extension:
~/.config/chromium/Default/Extensions/cpngackimfmofbokmjmljamhdncknpmg/5.0.3_0$ ls
account.js images page.js sina_microblog.js
ajax.js isLoad.js picasa.js site.js
background.html _locales plugin style.css
editor.js manifest.json popup.html ui.js
facebook.js notification.html sha1.js upload_ui.js
hotkey_storage.js oauth.js shortcut.js
hub.html options.html showimage.css
i18n_styles page_context.js showimage.html
在 Screen Capture 扩展的情况下，有许多图像可供使用:
In the case of the Screen Capture extension there are a number of images to use:
~/.config/chromium/Default/Extensions/cpngackimfmofbokmjmljamhdncknpmg/5.0.3_0/images$ ls
arrow.png icon_128.png icon_save.png print.png
copy.png icon_16.png line.png region.png
cross.png icon_19.png loading.gif screen.png
custom.png icon_32.png loading_icon.gif sina_icon.png
delete_account_icon.png icon_48.png mark.png toolbar_bg.png
down_arrow.png icon_close.png picasa_icon.png upload.png
facebook_icon.png icon_copy.png popup_bg.jpg whole.png
这些可以在这个 URL 下引用:
These can be referenced under this URL:
chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/images/arrow.png
这种技术显然依赖于扩展内容的稳定性.我建议使用看起来可能在所有版本中都保留的图像.
This technique obviously depends on the stability of the content of the extension. I recommend using an image that looks likely to remain through all versions.
如上所述，可以使用相同的技术来检测 Firefox 扩展.在这种情况下，内容 URL 如下所示:
As mentioned above, the same technique can be used to detect Firefox extensions. In this case the content URL looks like this:
chrome://<EXTENSION NAME>/content/<PATH TO RESOURCE>
在我的 Linux 工作站上，Firefox 扩展位于:
On my Linux workstation Firefox extensions are located in:
~/.mozilla/firefox/<USER PROFILE ID>/extensions
<用户个人资料 ID>看起来像这样:h4aqaewq.default"
Where <USER PROFILE ID> looks something like this: "h4aqaewq.default"
你可以看到我现在安装了 2 个扩展，一个是目录安装，另一个是 XPI(发音为zippy") 文件:
You can see that I have 2 extensions installed right now, one of which is a directory installation and the other of which is a XPI (pronounced "zippy") file:
~/.mozilla/firefox/h4aqaewq.default/extensions$ ls
{3e9a3920-1b27-11da-8cd6-0800200c9a66} staged
firebug@software.joehewitt.com.xpi
staged"目录是 Firefox 保存将要更新的扩展的地方(我认为).带括号的GUID目录是基于目录的扩展安装，.xpi文件是Firebug.
The "staged" directory is where Firefox keeps extensions that will be updated (I think). The GUID directory with the brackets is a directory-based extension installation, and the .xpi file is Firebug.
注意:XPI 即将消失(请参阅上面的链接).它基本上是一个 zip 文件，任何理解 zip 的人都可以打开和检查它.我用过 Emacs.
Note: XPI is going away (see the link above). It's basically a zip file that can be opened and inspected by anything that understands zip. I used Emacs.
在 Firefox 中查找扩展 ID 有点复杂.转到工具 -> 附加组件"，单击扩展"选项卡，单击扩展说明旁边的更多"链接，然后单击评论"链接转到 Firefox 扩展站点并从 URL (请注意带星号的扩展 ID):
Finding the extension ID in Firefox is a bit more involved. Go to "Tools -> Add-ons", click the Extensions tab, click the "More" link next to the extension description, then click the "reviews" link to go to the Firefox extension site and get the ID from the URL (note the asterisked extension ID):
https://addons.mozilla.org/en-US/firefox/addon/**firebug**/reviews/?src=api
可能有一种更简单的方法来做到这一点；欢迎提出建议.
There's probably an easier way to do this; suggestions welcome.
TODO:如何在 Firefox 扩展中找到可能的图像.
TODO: how to find a likely image in a Firefox extension.
另外要注意的是，在 Chrome 中，您只能通过页面的共享 DOM 与扩展程序通信:主机页面通信
As an extra note, in Chrome you can only communicate with an extension via the shared DOM of the page: Host page communication
这篇关于检查用户是否安装了某个扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
