我刚刚发现 Screen Capture by Google 扩展使我网站的 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?");} 也不起作用。

[编辑2]

结果如下:

    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=...

最佳答案

要检测 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。您可以从网上商店或通过转到“扩展程序”选项卡( Spanner -> 扩展程序)并将鼠标悬停在指向相关扩展程序的链接上，或在本例中为“屏幕截图(由 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

对于 Screen Capture 扩展，有许多图像可供使用:

~/.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 下引用:

chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/images/arrow.png

这种技术显然依赖于扩展内容的稳定性。我建议使用看起来可能会在所有版本中保留的图像。

如上所述，可以使用相同的技术来检测 Firefox 扩展。在这种情况下，内容 URL 如下所示:

chrome://<EXTENSION NAME>/content/<PATH TO RESOURCE>

在我的 Linux 工作站上，Firefox 扩展位于:

 ~/.mozilla/firefox/<USER PROFILE ID>/extensions

看起来像这样:“h4aqaewq.default”

您可以看到我现在安装了 2 个扩展，其中一个是目录安装，另一个是 XPI (pronounced "zippy")。文件:

~/.mozilla/firefox/h4aqaewq.default/extensions$ ls
{3e9a3920-1b27-11da-8cd6-0800200c9a66}  staged
firebug@software.joehewitt.com.xpi

“staged”目录是 Firefox 保存将要更新的扩展的地方(我认为)。括号内的GUID目录为基于目录的扩展安装，.xpi文件为Firebug。

注意:XPI 即将消失(参见上面的链接)。它基本上是一个 zip 文件，任何理解 zip 的人都可以打开和检查它。我用的是 Emacs。

在 Firefox 中查找扩展 ID 有点复杂。转到“工具 -> 附加组件”，单击扩展选项卡，单击扩展描述旁边的“更多”链接，然后单击“评论”链接转到 Firefox 扩展站点并从 URL 中获取 ID(请注意带星号的扩展程序 ID):

https://addons.mozilla.org/en-US/firefox/addon/**firebug**/reviews/?src=api

可能有更简单的方法来做到这一点；欢迎提出建议。

TODO:如何在 Firefox 扩展中找到可能的图像。

额外说明，在 Chrome 中，您只能通过页面的共享 DOM 与扩展程序通信:Host page communication

关于javascript - 检查用户是否安装了某个扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8042548/