Im building a chrome extension and my code isnt running but there is no error. i just think the code is setup incorrectly

Question

Im trying to build a chrome web extension which when i click a key on my keyboard it clicks an HTML element. the click functionality is working perfectly as when i paste it into the console it works just fine. how ever when i put that code in the background.js of my chrome extension it doenst work. nothing happens. im fairly certain it is just because im not setting it up properly.

this is the code i want the extension to execute. just not sure how to implement it. maybe im not utilizing background.js for what its meant to be and some of this code should be in a content script im not sure right now i have nothing in the content script. any help would be appreciated. in the long term i want to set it up with a proper html popup menu where users can select the keys they want to map but i cant even get it running like this yet.

const selector = 'button.btn-standard.call-to-action'; 
  const button = document.querySelector(selector);
  
  const triggerClick = (target) => {
    let event = document.createEvent ('MouseEvents');
    event.initEvent ('mousedown', true, true);
    target.dispatchEvent(event);
  
    event = document.createEvent ('MouseEvents');
    event.initEvent ('mouseup', true, true);
    target.dispatchEvent(event);
  };
  document.addEventListener('keydown', function(event){
    if (event.keyCode===65){
      triggerClick(button);
    }
  })

this is my manifest.json

{
    "name":"Macro",
    "description": "tool that maps keys to HTML buttons",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
      {
        "matches":["<all_urls>"],
        "js": ["foreground.js"]
      }
    ], 
    "background":{
    "persistent": false,
    "scripts": ["background.js"] 
    },

    "browser_action":{
      "default_title": "Macros", 
      "default_popup": "popup.html"
    }, "permissions": [ "activeTab", "tabs", "contextMenus", "background"] 
}