Modifying (specifically) the Twitch clips DOM with Chrome Extension

Question

I've been trying to modify the Twitch Clips (twitch.tv//manager/clips) DOM for the past few hours through Javascript in a Chrome Extension. I can access some high-level elements of the DOM, such as the root node element when I grab it with:

document.getElementById('root')

But I can't seem to access anything underneath that, which I'm finding troubling. I need to be able to access each individual divs for all my clips, so I can put a little icon next to the clip title.

I've scoured the internet and forums for hours trying to figure out why this is happening, but I've had no luck. I've tried creating a background script in addition to my content script, but this doesn't solve anything. I've tried enforcing my code to run after:

window.onload

and have changed my manifest to:

"run_at": "document_end"

But neither of these seem to be the problem since the DOM appears to be being loaded, but just elements of it are inaccessible...? Maybe...?

Here's my manifest:

{
  "manifest_version": 2,

  "name": "TwitchEdit",
  "version": "1.0",
  "description": "Add an edit button to the Twitch clips page  |  Copyright © 2019 Kieran (ShermanZero) Sherman",

  "content_scripts": [{
    "run_at": "document_end",
    "all_frames": true,
    "css": ["css/styles.css"],
    "js": ["js/inject.js"],
    "matches": ["https://www.twitch.tv/shermanzero/manager/clips/*"]
  }],

  "permissions": [
    "activeTab"
  ],

  "browser_action": {
    "default_title": "TwitchEdit"
  },

  "icons": {
    "16": "icons/icon_16.png",
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  }
}

And here's my inject.js script:

function modify() {
  //STEP (1/4)
  console.log("(1/4) Page loaded!");

  //STEP (2/4)
  root = document.getElementById('root');
  if(root != null) {
    console.log("(2/4) Found root window!");
  } else {
    console.error("Could not find the root window");
    return;
  }

  //STEP (3/4)
  mainPanel = root.getElementsByClassName('tw-flex-grow-1 tw-full-height tw-overflow-hidden tw-relative')[0];
  if(mainPanel != null) {
    console.log("(3/4) Found the main panel!");
  } else {
    console.error("Could not find the main panel");
    return;
  }

  //STEP (4/4)
  all = mainPanel.getElementsByClassName('clmgr-table-wrap tw-flex tw-flex-grow-1 tw-flex-wrap tw-relative')[0];
  if(all != null) {
    console.log("(4/4) Found the clips panel!");
  } else {
    console.error("Could not find the clips panel");
    return;
  }

  clips = all.getElementsByClassName('clmgr-table__row tw-align-items-center tw-flex tw-overflow-hidden');
  console.log("Total clips found: " + clips.length);

  console.log("Beginning modifications...");
  for(clip of clips) {
    let element = clip.getElementsByClassName('tw-ellipsis')[0];

    if(element != null) {
      element.innerHTML = "test";
      console.log("--Modifying element " + i + " (" + element + ")");
    }
  }
  console.log("...modifications finished")
}

modify();

As you can see, I've done a lot of debugging through my script to pinpoint exactly where the code "stops working" how I want it to.

My code always sends an error to the console at step (3/4) when it tries to grab the mainPanel, because the code returns null.

I have tested all this code directly in the Chrome console, and it works fine, so I'm not sure what I'm missing, but any help would be greatly appreciated!

Thank you!

Kieran