How to access worker properties

Add-ons Development
1

Sorry, I have little experience with Add-on Development and Javascript.
Therefore I think and hope, my question is a no-brainer to most of you.
I’m trying to access the properties of ui components without any success.
In one example I’m working with an array of sidebar workers.
From https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_sidebar I took this code:

var workerArray = [];

function attachWorker(worker) {
  workerArray.push(worker);
  console.log(worker.id);
}

function detachWorker(worker) {
  var index = workerArray.indexOf(worker);
  if(index != -1) {
    workerArray.splice(index, 1);
  }
}

var sidebar = require("sdk/ui/sidebar").Sidebar({
  id: 'my-sidebar',
  title: 'My Sidebar',
  url: require("sdk/self").data.url("sidebar.html"),
  onAttach: attachWorker,
  onDetach: detachWorker
});

I have just added console.log(worker.id); in the function attachWorker.
The console shows, that the id is undefined.
This happens with all kind of workers, I was trying.
My goal is to find a worker in the workerArray with its id.
I think I’m having a fundamental lack of understanding, how this could be achieved.
Could you please give me a hint!

2

Worker and Sidebar are two different things.
Worker simply doesn’t have an id property.
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/content_worker

What are you trying to achieve?

3

I would like to work with several sidebars.
I changed the above code to create some sidebars as follows.

var workerArray = [];

function attachWorker(worker) {
    workerArray.push(worker);
}

function detachWorker(worker) {
    var index = workerArray.indexOf(worker);
    if (index != -1) {
        workerArray.splice(index, 1);
    }
}

function createSidebar(id, title) {
    var ret = require("sdk/ui/sidebar").Sidebar({
        id : id,
        title : title,
        url : require("sdk/self").data.url("sidebar.html"),
        onAttach : attachWorker,
        onDetach : detachWorker
    });
    return ret;
}

createSidebar("my-sidebar-1", "My Sidebar 1");
createSidebar("my-sidebar-2", "My Sidebar 2");
createSidebar("my-sidebar-3", "My Sidebar 3");

After executing this code, I get 3 sidebars in the browser:

f1cee2e04ca18f8a993a118714c32d38e3905497.png640×261 23.1 KB

Now, I want to fill the sidebars with different contents.
I want to identify the sidebars in order to decide which content to send.
I have an array workerArray that hold 3 workers, to which I would like to send individual contents.
I thought, having a Javascript file (e.g. sidebar.js) with a listener like:

addon.port.on("setContent", function(text) {
   /* code to set the content */
});

I could send the content from main.js (or index.js) with something like this:

workerArray["my-sidebar-2"].port.emit("setContent", contentForSidebar2);

How can I access one particular worker in the array workerArray?
Is workerArray not meant for this purpose?

4

Well you can access the sidebar that is associated with the worker from your attachWorker function.

function attachWorker(worker) {
    console.log( this.id );
}

So you could use that to put them into a dictionary or a Map.
Or you could use the sidebar itself as a key for the Map.

const workerMap = new Map();

function attachWorker( worker ) {
    workerMap.set( this, worker );
}
5

Thank you very much!