How to get data from content script 1 to add-on script to content script 2?

Question

I'm afraid I haven't figured out how the communication between scripts via port works. Within panel.js I listen for a submit button to be pressed in the panel. I save values in an array vals and pass them with:

self.port.emit("submitted", vals);

listen in main.js with:

panel.port.on("submitted", function(vals) { ... });

and now I would like to send vals to another content script ('page.js') which will use the data in order to manipulate the DOM of a site.

On main.js I tried:

require("page-mod").PageMod({
    include: "*",
    contentScriptWhen: 'end',
    contentScriptFile: data.url("page.js"),
    onAttach: function(worker) {
        panel.on('submitted', function(vals) {
            worker.port.emit('output', vals);
        });
    }
});

Answer 1

In general, what you are trying looks like it would work - only that you probably want to replace panel.on by panel.port.on. However, workers can come and go, you don't want to attempt communicating with the ones no longer there. The documentation has a nice example allowing to keep track of active workers, it can be slightly adjusted for your purposes:

var workers = [];

var pageMod = require("page-mod").PageMod({
  include: '*',
  contentScriptWhen: 'end',
  contentScriptFile: data.url('page.js'),
  onAttach: function(worker) {
    // Add new worker to the list
    workers.push(worker);
    worker.on('detach', function () {
      // Remove no longer active worker from the list
      var index = workers.indexOf(worker);
      if (index >= 0)
        workers.splice(index, 1);
    });
  }
});

panel.port.on('submitted', function(vals) {
  for (var i = 0; i < workers.length; i++)
    workers[i].port.emit('output', vals);
});