I want to make an exstntion that will paste text from a random list. but i cant get it to work

i cant seem to get the text to acctally paste into any text box or doc
i have tiend a lot of diffrent things but nothing seems to be working.
if there is something im missing im not sure.
is there a way to do so?
could i get some help?

manifest.json

{
    "manifest_version": 3,
    "name": "Random Word Inserter",
    "version": "1.0",
    "description": "Inserts a randomly chosen word into text boxes when the tab key is pressed.",
    "permissions": ["activeTab"],
    "background": {
      "service_worker": "background.js"
    },
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
      }
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }
  

Contents.js

const words = ["apple", "banana", "orange", "grape", "pineapple"];

document.addEventListener("keydown", function (event) {
  if (event.key === "Tab") {
    const inputFields = document.querySelectorAll("input[type='text']");
    inputFields.forEach(function (input) {
      const randomIndex = Math.floor(Math.random() * words.length);
      const randomWord = words[randomIndex];
      input.value += randomWord;
    });
  }
});

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Word Inserter Settings</title>
</head>
<body>
  <h1>Random Word Inserter Settings</h1>
  <p>No settings available yet.</p>
</body>
</html>