我的WebExtension上有一个设置页面，但我不知道如何使用javascript访问设置的值。
当前.xul文件：
chrome-debugger://如何访问＆＃34;电子邮件＆＃34;值？我可以写一些像＆＃34; getPreferences（＆＃39; email＆＃39;）＆＃34;？
答案 0 :(得分：10)
不要在WebExtension插件中使用XUL ：
如果您在WebExtension中使用XUL，那么可能是错误的。如果您正在编写WebExtension，并开始执行XUL：退后一步。确保真的你应该做什么。 WebExtensions的一个要点是它将来自Firefox内部的插件（即来自XUL）隔离开来。
选项面板和页面
通常，选项应存储在storage.local（或支持时为storage.sync）。如果您尝试从选项页面或面板返回到主后台脚本，至少有4种不同的方式：
storage.onChanged的事件。无需来回传递消息。您无需使用选项/面板代码专门通知后台页面已发生更改。getOptions()函数。 chrome.runtime.sendMessage()向您的后台页面发送选项已更改的消息。在下面的代码中：在storage.local中存储选项后， options.js 会向后台脚本发送optionsUpdated消息，表明选项已更新。后台脚本然后重新读取选项。 [该消息可以是您想要的任何信号，表明这一点。 optionsUpdated仅仅是我在下面的代码中选择的消息。] chrome.runtime.sendMessage()将包含所有选项数据的消息发送到后台页面。在下面的代码中：当选项更改时， options.js 代码将optionsData消息发送到后台页面，其中包含data有效内容以及所有选项。然后将选项存储在后台脚本中的storage.local中。存储选项后，后台脚本会将optionsStored消息发送回 options.js 代码。然后， options.js 代码向用户指示已保存选项。 [该消息可以是您想要的任何信号，表明这一点。 optionsData和optionsStored仅仅是我在下面的代码中选择的消息。] 下面是一个WebExtension，它演示了将更改的选项信息恢复到后台脚本的四种不同方法。
注意：下面的代码使用browser_action按钮显示一个面板，其中包含与options_ui完全相同的选项。这样做是为了演示。如果您打算使用按钮打开选项，最好使用options_ui直接打开runtime.openOptionsPage()页面。您的操作取决于您要向用户显示的用户界面。
background.js ：
var useDirect=0; //Holds the state of how we communicate with options.js
var emailAddress=''; //The email address from options.
const useDirectTypes=[ 'Listen to chrome.storage changes'
,'Directly invoke functions in the background script from'
+ ' the options/panel code'
,'Send a message that data in storage.local was updated'
,'Send a message with all options data' ];
//Register the message listener
chrome.runtime.onMessage.addListener(receiveMessage);
function receiveMessage(message,sender,sendResponse){
//Receives a message that must be an object with a property 'type'.
// This format is imposed because in a larger extension we may
// be using messages for multiple purposes. Having the 'type'
// provides a defined way for other parts of the extension to
// both indicate the purpose of the message and send arbitrary
// data (other properties in the object).
console.log('Received message: ',message);
if(typeof message !== 'object' || !message.hasOwnProperty('type')){
//Message does not have the format we have imposed for our use.
//Message is not one we understand.
return;
}
if(message.type === "optionsUpdated"){
//The options have been updated and stored by options.js.
//Re-read all options.
getOptions();
}
if(message.type === "optionsData"){
saveOptionsSentAsData(message.data,function(){
//Callback function executed once data is stored in storage.local
console.log('Sending response back to options page/panel');
//Send a message back to options.js that the data has been stored.
sendResponse({type:'optionsStored'});
//Re-read all options.
getOptions();
});
//Return true to leave the message channel open so we can
// asynchronously send a message back to options.js that the
// data has actually been stored.
return true;
}
}
function detectStorageChange(change){
//Ignore the change information. Just re-get all options
console.log('Background.js: Detected storage change');
getOptions();
}
function listenToStorageChanges(){
chrome.storage.onChanged.addListener(detectStorageChange);
}
function stopListeningToStorageChanges(){
chrome.storage.onChanged.removeListener(detectStorageChange);
}
function getOptions(){
//Options are normally in storage.sync (sync'ed across the profile).
//This example is using storage.local.
//Firefox does not currently support storage.sync.
chrome.storage.local.get({
useDirect: 0,
emailAddress: ''
}, function(items) {
if(typeof items.useDirect !== 'number' || items.useDirect <0
|| items.useDirect >= useDirectTypes.length) {
items.useDirect=0;
}
useDirect = items.useDirect;
emailAddress = items.emailAddress;
console.log('useDirect=' + useDirectTypes[useDirect]);
console.log('email address=' + emailAddress);
});
}
function saveOptionsSentAsData(data,callback) {
//Options data received as a message from options.js is
// stored in storeage.local.
chrome.storage.local.set(data, function() {
//Invoke a callback function if we were passed one.
if(typeof callback === 'function'){
callback();
}
});
}
//Read the options stored from prior runs of the extension.
getOptions();
//On Firefox, open the Browser Console:
//To determine if this is Chrome, multiple methods which are not implemented
// in Firefox are checked. Multiple ones are used as Firefox will eventually
// support more APIs.
var isChrome = !! window.InstallTrigger
|| (!!chrome.extension.setUpdateUrlData
&& !!chrome.runtime.reload
&& !!chrome.runtime.restart);
if(!isChrome) {
//In Firefox cause the Browser Console to open by using alert()
window.alert('Open the console. isChrome=' + isChrome);
}
options.js ：
// Saves options to chrome.storage.local.
// It is recommended by Google that options be saved to chrome.storage.sync.
// Firefox does not yet support storage.sync.
function saveOptions(data, callback) {
chrome.storage.local.set(data, function() {
if(typeof callback === 'function'){
callback();
}
// Update status to let user know options were saved.
notifyOptionsSaved();
});
}
function optionsChanged() {
//Get the selected option values from the DOM
let useDirectValue = document.getElementById('useDirect').value;
let email = document.getElementById('email').value;
useDirectValue = +useDirectValue; //Force to number, not string
//Put all the option data in a single object
let optionData = {
useDirect: useDirectValue,
emailAddress: email
}
setBackgroundPageNotListeningToStorageChanges();
if(useDirectValue == 0 ) {
//Use listening to storage changes
//console.log('Going to listen for storage changes');
setBackgroundPageListeningToStorageChanges();
saveOptions(optionData);
} else if (useDirectValue == 1) {
//We save the options in the options page, or popup
saveOptions(optionData, function(){
//After the save is complete:
//The getOptions() functon already exists to retrieve options from
// storage.local upon startup of the extension. It is easiest to use that.
// We could remove and add the listener here, but that code already
// exists in background.js. There is no reason to duplicate the code here.
let backgroundPage = chrome.extension.getBackgroundPage();
backgroundPage.getOptions();
});
} else if (useDirectValue == 2) {
//We save the options in the options page, or popup
saveOptions(optionData, function(){
//Send a message to background.js that options in storage.local were updated.
chrome.runtime.sendMessage({type:'optionsUpdated'});
});
} else {
//Send all the options data to background.js and let it be dealt with there.
chrome.runtime.sendMessage({
type:'optionsData',
data: optionData
}, function(message){
//Get a message back that may indicate we have stored the data.
if(typeof message === 'object' && message.hasOwnProperty('type')){
if(message.type === 'optionsStored') {
//The message received back indicated the option data has
// been stored by background.js.
//Notify the user that the options have been saved.
notifyOptionsSaved();
}
}
});
}
}
function setBackgroundPageListeningToStorageChanges(){
//Normally the listener would be set up once, and only once, within the
// background page script. We are doing it here to demonstrate switing
// between the different methods of notification.
let backgroundPage = chrome.extension.getBackgroundPage();
//either add the listener directly:
chrome.storage.onChanged.addListener(backgroundPage.detectStorageChange);
//or let the background page add it:
//backgroundPage.listenToStorageChanges();
}
function setBackgroundPageNotListeningToStorageChanges(){
//Normally the listener would be set up once, and only once, within the
// background page script. We are doing it here to demonstrate switing
// between the different methods of notification.
let backgroundPage = chrome.extension.getBackgroundPage();
//either remove the listener directly:
chrome.storage.onChanged.removeListener(backgroundPage.detectStorageChange);
//or let the background page add it:
//backgroundPage.stopListeningToStorageChanges();
}
// Restores select box and input using the preferences
// stored in chrome.storage.
function useStoredOptionsForDisplayInDOM() {
chrome.storage.local.get({
useDirect: 0,
emailAddress: ''
}, function(items) {
//Store retrieved options as the selected values in the DOM
document.getElementById('useDirect').value = items.useDirect;
document.getElementById('email').value = items.emailAddress;
});
//notifyStatusChange('Option read');
}
function notifyOptionsSaved(callback){
//Notify the user that the options have been saved
notifyStatusChange('Options saved.',callback);
}
function notifyStatusChange(newStatus,callback){
let status = document.getElementById('status');
status.textContent = newStatus;
//Clear the notification after a second
setTimeout(function() {
status.textContent = '';
if(typeof callback === 'function'){
callback();
}
}, 1000);
}
document.addEventListener('DOMContentLoaded', useStoredOptionsForDisplayInDOM);
document.getElementById('optionsArea').addEventListener('change',optionsChanged);
//In order to track the change if this is open in _both_ the browser_action panel
// and the add-on options page, we need to listen for changes to storage.
// There is already a function which reads all of the options, so don't
// use the information as to what changed, just that a change occurred.
chrome.storage.onChanged.addListener(useStoredOptionsForDisplayInDOM);
options.html ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebRequest Logging Options</title>
<style>
body: { padding: 10px; }
</style>
</head>
<body>
<div id="optionsArea">
Communication with background page:
<select id="useDirect">
<option value="0">Listen for storage changes</option>
<option value="1">Directly call background page functions</option>
<option value="2">Send a Message Updated storage.local</option>
<option value="3">Send a Message with all Data</option>
</select>
<div>Email:
<input id="email"></input>
</div>
</div>
<div id="status" style="top:0px;display:inline-block;"></div>
<script src="options.js"></script>
</body>
</html>
的manifest.json ：
{
"description": "Demonstrate an email field in options with various ways of communicating with the background script.",
"manifest_version": 2,
"name": "email-in-options-demo",
"version": "0.1",
"applications": {
"gecko": {
//Firefox: must define id to use option_ui:
"id": "email-in-options-demo@example.example",
"strict_min_version": "48.0"
}
},
"permissions": [
"storage"
],
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_icon": {
"48": "myIcon.png"
},
"default_title": "Show panel",
"browser_style": true,
"default_popup": "options.html"
},
"options_ui": {
"page": "options.html",
"chrome_style": true
}
}
上面的代码基于我对Update WebExtension webRequest.onBeforeRequest listener URL settings from separate script的回答中的代码。