Question

我使用Firefox WebExtention来开发附加组件。我知道执行顺序不符合预期，因为storage.local.get()是asyn函数，我的问题是如何使用await或其他方法来纠正执行顺序？

下面是后台脚本，当点击附加图标时，它会发送＆＃34;开始＆＃34;消息到内容脚本;当从内容脚本接收结果时，它将更改图标的标题。

// background script
function sendMessageToTabs(tabs) { 
  for (let tab of tabs) { 
    browser.tabs.sendMessage( tab.id, {start: "start"} ).then(response => {
      browser.browserAction.setTitle({title: response.complete});
      console.log(response.complete);
    }).catch(onError); }}
function onError(error) { console.log(`Error: ${error}`); }
browser.browserAction.onClicked.addListener(function() {
    browser.tabs.query({ currentWindow: true, active: true 
}).then(sendMessageToTabs).catch(onError); });

下面是内容脚本，它读取并处理选项，然后将结果反馈给后台脚本。

// content script
browser.runtime.onMessage.addListener(request => {
   if (request.start) {  var setting='5';
      console.log("setting default: "+setting);
      browser.storage.local.get().then(function(options){
         setting=options.setting;
         console.log("get options: "+setting);
      },null);
      console.log("after get options: "+setting);
      return Promise.resolve({complete: setting+" processed"}); } });

控制台日志

setting default: 5
after get options: 5 
get options: 10

但我想要的是

setting default: 5
get options: 10
after get options: 10

Answer 1

我重构了我的代码并得到了解决方法。下面是后台脚本，它将获得选项并通过＆＃34; start＆＃34;传递选项。消息到内容脚本。

var setting;
function sendMessageToTabs(tabs) { 
  for (let tab of tabs) { 
    browser.tabs.sendMessage( tab.id, {start: setting} ).then(response => {
      browser.browserAction.setTitle({title: response.complete});
      console.log(response.complete);
    }).catch(onError);
  }
}

function onError(error) { console.log(`Error: ${error}`); }
browser.browserAction.onClicked.addListener(function() {
  browser.storage.local.get().then(function(options){
    if(options.setting === undefined) {setting='5';} else{setting=options.setting;}
    browser.tabs.query({ currentWindow: true, active: true }).then(sendMessageToTabs).catch(onError);
  },null);
});

下面是内容脚本，它从消息中获取选项并计算，然后将结果反馈给后台脚本。

browser.runtime.onMessage.addListener(request => {
   if (request.start) {
      var calculated;
      console.log("get options: "+request.start); calculated=request.start+' setting ';
      console.log("after get options: "+calculated);
      return Promise.resolve({complete: calculated+" processed"});   
   } 
});

firefox webextention：如何获取storage.local.get（）选项按顺序执行结果？

1 个答案: