Firefox 擴展 如何調用 function / 存儲任何變量

Question

我如何在 Firefox 擴展中調用我的 js 腳本的 function

{

  "manifest_version": 2,
  "name": "Emailv",
  "version": "1.0",

  "description": "check email is vaild and update in database",

  "icons": {
    "48": "icons/email.png",
    "96": "icons/email.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.verifyemailaddress.org/*"],
      "js": ["Emailv.js"]
    }
  ]

}

Emaily.js 有一個 function 但它 Firefox 沒有得到 function 和變量

var t = "free"; 
function keye(){
        var x = document.getElementById("nuuu").value;
        var iop = 109;
        x = x+1;
        //sessionStorage.setItem('key', x);
        var emai = document.querySelector("body > header > form > fieldset >input").value;
    
    }
console.log("start Now");

function fire(){
    document.body.style.border = "5px solid red";
    console.log("start Now");
    document.body.onload = addElement;
    var start = document.querySelector("body > header ");
    start.innerHTML +='<div id="emailv" style="position:relative;margin:auto;width:100px;height:100px;opacity:0.3;z-index:100; background:#000;"><form><input id="nuuu" type="number"><button id="st" onclick="keye()" > Start</button></form><script></div>';
}
window.onload = fire();

我現在只在控制台中收到 start ，每當我嘗試獲取 var t 或嘗試 function 它有錯誤 Uncaught ReferenceError: keye is not defined and t no defined 因為它說現在開始這意味着 java 腳本運行但不保存任何存儲對於 var 或 function

我添加元素並添加內部 HTML 並設置 onclick function 並在那里運行此 ZC1C425268E68384D1AB579。

Answer 1

“content_scripts”默認run_at是"document_idle" ，這意味着文檔及其所有資源都已完成加載。

window.onload不會為您的腳本觸發，因為腳本是在window 'load'之后注入的。 無論如何都不需要它。

這是一個例子......

console.log('Starting the code');

const t = "free"; 

// run fire();
fire();

function fire(){
  
  console.log('fire called');
  document.body.style.border = "5px solid red";
  document.body.onload = addElement;
  const start = document.querySelector("body > header ");
  start.innerHTML += '<div id="emailv" style="position:relative;margin:auto;width:100px;height:100px;opacity:0.3;z-index:100; background:#000;"><form><input id="nuuu" type="number"><button id="st"> Start</button></form><script></div>';
}

function keye() {
  
  let x = document.getElementById("nuuu").value;
  const iop = 109;
  x = x+1;
  //sessionStorage.setItem('key', x);
  const emai = document.querySelector("body > header > form > fieldset > input").value;
}

評論更新

請注意，出於安全考慮，頁面 JavaScript 與內容 JavaScript 是隔離的。 它們在不同的上下文/范圍內運行。

當您創建一個 DOM 時，例如<button id="st" onclick="keye()"> Start</button>並將其注入到頁面 DOM 中， onclick="keye()"將屬於頁面 JavaScript。 顯然，頁面 JavaScript 無法訪問內容 scope 中的function keye() 。

如果您想在內容 Z31A1FD140BEA19E18A58D 中運行 function，則需要在內容 scope 中添加onclick

例如：

document.querySelector('#st').addEventListener('click', keye);

現在'click'將在內容 scope 中運行keye() 。