如何从 XUL <browser> 中的脚本运行中的当前活动浏览器 window/tab 获取 URL（例如在侧边栏中）

Question

我正在为 Firefox 创建一个简单的引导加载项。我需要单击按钮通过侧边栏从浏览器捕获当前 URL。

我的bootstrap.js:

const {classes: Cc, interfaces: Ci, utils: Cu} = Components;
Cu.import('resource://gre/modules/Services.jsm');
Cu.import("resource://gre/modules/NetUtil.jsm");  
Cu.import("resource://gre/modules/FileUtils.jsm");

/*start - windowlistener*/
var windowListener = {
    //DO NOT EDIT HERE
    onOpenWindow: function (aXULWindow) {
        // Wait for the window to finish loading
        let aDOMWindow =aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor)
                                  .getInterface(Ci.nsIDOMWindowInternal||Ci.nsIDOMWindow);
        aDOMWindow.addEventListener("load", function () {
            aDOMWindow.removeEventListener("load", arguments.callee, false);
            windowListener.loadIntoWindow(aDOMWindow, aXULWindow);
        }, false);
    },
    onCloseWindow: function (aXULWindow) {},
    onWindowTitleChange: function (aXULWindow, aNewTitle) {},
    register: function () {
        // Load into any existing windows
        let XULWindows = Services.wm.getXULWindowEnumerator(null);
        while (XULWindows.hasMoreElements()) {
            let aXULWindow = XULWindows.getNext();
            let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor)
                                .getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
            windowListener.loadIntoWindow(aDOMWindow, aXULWindow);
        }
        // Listen to new windows
        Services.wm.addListener(windowListener);
    },
    unregister: function () {
        // Unload from any existing windows
        let XULWindows = Services.wm.getXULWindowEnumerator(null);
        while (XULWindows.hasMoreElements()) {
            let aXULWindow = XULWindows.getNext();
            let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor)
                                .getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
            windowListener.unloadFromWindow(aDOMWindow, aXULWindow);
        }
        //Stop listening so future added windows dont get this attached
        Services.wm.removeListener(windowListener);
    },
    //END - DO NOT EDIT HERE
    loadIntoWindow: function (aDOMWindow, aXULWindow) {
        if (!aDOMWindow) {
            return;
        }

        //START - EDIT BELOW HERE
        var browser = aDOMWindow.document.querySelector('#browser')
        if (browser) {
            var splitter = aDOMWindow.document.createElement('splitter');
            var propsToSet = {
                id: 'demo-sidebar-with-html_splitter',
                //I'm just copying what Mozilla does for their social sidebar splitter 
                //  I left it out, but you can leave it in to see how you can style
                //  the splitter
                class: 'sidebar-splitter'
            }
            for (var p in propsToSet) {
                splitter.setAttribute(p, propsToSet[p]);
            }

            var sidebar = aDOMWindow.document.createElement('vbox');
            var propsToSet = {
                id: 'demo-sidebar-with-html_sidebar',
                //Mozilla uses persist width here, I don't know what it does and can't
                //  see it how makes a difference so I left it out
                //persist: 'width' 
            }
            for (var p in propsToSet) {
                sidebar.setAttribute(p, propsToSet[p]);
            }
            var htmlVal = loadJsonHTML(0);
            var sidebarBrowser = aDOMWindow.document.createElement('browser');
            var propsToSet = {
                id: 'demo-sidebar-with-html_browser',
                type: 'content',
                context: 'contentAreaContextMenu',
                disableglobalhistory: 'true',
                tooltip: 'aHTMLTooltip',
                autoscrollpopup: 'autoscroller',
                flex: '1', //do not remove this
                //you should change these widths to how you want
                style: 'min-width: 14em; width: 18em; max-width: 36em;', 
                //or just set this to some URL like http://www.bing.com/
                src: 'data:text/html,'+ htmlVal
            }
            for (var p in propsToSet) {
                sidebarBrowser.setAttribute(p, propsToSet[p]);
            }

            browser.appendChild(splitter);

            sidebar.appendChild(sidebarBrowser);
            browser.appendChild(sidebar);
        }
        //END - EDIT BELOW HERE
    },
    unloadFromWindow: function (aDOMWindow, aXULWindow) {
        if (!aDOMWindow) {
            return;
        }
        //START - EDIT BELOW HERE
        var splitter = aDOMWindow.document
                                 .querySelector('#demo-sidebar-with-html_splitter');

        if (splitter) {
            var sidebar = aDOMWindow.document
                                    .querySelector('#demo-sidebar-with-html_sidebar');
            splitter.parentNode.removeChild(splitter);
            sidebar.parentNode.removeChild(sidebar);
        }
        //END - EDIT BELOW HERE
    }
};
/*end - windowlistener*/

function startup(aData, aReason) {
    windowListener.register();
}

function shutdown(aData, aReason) {
    if (aReason == APP_SHUTDOWN) return;
    windowListener.unregister();
}

function loadJsonHTML(val=0){

    var fileContent = "";   
    var localFile = Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILocalFile);

    //full path is okay if directory exists     
    localFile.initWithPath("/Users/tinuy/Desktop/test_addodn/input.txt");

    //otherwise specify directory, create it if necessary, and append leaf.
    //localFile.initWithPath("C:\Users\tinuy\Documents\test\input.txt");

    if ( localFile.exists() == false ) {
        fileContent = "File does not exist";
    }
    var istream = Cc["@mozilla.org/network/file-input-stream;1"]
                  .createInstance(Ci.nsIFileInputStream);
    istream.init(localFile, 0x01, 4, null);
    var fileScriptableIO = Cc["@mozilla.org/scriptableinputstream;1"]
                           .createInstance(Ci.nsIScriptableInputStream); 
    fileScriptableIO.init(istream);
    // parse the XML into our internal document
    istream.QueryInterface(Ci.nsILineInputStream); 
    //fileContent = fileScriptableIO.read( '1' );
    var csize = 0; 
    while ((csize = fileScriptableIO.available()) != 0) {
        fileContent += fileScriptableIO.read( csize );
    }
    var array = fileContent.split("&");
    fileScriptableIO.close();   
    istream.close();

    return makeHTML(array[val], val);
}

function makeHTML(value, key){
    var arrValues = value.split(",");
    var htmlContent = '<div name="content" class="content">' +
        '<p> Name :' + arrValues[0] + '</p>';
    htmlContent += '<p> Price :' + arrValues[2] + '</p>';
    htmlContent += '<p> Color :' + arrValues[3] + '</p>';
    htmlContent += '<p> UID :' + arrValues[1] + '</p>';
    htmlContent += '<p><input type="radio" name="valid" value="yes" />Yes &nbsp;&nbsp; ' +
        '<input type="radio" name="valid" value="no" /> No</p>' +
        '<p><input type="text" placeholder="Reason" name="checkreason"></p>' +
        '<p><input type="text" placeholder="Feedback" name="feedback"></p>' +
        '</div><div><button name="load" type="button" id="loadit" onclick="loadHtml()" ' + 
        'loadurl="'+arrValues[4]+'">Load</button> <button name="save" type="button">' + 
        'Save </button> <button name="next" type="button" key="'+key+'">Next </button> ' +
        '</div> <script> function loadHtml() {' + 
            'var a = gBrowser.contentWindow.location.href ;alert(a);' + 
        '} </script>';
    return htmlContent;
}

function install() {}

function uninstall() {}

我尝试了 Get current page URL from a firefox sidebar extension 的所有建议，但没有任何效果。

Answer 1

但是，从您设置的事实来看：

var propsToSet = {
    id: 'demo-sidebar-with-html_browser',
    type: 'content', //<---------------------------This

<browser>type to content，我假设以下两件事之一：

您实际上并没有尝试从您通过 src 属性加载到 <browser> 的代码中获取活动选项卡的 URI。
- 如果是这种情况，请看我对“”的回答。在这种情况下，您运行所在的上下文应该允许您使用该答案中的代码。
- 这个可能的假设 #1 不适用于您的代码。
您想访问已加载到侧边栏的 <browser> 中的 URI 表单代码，并且不知道设置 <browser> type to content 对您加载到 <browser> 中的代码。
- 您似乎正试图通过 <browser> 中的代码访问 currant 选项卡的 URL。您应该考虑重组您的代码，以便 <browser> 中的内容不需要访问 chrome 权限。换句话说，如果可能，您应该编写代码，这样您就不需要直接从您插入的 <browser> 中的代码运行访问 URL 或其他信息.但是，这样做最终可能会复杂得多。

正在添加的 <browser> 中获取 chrome 权限：

设置 <browser> type to content 适用于：

A browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it.

将 <browser> type 设置为 chrome 是为了：

(default behaviour): A browser, intended to be used for loading privileged content using a chrome:// URI. Don't use for content from web, as this may cause serious security problems!

要将 <browser> type 设置为 chrome，您可以执行以下操作：

var propsToSet = {
    id: 'demo-sidebar-with-html_browser',
    type: 'chrome', //<---------------------------This

代码由Noitidart comes close to what you need. However, it needs to be slightly modified, as )提供。因此，您需要使用 gBrowser.currentURI.spec。您可以通过将 makeHTML() 更改为：

来使其正常工作

function makeHTML(value, key){
    var arrValues = value.split(",");
    var htmlContent = '<html><head></head>'
        + '<body style="background-color: white;">'
        + '  <div name="content" class="content">'
        + '    <p> Name :' + arrValues[0] + '</p>';
    htmlContent += '<p> Price :' + arrValues[2] + '</p>';
    htmlContent += '<p> Color :' + arrValues[3] + '</p>';
    htmlContent += '<p> UID :' + arrValues[1] + '</p>';
    htmlContent += 
          '    <p><input type="radio" name="valid" value="yes" />Yes &nbsp;&nbsp; '
        + '    <input type="radio" name="valid" value="no" /> No</p>'
        + '    <p><input type="text" placeholder="Reason" name="checkreason" /></p>'
        + '    <p><input type="text" placeholder="Feedback" name="feedback" /></p>'
        + '  </div>'
        + '  <div>'
        + '    <button name="load" type="button" id="loadit" onclick="loadHtml()" '
        + '        loadurl="' + arrValues[4] + '">Load</button>'
        + '    <button name="save" type="button">Save </button>'
        + '    <button name="next" type="button" key="' + key + '">Next </button>'
        + '  </div>'
        + '  <script>'
        + '    function loadHtml() {' 
        + '      const Cu = Components.utils;'
        + '      Cu.import("resource://gre/modules/Services.jsm");'
        + '      var win = Services.wm.getMostRecentWindow("navigator:browser");'
        + '      if (win) {'
        + '        var url = win.gBrowser.currentURI.spec;'
        + '        alert("URL=" + url);'
        + '      }'
        + '    }'
        + '  </script>'
        + '</body></html>';
    return htmlContent;
}

安全问题：
您可能会运行遇到一些非常重要的安全问题。仅从您想要当前页面的 URL 这一事实就意味着您可能正在迅速接近真正的问题所在。这将取决于具体您将要做什么。鉴于您没有提供该信息，我不会深入探讨问题所在。但是，您应该阅读“Firefox Security Basics for Developers" and "Security best practices in extensions”

有关边栏的其他信息：
你应该 认真地 考虑创建一个 Add-on SDK based add-on, instead of a bootstrap one, and using the ui/sidebar API.

如果您有兴趣，我创建了一些代码，可用于创建位于活动选项卡顶部、左侧、右侧或底部的 "sidebar"，或位于单独的 window（类似于 devtools 面板将执行的操作）。在我对“How to create a bottom-docked panel with XUL in Firefox?" and "Firefox Extension, Window related sidebar”的回答中，创建的侧边栏与当前活动的选项卡相关联，而不是所有选项卡（我想我应该选择让它与所有选项卡相关联，或者只与当前选项卡相关联）

如何从 XUL <browser> 中的脚本运行中的当前活动浏览器 window/tab 获取 URL（例如在侧边栏中）

How to get URL from current active Browser window/tab from within a script running in an XUL <browser> (e.g. in a sidebar)

javascript

sidebar

firefox-addon

firefox-addon-restartless

如何从 XUL <browser> 中的脚本 运行 中的当前活动浏览器 window/tab 获取 URL（例如在侧边栏中）

How to get URL from current active Browser window/tab from within a script running in an XUL <browser> (e.g. in a sidebar)

javascript

sidebar

firefox-addon

firefox-addon-restartless

如何从 XUL <browser> 中的脚本运行中的当前活动浏览器 window/tab 获取 URL（例如在侧边栏中）