我刚发现Google Extension的屏幕截图使我的网站的window.onresize事件无法激发。
我想执行javascript检查以查看用户是否安装了ScreenCapture,如果是,则警告用户该问题。
一年前,我想我听说过一些可以做到这一点的javascript代码,可能使用了一些谷歌API,但我不记得。
对此有何见解?我还没有开发任何扩展,所以我真的不知道它们是如何工作的。
[编辑] 所以我被要求展示一些代码。正如我在上一个问题(window.onresize not firing in Chrome but firing in Chrome Incognito)中所看到的,问题发生在任何window.onresize事件函数上,所以我认为我的代码并不重要。
此外,我的代码中有很多代码,我不知道要粘贴多少代码或是否有用。
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?");}
也无效。
结果如下:
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);
}
*/
请注意,我无法使用removeImgTag
,因为(至少在Chrome中),我似乎无法访问document
对象以创建或删除元素我的页面,来自这些事件功能。这也是我显示alert
而不是优雅地写document.getElementById("something").innerHTML=
...
答案 0 :(得分:16)
要检测Chrome中是否安装了扩展程序,您可以检查扩展程序中包含的已知资源,例如图像。使用以下URL模式引用扩展的资源:
chrome-extension://<extensionID>/<pathToFile>
基本检测技术包括创建隐藏的图像标记并将加载和错误事件附加到其上以查看图像是否加载(如Firefox所述here):
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工作站上,扩展名位于:
~/.config/chromium/Default/Extensions
您可以看到我现在安装了3个扩展程序:
~/.config/chromium/Default/Extensions$ ls
cpecbmjeidppdiampimghndkikcmoadk nmpeeekfhbmikbdhlpjbfmnpgcbeggic
cpngackimfmofbokmjmljamhdncknpmg
看起来很奇怪的名称是在将扩展程序上传到Chrome网上应用店时为其添加的唯一ID。您可以从网上商店获取ID,也可以转到扩展程序选项卡(扳手 - &gt;扩展程序)并将鼠标悬停在相关扩展程序的链接上,或者在这种情况下使用“Screen Capture(by Google)”(请注意带星号)扩展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 options.html showimage.css
i18n_styles page_context.js showimage.html
对于屏幕捕获扩展,有许多图像可供使用:
~/.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
可以在以下网址引用这些内容:
chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/images/arrow.png
这种技术显然取决于扩展内容的稳定性。我建议使用看起来可能保留在所有版本中的图像。
如上所述,可以使用相同的技术来检测Firefox扩展。在这种情况下,内容网址如下所示:
chrome://<EXTENSION NAME>/content/<PATH TO RESOURCE>
在我的Linux工作站上,Firefox扩展程序位于:
~/.mozilla/firefox/<USER PROFILE ID>/extensions
其中&lt; USER PROFILE ID&gt;看起来像这样:“h4aqaewq.default”
您可以看到我现在安装了2个扩展程序,其中一个是目录安装,另一个是XPI (pronounced "zippy")文件:
~/.mozilla/firefox/h4aqaewq.default/extensions$ ls
{3e9a3920-1b27-11da-8cd6-0800200c9a66} staged
firebug@software.joehewitt.com.xpi
“暂存”目录是Firefox保留将要更新的扩展(我认为)。带括号的GUID目录是基于目录的扩展安装,.xpi文件是Firebug。
注意:XPI即将消失(请参阅上面的链接)。它基本上是一个zip文件,任何能理解zip的东西都可以打开和检查。我使用了Emacs。
在Firefox中查找扩展ID更为复杂。转到“工具 - &gt;加载项”,单击“扩展”选项卡,单击扩展说明旁边的“更多”链接,然后单击“评论”链接转到Firefox扩展站点并从URL获取ID (注意带星号的扩展ID):
https://addons.mozilla.org/en-US/firefox/addon/**firebug**/reviews/?src=api
这可能是一种更简单的方法;建议欢迎。
TODO:如何在Firefox扩展程序中找到可能的图像。
另外请注意,在Chrome中,您只能通过页面的共享DOM与扩展程序进行通信:Host page communication