使用簡單首選項（SDK API）與外部腳本和postMessage

Question

我正在開發使用SDK的我的加載項（定位Gmail）的新版本，並需要爲我的用戶存儲一些布爾首選項。要做到這一點，我想玩一下新的「簡單首選項」API。基於Mozilla documentation和這Stackoverflow question，我得到的東西，但我面臨以下問題：

1）我不能讓我的首選項的更改被正確傳遞到我的外部腳本的數據。我需要禁用並重新啓用插件才能應用更改。

2）如何確保首選項直接應用於打開Gmail的選項卡。

這裏是我的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" 
    }] 
} 

我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); 
    } 
}); 
} 

我的script.js（數據）：

(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 
          }}); 
})(); 

當然有整潔的方式在我的main.js文件中使用postMessage協議，並在我的script.js文件中調用它...隨時提出您的想法和建議！

Answer 1

OK，這裏是我想要的東西，很醜陋雖然工作版本。所以，如果你有一個更漂亮的方式來實現它，請隨時分享！

我的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" 
    }] 
} 

我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); 


     } 
    }); 
} 

和我的script.js（數據）：

(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

您需要設置把選項更改處理在onAttach處理，因爲它是在你有機會獲得prefSet全球和特定頁面的工人實例代碼的唯一地方。這種模式對我的作品：

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); 
     } 
    }); 
} 

參見工作示例此GitHub庫：https://github.com/canuckistani/Pref-changes