Using simple prefs (SDK API) with external script and postMessage

Question

I am developing a new version of my add-on (Gmail targeting) using the SDK and you will need to save some logical settings for my users. For this, I would like to play with the new "simple prefs" API. Based on the Mozilla documentation and this question, https://stackoverflow.com/a/166269/232632 , I have something, but I am facing the following problems:

1) I can not force the changes in my settings to correctly transmit my external script data. I need to disable and enable the add-in again in order to apply the changes.

2) How to ensure that the settings are directly applied to the tab in which Gmail opens.

Here is my package.json:

{ "name": "Demo", "license": "MPL 1.1/GPL 2.0/LGPL 2.1", "author": "me", ... "preferences": [{ "type": "bool", "name": "option1", "value": true, "title": "Description Option1" }, { "type": "bool", "name": "option2", "value": true, "title": "Description Option2" }] } 

My main.js:

 const pageMod = require("page-mod"); const data = require("self").data; const prefSet = require("simple-prefs"); // Get the values for options var option1 = prefSet.prefs.option1; var option2 = prefSet.prefs.option2; // Listen for changes function onPrefChange(prefName) { prefSet.prefs[prefName]; } prefSet.on("option1", onPrefChange); prefSet.on("option2", onPrefChange); exports.main = function() { pageMod.PageMod({ include: ["https://mail.google.com/*","http://mail.google.com/*"], contentScriptWhen: 'ready', contentScriptFile: [data.url("jquery.js"),data.url("script.js")], onAttach: function(worker) { worker.postMessage(option1); worker.postMessage(option2); } }); } 

My script.js (in data):

 (function(){ // Option 1 self.on("message", function(option1) { if( option1 == true ) { // Do this }}); // Option 2 self.on("message", function(option2) { if( option2 == true ) { // Do this }}); })(); 

There is, of course, an easier way to use the postMessage protocol in my main.js file and invoke it in the script.js file ... Feel free to offer your ideas and suggestions!

Answer 1

OK, here is a working version of what I wanted, rather ugly. Therefore, if you have a more beautiful way to achieve it, please feel free to share it!

My package.json :

 { "name": "Demo", "license": "MPL 1.1/GPL 2.0/LGPL 2.1", "author": "me", ... "preferences": [{ "type": "bool", "name": "option1", "value": true, "title": "Description Option1" }, { "type": "bool", "name": "option2", "value": true, "title": "Description Option2" }] } 

My main.js :

 const pageMod = require("page-mod"); const data = require("self").data; const prefSet = require("simple-prefs"); exports.main = function() { pageMod.PageMod({ include: ["*//example.com/*"], contentScriptWhen: 'end', contentScriptFile: [data.url("jquery.js"),data.url("script.js")], onAttach: function(worker) { // Persistent values var option1 = prefSet.prefs.option1; var option2 = prefSet.prefs.option2; worker.port.emit('get-prefs', [ option1, option2 ]); // sender1 // Listen for changes function onPrefChange(prefName) { let payload = [prefName, prefSet.prefs[prefName]]; worker.port.emit('prefchange', payload); // sender2 } prefSet.on("option1", onPrefChange); prefSet.on("option2", onPrefChange); } }); } 

and script.js (in data):

 (function(){ // Persistent Values self.port.on("get-prefs", function(prefs) { // onPrefchange Values self.port.on("prefchange", function(data) { $(document).ready(function() { var option1 = prefs[0]; var option2 = prefs[1]; var option = data[0]; var value = data[1]; var css; if(option1 == true || option == "option1" && value == true){ css = "body {background-color:red !important}"; } if(option2 == true || option == "option2" && value == true){ css = "body {background-color:blue !important}"; } ///////////////////////////////// CSS Activation $('head').append('<style type="text/css">' + css + '</style>'); //////////////////////////////// #CSS Activation });//end jQuery ready }); }); })(); 

Answer 2

You need to configure the pref change handler in the onAttach handler, as this is the only place in the code where you have access to the global and given prefSet desktop instance. This template works for me:

 const pageMod = require("page-mod"); const data = require("self").data; const prefSet = require("simple-prefs"); // Listen for changes exports.main = function() { pageMod.PageMod({ include: ["*"], contentScriptWhen: 'end', contentScript: 'self.port.on("prefchange", function(data) { console.log(JSON.stringify(data,null," ")); })', onAttach: function(worker) { function onPrefChange(prefName) { worker.port.emit('prefchange', [prefName, prefSet.prefs[prefName]]); } prefSet.on("option1", onPrefChange); prefSet.on("option2", onPrefChange); } }); } 

See this github repo for a working example: https://github.com/canuckistani/Pref-changes