单击Firefox加载项的窗口小部件后更新Panel内容

Question

My add-on needs to make two things: 我的附加组件需要做两件事：

When I click on a Widget, some contentScript executes and some data is returned to the add-on 当我单击一个Widget时，会执行一些contentScript并将一些数据返回给该加载项
This data should be shown in the Panel attached to the Widget. 此数据应显示在Widget附带的面板中。
If I click again, data must be updated and Panel content as well. 如果我再次单击，则必须更新数据和Panel内容。

Here's what I have on Mozilla's sdk 1.15. 这就是我对Mozilla的sdk 1.15的看法。

The "from widget" message is printed as expected, but the "from panel" one is not. “from widget”消息按预期打印，但“from panel”消息不是。

I have two questions: 我有两个问题：

If I want to show foo in my Panel, is this the correct way to do it? 如果我想在我的面板中显示foo ，这是正确的方法吗？ How do I update the panel with the info passed from the content script? 如何使用从内容脚本传递的信息更新面板？

Why does my postMessage doesnt receive the message my Widget has sent? 为什么我的postMessage没有收到我的Widget发送的消息？

 var widgets = require('sdk/widget'); var tabs = require('sdk/tabs'); var self = require('sdk/self'); var data = require('sdk/self').data; var requestsPanel = require('sdk/panel').Panel({ width:215, height:160, contentURL: data.url('requests.html'), //this is just dummy data }); // try to receive data DOESN'T WORK requestsPanel.on('message', function (foo) { console.log('from panel', foo); }); var widget = widgets.Widget({ id: 'div-show', label: 'Show requests', contentURL: data.url('favicon.ico'), panel: requestsPanel, onClick: function() { worker = tabs.activeTab.attach({ contentScript: "self.port.on('getData', function () {"+ "var foo = [1,2,3];"+ "self.port.emit('sendData', foo);"+ "});" }); // request to check for generated requests worker.port.emit('getData'); // check the return from generated requests worker.port.on('sendData', function (foo){ console.log('from widget', foo); requestsPanel.postMessage(foo); }); } });

Answer 1

The Panel's postMessage send a message to the contentScript of the panel. Panel的postMessage向面板的 contentScript发送消息。 You do not have any content script in this code for the panel: as you said, requests.html is just dummy data. 您在该代码的代码中没有任何内容脚本：正如您所说， requests.html只是虚拟数据。 What you have to do, is remove the requestsPanel.on('message') from your code, and put the listener in the document loaded by the panel. 您需要做的是从代码中删除requestsPanel.on('message') ，并将侦听器放入面板加载的文档中。

To be clear, your requests.html will looks like: 要清楚，您的requests.html将如下所示：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>It's my panel</title>
        <script>
          addon.on('message', function(data){
            console.log(data)
          })
        </script>
        </head>
    <body>
    </body>
</html>

In this way you can easily update any DOM element of the document itself once you get data. 通过这种方式，您可以在获取数据后轻松更新文档本身的任何DOM元素。 Notice that I used the object addon . 请注意，我使用了对象addon 。 As you can read from the documentation linked above, for "trusted content" (document that comes with your add-on, so from data folder), you don't need to add a content script, but you can use the document's script itself, and having the object addon to exchange messages. 正如您可以从上面链接的文档中读到的，对于“可信内容”（附加文件附带的文档，因此从数据文件夹中），您不需要添加内容脚本，但是您可以使用文档的脚本本身，并使用对象addon来交换消息。 The addon object behaves like the self in the content script. addon对象的行为类似于内容脚本中的self 。

I would also suggest you to use contentScriptFile in your widget, instead of contentScript , especially if you want to submit to addons.mozilla.org. 我还建议您在窗口小部件中使用contentScriptFile ，而不是contentScript ，特别是如果要提交到addons.mozilla.org。 And you should declare worker , otherwise will be a undeclared global variable – it's better nowadays having "use strict" at the beginning of our JS file, in order to have strict mode too. 并且你应该声明worker ，否则将是一个未声明的全局变量 - 现在在我们的JS文件的开头有"use strict"更好，以便也有严格的模式。

Remember also that as soon as you write code for Firefox's add-on, you can take advantages of all the ES6 features are already implemented in the browser, like destructuring assignment , let , const , arrows functions , and so on. 还要记住，只要为Firefox的附加组件编写代码，就可以利用已经在浏览器中实现的所有ES6功能，例如解构赋值 ， let ， const ， 箭头函数等。

So, for instance, instead of: 所以，例如，而不是：

var self = require('sdk/self'); // this is useless also in the current code
var data = require('sdk/self').data;

You can have: 你可以有：

const { data } = require('sdk/self');

And instead of: 而不是：

   worker.port.on('sendData', function (foo){
        console.log('from widget', foo);
        requestsPanel.postMessage(foo);
    });

You could have: 你可以有：

   worker.port.on('sendData', foo => {
        console.log('from widget', foo);
        requestsPanel.postMessage(foo);
    });

And if you remove the log, it will be simply: 如果你删除日志，它将是简单的：

   worker.port.on('sendData', foo => requestsPanel.postMessage(foo));

Hope it helps! 希望能帮助到你！

单击Firefox加载项的窗口小部件后更新Panel内容

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-01-07 12:49:37

单击Firefox加载项的窗口小部件后更新Panel内容

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-01-07 12:49:37

解决方案1
2 已采纳 2014-01-07 12:49:37