Firefox Extension How to call function / store any variable

Question

How can i call function of my js script in Firefox extension

{

  "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 have a function but it Firefox don't getting function and variable

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

I only received start now in console and whenever i try to get var t or try to function it has error Uncaught ReferenceError: keye is not defined and t no defined as it say start now that mean java script run but don't hold any storage for var or function

I add element and add inner HTML and set onclick function and there i run this function.

Answer 1

"content_scripts" default run_at is "document_idle" which means the document and all its resources have finished loading.

window.onload will not fire for your script since script is injected after window 'load' . It is not needed anyway.

Here is an example...

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;
}

Update on Comment

Please note that Page JavaScript is isolated from Content JavaScript for security. They run in different context/scope.

When you create a DOM, like <button id="st" onclick="keye()"> Start</button> and inject it into the page DOM, the onclick="keye()" will belong to page JavaScript. Obviously, page JavaScript can not access the function keye() which is in the content scope.

You would need to add the onclick in content scope if you want to run a function in the content scope.

For example:

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

Now the 'click' will run keye() in content scope.