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() 。