looking to inject a script into twitch chat but am stuck, do i need background.js or is there a way to just inject the content script

Question

kind of lost right now have been on google for 2 hours i am new to coding and want to inject something that adds a button to each twitch chat 'on-hover'

Manifest.json

{
    "name": "Hello Extensions",
    "description": "Base Level Extension",
    "version": "1.0",

    "manifest_version": 3,
    "action": {
        "default_popup": "popup.html",
        "default_icon": "hello.png"
      },
      "background": {
          "service_worker": "content-script.js"
      },
      "permissions": ["tabs"],
      "content_scripts": [{
          "matches": ["https://*.twitch.tv/*"],
          "exclude_globs": ["https://www.twitch.tv/directory/*",
          "https://www.twitch.tv/p/*",
          "https://www.twitch.tv/products/*",
          "https://www.twitch.tv/*/manager*",
          "https://www.twitch.tv/*/dashboard",
          "https://www.twitch.tv/broadcast",
          "https://www.twitch.tv/messages/*",
          "https://www.twitch.tv/settings"],
          "js": ["content-script.js"],
          "run_at": "document_end"
      }
    ]
  }

Content-script.js

var config = {attributes: false, childList: true, characterData: false};

var htmlBody = $("body")[0];
var chatLoadedObserver = new MutationObserver(function (mutations, observer) {
    mutations.forEach(function (mutation) {
        var chatSelector = $(".chat-line__message");
        if (chatSelector.length > 0) {
            // Select the node element.
            console.log("new chat message.")
            var target = chatSelector[0];

            // Pass in the target node, as well as the observer options
            bookmark.observe(target, config);

            // Unregister chatLoadedObserver. We don't need to check for the chat element anymore.
            observer.disconnect();
        }
    })
});

chatLoadedObserver.observe(htmlBody, config);

what else do i need to make this functional?