使用带有外部脚本和postMessage的简单首选项（SDK API） [英] Use of simple-prefs (SDK API) with external script and postMessage
问题描述
我正在使用SDK开发我的加载项（定位到Gmail）的新版本，并需要为我的用户存储一些布尔首选项。要做到这一点，我想玩新的简单首选API。根据 Mozilla文档和这 $ b $ 1）我无法将我的偏好更改为在数据中正确地传递给我的外部脚本。我需要禁用并重新启用插件才能应用这些更改。
$ b 2）如何确保首选项直接应用于Gmail中的选项卡打开。
这是我的package.json：
$ $ p $ {
name：Demo，
license：MPL 1.1 / GPL 2.0 / LGPL 2.1，
author：me，
...
$ bpreferences：[{
type：bool，
name：option1，
value：true，
title：描述选项1
}，
{
type：bool，
name：option2，
值：true，
title：描述选项2
}]
}
我的main.js：
const pageMod = require（page -mod）;
const data = require（self）。data;
const prefSet = require（simple-prefs）;
//获取选项的值
var option1 = prefSet.prefs.option1;
var option2 = prefSet.prefs.option2;
//监听变化
函数onPrefChange（prefName）{prefSet.prefs [prefName]; }
prefSet.on（option1，onPrefChange）;
prefSet.on（option2，onPrefChange）;
$ b $ 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）;
}
}）;
$ b 我的script.js（在数据中）：$ b $ （$ {
$ b $选项1
self.on（消息，函数（option1）{
if（option1 == true）{
//执行此操作
}}）;
//选项2
self.on（message，function（option2）{
if（option2 == true）{
//这样做
}}）;
}）（ ）;
在我的main.js文件中使用postMessage协议肯定是一个更好的方法，在我的script.js文件...随时提出您的想法和建议！
好的，这是一个工作版本我想要的东西，虽然很丑。所以如果你有一个更漂亮的方式实现它，请随时分享！
我的 package.json ：
$
$ name $ $ $ b $ name $
$ license $ MPL 1.1 / GPL 2.0 / LGPL 2.1 ，
author：me，
...
preferences：[{
type：bool，
name：option1，
value：true，
title：说明选项1
，
{
type： bool，
name：option2，
value：true，
title：描述选项2
}]
}
我的 main.js ：
const pageMod = require（page-mod）;
const data = require（self）。data;
const prefSet = require（simple-prefs）;
$ b $ exports.main = function（）{
pageMod.PageMod（{
include：[* // example.com/*]，
contentScriptWhen： 'end'，
contentScriptFile：[data.url（jquery.js），data.url（script.js）]，
onAttach：function（worker）{
//持续值
var option1 = prefSet.prefs.option1;
var option2 = prefSet.prefs.option2;
worker.port.emit（'get- prefName，[option1，option2]）; // sender1
//监听更改
函数onPrefChange（prefName）{
let payload = [prefName，prefSet.prefs [ prefName]];
worker.port.emit（'prefchange'，payload）; // sender2
}
prefSet.on（option1，onPrefChange）;
prefSet.on（option2，onPrefChange）;
}
}）;
和我的 script.js （在数据中） ：
$ b
（function（）{
//持续值
self.port.on（get-prefs，函数（prefs）{
// onPrefchange值
self.port.on（prefchange，函数（数据） {
$ b $（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};
}
$ b $ （if（option2 == true || option ==option2&& value == true）{
css =body {background-color：blue！important};
}
///////////////////////////////// CSS Activation
$（'head'） ppend（'< style type =text / css>'+ css +'< / style>'）;
//////////////////////////////// #CSS Activation
}）; //结束jQuery准备
}）;
}）;
}）（）;
I'm developing a new version of my add-on (targeting Gmail) using the SDK and would need to store a few boolean preferences for my users. To do so, I would like to play with the new "simple-prefs" API. Based on the Mozilla documentation and this Stackoverflow question, I got something but I face the following issues:
1) I cannot get the change of my preferences to be properly passed to my external script in data. I need to disable and re-enable the add-on to get the changes applied.
2) How to ensure that the preferences are directly applied to the tab in which Gmail is opened.
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 certainly a neater way to use the postMessage protocol in my main.js file and to call it in my script.js file... Feel free to suggest your ideas and suggestions!
OK, here is a working version of what I wanted, quite ugly though. So if you have a prettier way of achieving 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 my 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
});
});
})();
这篇关于使用带有外部脚本和postMessage的简单首选项（SDK API）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
