Receive message from main.js in Firefox add-on content script

Question

I'm trying to communicate between main.js and a content script. Here is my main.js:

var pageMod = require('sdk/page-mod');
var self = require('sdk/self');
var ss = require('sdk/simple-storage');

pageMod.PageMod({
    include: 'example.com',
    contentScriptFile: self.data.url('content-script.js'),
    onAttach: function(worker) {
        worker.port.on('getSetting', function(request) {
            // var settingValue = ss.storage[request]
            var settingValue = 'test value'; // for testing, return an 
                                             // arbitrary string
            worker.port.emit('settingRetrieved', settingValue);
        });
    }
});

And content-script.js:

alert('getting setting...');
self.port.emit('getSetting', 'test setting name');
alert('asked for setting...');
self.port.on('settingRetrieved', function(results) {
    alert('retrieved setting: "' + results + '"');
});

It appears that self.port.on() in content-script.js is not receiving the message from main.js. What am I doing wrong?

Joe Mornin · Accepted Answer · 2015-06-05 20:54:42Z

2

Facepalm. The code from content-script.js was wrapped in a jQuery event handler, so self.port.on() couldn't listen properly.

Here is the working code--first, main.js:

var pageMod = require('sdk/page-mod');
var self = require('sdk/self');
var ss = require('sdk/simple-storage');

pageMod.PageMod({
    include: 'example.com',
    contentScriptFile: self.data.url('content-script.js'),
    onAttach: function(worker) {
        worker.port.on('getSetting', function(request) {
            var settingValue = ss.storage[request];
            worker.port.emit('settingRetrieved',
                {
                    'settingName': request,
                    'settingValue': settingValue,
                }
            );
        });
    }
});

And content-script.js:

// Store the setting value
var mySetting = '';

// Listen for retrieval the setting value
self.port.on('settingRetrieved', function(results) {
    mySetting = results['settingValue'];
});

// Generic function to retrieve a setting value
function getSetting(setting) {
    self.port.emit('getSetting', setting);
}

// Retrieve the value of 'mySetting' and do something with it
$(document).ready(function() {
    $('#my-element').click(function() {
        getSetting('mySetting');
        /*
        ...
        Value of mySetting has been updated; do something with it here
        ...
        */
    });
});

answered Jun 5, 2015 at 20:54

Joe Mornin

9,25418 gold badges62 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Noitidart Over a year ago

Solved it agian! Thanks for sharing and dont feel bad these really help non-sdk devs, I can now help others better now that I have seen this.

Collectives™ on Stack Overflow

Receive message from main.js in Firefox add-on content script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related