What is the best way to directly send a message from a panel to a page-mod's content script?

Question

What is the best way to directly send a message from a panel to a page-mod's content script?

When working with a code snippet in a Firefox addon like the one below:

var pagemod = PageMod({
    include: ['*'],
    contentScriptFile: [data.url('content.js')]
});

panel = require("sdk/panel").Panel({
  width: 322,
  height: 427,
  contentURL: data.url("main.html"),
  include:["http://*/*","https://*/*"],
  contentScriptFile: [data.url('panel.js')]  
});

I recently came across some example code in a Chrome extension where they utilize

window.parent.postMessage(message, "*")

to send messages and

window.addEventListener("message",function (e) {//do something}

to receive them. How can I establish direct communication for message passing from "panel.js" to "content.js" within a Firefox addon?

javascript firefox-addon-sdk

Answer 1

Answer №1

The solution concept closely resembles the approach outlined in this particular answer:

Keep track of message ports for each tab.
When sending a message, dispatch it to all recorded ports.

In order to manage a list of ports effectively, the following code snippet is implemented:

var ports = [];
var pagemod = PageMod({
    include: ['*'],
    contentScriptFile: [data.url('content.js')],
    onAttach: function(worker) {
        ports.push(worker.port);
        worker.on('detach', function() {
            var index = ports.indexOf(worker.port);
            if (index !== -1) ports.splice(index, 1);
        });
    }
});

Now, to send a message from panel.js, simply utilize:

// panel.js
self.port.emit('message-to-tabs', 'example message');

The handling of this message must occur in the main script post creation of the panel:

panel = require('sdk/panel').Panel({
    width: 322,
    height: 427,
    contentURL: data.url('main.html'),
    include: ['http://*/*', 'https://*/*'],
    contentScriptFile: [data.url('panel.js')]  
});
panel.port.on('message-to-tabs', function(message) {
    for (var i=0; i<ports.length; i++) {
        ports[i].emit('message-to-tab', message);
    }
});

Within the content script of the tab (content.js), you can listen for this event and process it accordingly:

self.port.on('message-to-tab', function(message) {
    // Handle message appropriately
});

Answer 2

The solution concept closely resembles the approach outlined in this particular answer:

Keep track of message ports for each tab.
When sending a message, dispatch it to all recorded ports.

In order to manage a list of ports effectively, the following code snippet is implemented:

var ports = [];
var pagemod = PageMod({
    include: ['*'],
    contentScriptFile: [data.url('content.js')],
    onAttach: function(worker) {
        ports.push(worker.port);
        worker.on('detach', function() {
            var index = ports.indexOf(worker.port);
            if (index !== -1) ports.splice(index, 1);
        });
    }
});

Now, to send a message from panel.js, simply utilize:

// panel.js
self.port.emit('message-to-tabs', 'example message');

The handling of this message must occur in the main script post creation of the panel:

panel = require('sdk/panel').Panel({
    width: 322,
    height: 427,
    contentURL: data.url('main.html'),
    include: ['http://*/*', 'https://*/*'],
    contentScriptFile: [data.url('panel.js')]  
});
panel.port.on('message-to-tabs', function(message) {
    for (var i=0; i<ports.length; i++) {
        ports[i].emit('message-to-tab', message);
    }
});

Within the content script of the tab (content.js), you can listen for this event and process it accordingly:

self.port.on('message-to-tab', function(message) {
    // Handle message appropriately
});

What is the best way to directly send a message from a panel to a page-mod's content script?

Answer №1

Similar questions

Storing audio files in Firebase Cloud Database and displaying them in React js + Dealing with an infinite loop problem

Transitioning away from bundled Javascript for local debugging

Uncovering the Image Orientation in Angular: Is it Possible to Determine the Direction Post-view or Upon Retrieval from Database?

I'm having trouble getting my if statement to function properly with a random number

Vue router is unable to render or mount the component at the root path

Converting UK DateTime to GMT time using Angular

What is the proper way to structure the ng-options syntax in AngularJS?

Each time I attempt to update my profile on the web application, I receive this notification

Is there a way to create a universal getter/setter for TypeScript classes?

Tips for handling catch errors in fetch POST requests in React Native

Implementing a return of a view from a Laravel controller function after an AJAX request

A guide on effectively utilizing the Map datatype in JavaScript

change visibility:hidden to visible in a css class using JavaScript

Implementing a translucent overlay onto a specific HTML section using sidebar.js/jQuery

Having trouble saving user input from a form to a database using axios, mongodb, and vue?

No error reported upon trying to render json output

Using Angular's filter pipe to search within a nested array

What is the method for incorporating a timeout in a promise?

Managing Dark Mode in Material UI with Redux

The expected behavior is not displayed when using Async.waterfall within a promise queue