检查用户是否安装了特定的分机 [英] Checking if user has a certain extension installed
问题描述
我刚刚发现Google扩展程序的屏幕截图使得我的网站的window.onresize事件不会触发。
我想执行一次javascript检查以查看用户是否安装了ScreenCapture，如果是，请警告用户该问题。
一年前，我想我听说过一些JavaScript代码可以做到这一点，也许使用一些谷歌API，但我不记得。
对此有何看法？我还没有开发任何扩展，所以我不知道它们是如何工作的。
所以我被要求显示一些代码。正如我在前面的问题（ window.onresize没有在Chrome中发射，但在Chrome隐身模式中发射），问题发生在任何window.onresize事件函数上，所以我认为我的代码真的不重要。
<另外，还有很多我的代码，我不知道要粘贴多少或者是否有用。
var debounce = function（func，threshold，execAsap）
{
var timeout;
返回函数debounced（）{//alert（1.1 Y U NO WORK？）;
var obj = this，args = arguments;
函数delayed（）{
if（！execAsap）
func.apply（obj，args）;
timeout = null;
}
if（timeout）
clearTimeout（timeout）;
else if（execAsap）
func.apply（obj，args）;
timeout = setTimeout（延迟，阈值|| 100）;
};
};
window.onresize = debounce（function（e）{//alert（1.2 YU NOT WORK？）;
flag = true;
var point = window.center（{width：1，height：1}）;
doCenter（point）;
//在这里做一些事情，但在鼠标光标停止后只有一次
}，100，假）;
我想强调一下，问题不在于去抖动。 window.onresize = t;函数t（e）{alert（wtf？）;} 也不起作用。
$ b
结果如下：
var screenCapture = null;
var screenCaptureImg = document.createElement（img）;
screenCaptureImg.setAttribute（src，chrome-extension：//cpngackimfmofbokmjmljamhdncknpmg/images/arrow.png）;
/ *
*为load和error添加事件监听器-event
*将显示扩展名的变量设置为
*将其设置为 true或false根据触发的事件
* /
screenCaptureImg.addEventListener（load，doLoad，false）;
函数doLoad（e）{
screenCapture = true; // removeImgTag（E）;
alert（我非常巧妙地检测到您的Chrome已启用ScreenCapture扩展。\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
screenCaptureImg.addEventListener（error，function（e）{
screenCapture = false; // removeImgTag（e）;
}，false）;
/ *
function removeImgTag（e）{
e.currentTarget.parentNode.removeChild（e.currentTarget）;
}
* /
请注意，我无法获得 removeImgTag 起作用，因为（至少在chrome中），我似乎无法访问文档对象以便从这些事件函数中创建或从我的页面中删除元素。这也是为什么我显示 alert 而不是优雅地写出 document.getElementById（something）。innerHTML =
chrome-extension：//< extensionID> /< pathToFile> ;
基本的检测技术包括创建一个隐藏的图像标签并将负载和错误事件附加到它以查看是否图片加载（如此处适用于Firefox）：
extensionImg.setAttribute（src，chrome-extension：//< INSERT EXTENSION ID HERE> /images/someImage.png）; //请参阅下面关于如何找到这个
/ *
*的讨论为加载和错误添加事件监听器-event
*设置变量显示根据触发的事件
* /
将它设置为true或false的扩展的存在
* /
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工作站上，扩展名位于：
〜/ .config / chromium / Default / Extensions
你可以看到我现在已经安装了3个扩展：
〜/ .config / chromium / Default / Extensions $ ls
cpecbmjeidppdiampimghndkikcmoadk nmpeeekfhbmikbdhlpjbfmnpgcbeggic
cpngackimfmofbokmjmljamhdncknpmg
奇怪的名字是上传到Chrome网上商店时为扩展程序提供的唯一ID。在这种情况下，您可以从网上商店或扩展选项卡（扳手 - >扩展程序）并悬停在相关扩展的链接上或屏幕截图（通过谷歌）中获取标识（请注意带星号的扩展名ID）：
https://chrome.google.com/webstore/detail/**cpngackimfmofbokmjmljamhdncknpmg**
在扩展目录中会有一个或多个版本;你可以忽略这一点。在版本目录中是扩展的实际内容：
〜/ .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选项。 html showimage.css
i18n_styles page_context.js showimage.html
在屏幕的情况下Capture扩展有许多图片可供使用：
〜/ .config / chromium / Default / Extensions / cpngackimfmofbokmjmljamhdncknpmg / 5.0。 3_0 / images $ ls
arrow.png icon_128.png icon_save.png打印.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
这些可以在此网址下引用：
chrome-extension：//cpngackimfmofbokmjmljamhdncknpmg/images/arrow.png
这项技术显然取决于扩展内容的稳定性。我建议使用看起来可能保留在所有版本中的图像。
如上所述，同样的技术可用于检测Firefox扩展。在这种情况下，内容网址如下所示：
chrome：//< EXTENSION NAME> / content /< PATH TO RESOURCE>
在我的Linux工作站上，Firefox扩展位于：
〜/ .mozilla / firefox /< USER PROFILE ID> / extensions
其中< USER PROFILE ID>看起来像这样：h4aqaewq.default
你可以看到我现在有2个扩展，其中一个是目录安装，另一个是 XPI（发音为zippy）文件：
〜/ .mozilla / firefox / h4aqaewq.default / extensions $ ls
{3e9a3920-1b27-11da-8cd6-0800200c9a66}上演
firebug @ software .joehewitt.com.xpi
staged目录是Firefox保留将被更新的扩展名的地方我认为）。带括号的GUID目录是基于目录的扩展安装，而.xpi文件是Firebug。
注意：XPI正在远离（请参阅上面的链接）。它基本上是一个zip文件，可以通过任何理解zip的文件打开和检查。我使用了Emacs。
在Firefox中查找扩展ID需要多一点参与。转到工具 - >附加组件，点击扩展标签，点击扩展程序描述旁边的更多链接，然后点击评论链接转到Firefox扩展站点，并从URL注意星号扩展名）：
https://addons.mozilla.org/en-US/firefox/addon/* * firebug ** / reviews /？src = api
可能有更简单的方法来做到这一点;
TODO：如何在Firefox扩展中找到可能的图片。
另外请注意，在Chrome中，您只能通过页面的共享DOM与扩展程序进行通信：主机页面通信
I just found out that the Screen Capture by Google extension makes my website's window.onresize event not fire.
I want to perform a javascript check to see if the user has ScreenCapture installed and if so, warn the user of the problem.
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.
[EDIT] 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);
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.
[EDIT2]
Here's the result:
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. \n\nThis extension interferes with my website's DOM and long story short, it won't be able to scale properly.\n\nSo please disable it. \nConsider 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);
}
*/
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=...
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>
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);
}
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
You can see that I have 3 extensions installed right now:
~/.config/chromium/Default/Extensions$ ls
cpecbmjeidppdiampimghndkikcmoadk nmpeeekfhbmikbdhlpjbfmnpgcbeggic
cpngackimfmofbokmjmljamhdncknpmg
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
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
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.
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>
On my Linux workstation Firefox extensions are located in:
~/.mozilla/firefox/<USER PROFILE ID>/extensions
Where <USER PROFILE ID> looks something like this: "h4aqaewq.default"
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
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.
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.
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: how to find a likely image in a Firefox extension.
As an extra note, in Chrome you can only communicate with an extension via the shared DOM of the page: Host page communication
这篇关于检查用户是否安装了特定的分机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
