javascript - 在“面板”上显示当前页面的 URL 和标题

Question

如何在“面板”上显示当前页面的标题和url？

我的问题是对port.emit、port.on的误解。

更新:

没有“标题”面板，“标题”当前页面。

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);

感谢您的帮助。

Answer 1

在 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
      })
    }
});

在 popup.js 添加:

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