在 Firefox 的 content.js 中调用 browser.storage.local.get() 后无法 console.log()

Question

content.js 在控制台中的最后输出是 console.log("gggggg");

这些语句永远不会运行（控制台中没有错误）：

alert("gucci");
console.log("p");
console.log("o",current_languages);
  alert("string");
  console.log(e);

content.js

myCollection1 = document.getElementsByClassName("tocnumber");
myCollection2 = document.getElementsByClassName("toctext");
var languages = []; //jazyky na stránce
var i;
var position;
for (i = 0; i < myCollection1.length; i++) {
  if (Number.isInteger(Number(myCollection1[i].innerText))){
    languages.push(myCollection2[i].innerText);
  }  
} 
console.log("gggggg");
var zvyraznit = browser.storage.local.get('zvyraznit_preklady'); //v kterých jazycích
zvyraznit.then(function(e){
  var barva = browser.storage.local.get('colour');//.split(","); //seznam jazyk, barva
});
barva.then(function(e){
  var current_languages = browser.storage.local.get('jazyky1'); //"španělština"
});
alert("gucci");
var current_language;
console.log("p");
console.log("o",current_languages);
current_languages.then(function(e){
  alert("string");
  console.log(e);
  let current_languages_list = String(e.current_languages).split(",");
  console.log("l",languages);

其他代码，所以你可以运行插件：

manifest.json

{
    "manifest_version": 2,
    "name": "Vylepšení pro wikislovník",
    "version": "0.2",
    "content_scripts": [
        {
            "matches": ["*://*.cs.wiktionary.org/*"],
            "js": [ "content.js"],
            "run_at": "document_end"
        }],
    "background": {
      "scripts": ["background.js"]
    },
    "browser_action": {
      "default_title": "Vylepšení pro wikislovník - Nastavení"
    },
    "permissions": ["storage"],
    "options_ui": {
    "page": "options.html",
    "browser_style": false
    }
}

background.js

function handleClick() {
  browser.runtime.openOptionsPage();
}

browser.browserAction.onClicked.addListener(handleClick);

options.html 和 options.js

document.getElementsByClassName("submit")[0].onclick = function(){document.getElementById("saved").style.display = "block";}
function saveOptions(e) {
  e.preventDefault();
  let storageItem = browser.storage.local.set({
    jazyky1: document.getElementById("jazyky1").value,
    zvyraznit_preklady: document.getElementById("zvyraznit_preklady").value, //a
    colour: document.querySelector("#colour").value //b
  });
}

function restoreOptions() {
  let storageItem = browser.storage.local.get('jazyky1');
  storageItem.then((res) => {
      if(res.jazyky1 == undefined){
       resetOptions();
    }else{
      document.getElementById("jazyky1").value = String(res.jazyky1);
    }
  });
  storageItem = browser.storage.local.get('zvyraznit_preklady');
  storageItem.then((res) => {
    if(res.jazyky1 == undefined){
    }else{
      document.getElementById("zvyraznit_preklady").value = String(res.zvyraznit_preklady);
    }
  });
  storageItem = browser.storage.local.get('colour');
  storageItem.then((res) => {
    if(res.jazyky1 == undefined){
    }else{
      document.getElementById("colour").value = String(res.colour);
    }
  });
}
function resetOptions(e){
  let clearing = browser.storage.local.clear();
  clearing.then(function(e){
    let storageItem = browser.storage.local.set({
    jazyky1: "němčina",
    zvyraznit_preklady: "němčina",
    colour: "yellow"
    });
  document.getElementById("jazyky1").value = "němčina";
  document.getElementById("zvyraznit_preklady").value = "de";
  document.getElementById("colour").value = "yellow";
  storageItem.then(function(e){restoreOptions();}); 
  });
}

  

document.addEventListener('DOMContentLoaded', restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);
document.getElementById("reset").addEventListener("reset", resetOptions);

<!DOCTYPE html>
<html>
  <head>
    <title>Vylepšení pro Wikislovník</title>
    <meta charset="utf-8">
  </head>
  <style>
    h1 {
      color: #008844;
      text-shadow: 10px 10px black;
    }
    h2{
      font-family: Consolas;
    }
    button {
      min-height: 32px;
    }
    .submit {
      background-color: #00ddff;
      border: none;
      border-radius: 4px;
      padding: 3px 10px;
      font-weight: 600;
      cursor: grab;
    }
    .submit:active {
      transform: translateY(2px);
    }
    @media (prefers-color-scheme: dark) {
    body { background-color:  #333; color: white; 
    }
    }
    a {
      color: aquamarine;
    }
  </style>
<body>
  <center>
  <form>
  <h1>Vylepšení pro (český) Wikislovník pro hesla v jazyce němčina a čeština</h1>
  <p>Ale i pro další jazyky, tam jsem to ale netestoval.</p>
  <h2>1.) Posunutí sekce "význam" před tabulku deklinace pro slovesa</h2>
  <p>Jazyky zadávejte zcela obyčejným způsobem, oddělujte čárkou (př. němčina, španělština).</p>
  
  <label>Pokud chcete přidat další jazyky</label>
  <input type="text" id="jazyky1" >
  
  <h2>2.) Zvýraznění překladů v jazyce:</h2>
  <p><b>Poznámka:</b>Tady napište kód jazyka který chcete v sekci překlady zvýraznit (př. pro němčinu <b>de</b>, španělštinu <b>es</b>, angličtinu <b>en</b>, francoužštinu <b>fr</b>, ruštinu <b>ru</b>, atd. Oddělujte čárkou.<br>
  (Já jsem to nevymyslel) </p>
  
  <label>Přidat jazyky</label>
  <input type="text" id="zvyraznit_preklady" >
  
  <p><b>Poznámka:</b>Tady napište barvu/barvy, kterými chcete jednotlivé překlady zvýraznit. Pište ve tvaru kód jazyka, barva. Možné barvy jsou yellow (žlutá), green (zelená), a <a href= https://cs.wikipedia.org/wiki/Wikipedie:Tabulka_barev#Slovn%C3%AD_k%C3%B3dy_barev target="_blank">jiné názvy barev anglicky</a>. Pokud chcete zadat vlastní barvu, zkopírujte její kód HEX (<a href = https://www.google.com/search?q=color+picker target="_blank">vybírátko barev najdete tady</a>)  Oddělujte čárkou.<br>
  </p>
  
  <label>Vybrat barvu</label>
  <input type="text"  placeholder= "de, green" id="colour" >
  <br>
  <br>
  <button class="submit" type="submit">Uložit změny</button>
  <button id = "reset" type="reset">Obnovit původní hodnoty</button>
  <br>
  <p id="saved" style="font-family: Consolas;color: green;display:none;">Saved!</p>
  <script src="options.js"></script>
  </form>
  </center>
</body>

</html>

抱歉，我的代码有点罗嗦 :)

Answer 1

注意：您不需要 post options.html 和 options.js.

这里是问题...

console.log("gggggg");
var zvyraznit = browser.storage.local.get('zvyraznit_preklady'); //v kterých jazycích
zvyraznit.then(function(e){
  var barva = browser.storage.local.get('colour');//.split(","); //seznam jazyk, barva
});

// here ... brava is not defined since it was defined inside another function
barva.then(function(e){
  var current_languages = browser.storage.local.get('jazyky1'); //"španělština"
});

您需要链接 Promise 或使用 async/await，例如

var zvyraznit = browser.storage.local.get('zvyraznit_preklady'); //v kterých jazycích
zvyraznit.then(function(e){
  var barva = browser.storage.local.get('colour');//.split(","); //seznam jazyk, barva
  barva.then(function(e){
    var current_languages = browser.storage.local.get('jazyky1'); //"španělština"
  });
});

如果你打算使用then()，那么并不总是需要设置变量名，例如

browser.storage.local.get('colour').then(function(e){
  browser.storage.local.get('jazyky1').then( /*.......*/ );
});

您也可以使用async/await。
注意：最好声明变量。

(async() => {

  const myCollection1 = document.getElementsByClassName("tocnumber");
  const myCollection2 = document.getElementsByClassName("toctext");
  const languages = []; //jazyky na stránce

  for (let i = 0; i < myCollection1.length; i++) {
    if (Number.isInteger(Number(myCollection1[i].innerText))){
      languages.push(myCollection2[i].innerText);
    }  
  } 
 
  console.log("gggggg");
  const zvyraznit = await browser.storage.local.get('zvyraznit_preklady'); //v kterých jazycích
  const barva = await browser.storage.local.get('colour');//.split(","); //seznam jazyk, barva
  const current_languages = await browser.storage.local.get('jazyky1'); //"španělština"
  
  alert("gucci");

  console.log("p");
  console.log("o", current_languages);

  alert("string");
  console.log(e);
  let current_languages_list = String(e.current_languages).split(",");
  console.log("l",languages);

})();

以上代码中，最好一次获取存储，例如

  const result = await browser.storage.local.get();
  const zvyraznit = result.zvyraznit_preklady; //v kterých jazycích
  const barva = result.colour;//.split(","); //seznam jazyk, barva
  const current_languages = result.jazyky1; //"španělština"

如果你不想使用async/await，那么这里有一个例子：

browser.storage.local.get().then(process);

function process(storage) {

  const myCollection1 = document.getElementsByClassName("tocnumber");
  const myCollection2 = document.getElementsByClassName("toctext");
  const languages = []; //jazyky na stránce

  for (let i = 0; i < myCollection1.length; i++) {
    if (Number.isInteger(Number(myCollection1[i].innerText))){
      languages.push(myCollection2[i].innerText);
    }
  }

  console.log("gggggg");

  const zvyraznit = storage.zvyraznit_preklady; //v kterých jazycích
  const barva = storage.colour;//.split(","); //seznam jazyk, barva
  const current_languages = storage.jazyky1; //"španělština"

  alert("gucci");

  console.log("p");
  console.log("o", current_languages);

  alert("string");
  console.log(e);
  let current_languages_list = String(e.current_languages).split(",");
  console.log("l",languages);
}

在 Firefox 的 content.js 中调用 browser.storage.local.get() 后无法 console.log()

Can't console.log() after calling browser.storage.local.get() in content.js in Firefox

javascript

browser

firefox

firefox-addon-webextensions