how to convert html+ javascript code to chrome extension

I want to create my first extension under chrome and I have this javascript code:

functions = {
 1 : function(){alert(1);},
 2 : function(){alert(2);},
 3 : function(){alert(3);},
 4 : function(){alert(4);},
 5 : function(){alert(5);},
 6 : function(){alert(6);},
}
 
function onClickHandler(f){
  functions[f]();
}

<input name="inpt" id="inpt" />
<button id="btn" onClick="onClickHandler( document.getElementById('inpt').value )">Enter</button>

now i want to convert this code to chrome extension and so i did the following

index.html

    <input name="inpt" id="inpt"/>
<button id="btn">Enter</button>

popup.js

const button = document.getElementById('btn');
const input = document.getElementById('inpt');
 
button.onclick = async evt => {
 
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['injector.js'],
 
  });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: inPage,
    args: [input.value],
  });
  window.close();
};
 
function inPage(popup) {
  functions[popup]();

injector.js

functions = { 
  1 : function(){alert(1);}, 
  2 : function(){alert(2);}, 
  3 : function(){alert(3);},
  4 : function(){alert(4);}, 
  5 : function(){alert(5);}, 
  6 : function(){alert(6);}, 
}

Is there a solution that allows me to do this. I'm fairly new to all of this, so any help would be much appreciated.