在«面板»上显示当前页面的URL和标题

Question

How to show on the «panel» title and url current page?

My problem is the misunderstanding of port.emit, port.on.

UPD:

No "title" panel, "title" current page.

main.js

var pa            = require("sdk/panel");
var se            = require("sdk/self");
// ...
var panel = pa.Panel({
    width: 400,
    height: 350,
    contentURL: [
        se.data.url("./popup.html")],
    contentScriptFile: [
        se.data.url("popup.js"),
        se.data.url("./js/jquery-2.1.0.min.js"),
        se.data.url("./js/bootstrap.min.js")],
    contentStyleFile: [
        se.data.url("./css/bootstrap.min.css"),
        se.data.url("./css/font-awesome.min.css")],
    onHide: handleHide
});
// ...

popup.js

var url_page, title_page; // No document.title or document.location

console.log(url_page);
console.log(title_page);

Thank you for your help.

Answer 1

In main.js:

var pa            = require("sdk/panel");
var se            = require("sdk/self");
var tabs = require('sdk/tabs');
var panel = pa.Panel({
    width: 400,
    height: 350,
    contentURL: [
        se.data.url("./popup.html")],
    contentScriptFile: [
        se.data.url("popup.js"),
        se.data.url("./js/jquery-2.1.0.min.js"),
        se.data.url("./js/bootstrap.min.js")],
    contentStyleFile: [
        se.data.url("./css/bootstrap.min.css"),
        se.data.url("./css/font-awesome.min.css")],
    onHide: handleHide,
    onShow: function() {
      this.port.emit('show', {
        url: tabs.activeTab.url,
        title: tabs.activeTab.title
      })
    }
});

In popup.js add:

self.port.on('show', ({ url, title }) => {
  console.log(url);
})

Answer 2

You can get it like this:

const { getMostRecentBrowserWindow } = require('sdk/window/utils');
var aDOMWindow = getMostRecentBrowserWindow();
if (aDOMWindow.gBrowser) {
    var url = aDOMWindow.gBrowser.contentDocument.location;
    var title = aDOMWindow.gBrowser.contentDocument.title;
} else {
    var url = aDOMWindow.document.location;
    var title = aDOMWindow.document.title;
}