Сложность выбора класса в расширении Chrome

Question

Я пишу расширение Chrome, которое отображает панель инструментов в верхней части DOM. При открытии я написал javascript, который толкает все на 30px, чтобы позволить остальному контенту просматриваться без прерывания панелью инструментов.

У меня проблема с document.querySelector. Я использую простое расширение Javascript Chrome (User Javascript и CSS), чтобы быстро создавать прототипы и убедиться, что код хотя бы удаленно работает, прежде чем я все упаковываю и загружаю в Chrome. Использование селектора запросов для выбора элемента работает нормально через расширение браузера, но не

После некоторого чтения - я вижу вещи о скриптах содержимого, которые я до конца не понимаю. Есть ли хороший ресурс, чтобы узнать о них и когда они должны быть использованы? Мои исследования не очень помогли, но я чувствую, что не обязательно ищу в нужных местах. Я понимаю, что для некоторых вещей требуется доступ к веб-странице API Chrome (для предотвращения злонамеренных сценариев?)

Я пробовал несколько вещей. Первое, что я попробовал, это:

document.getElementsByClassName("mini-header").style.marginTop = "30px";

, который, кажется, работает в этом расширении javascript для вставки, но не в реальной работе.

Второе:

document.querySelector(".mini-header").style.marginTop = "30px";

Опять же, это работает в расширении внедрения javascript, но не в реальном производстве.

Вот текущий скрипт:

  for (var i = 0; i < checkURL.length; i++) {
    if(window.location.href.indexOf(checkURL[i]) > -1){
      navBar =  document.createElement('div');
      navBar.setAttribute("id", "pwmdnavbar")
      navBar.innerHTML = '<div id="pwmdnavbartitle"><p>The Museum Guide</p></div><div id="hellify"><button id="hellifybutton">Show Me The Dirt!</button></div><div id="closepwmdnavbar"><button id="closepwmdnavbarbutton">X</button></div>';
      x.insertBefore(navBar, x.firstChild);
      }
    if (window.location.href == "whitney.org"){
      document.getElementById("w").style.marginTop = "30px";
      document.querySelector(".mini-header").style.marginTop = "30px";
    } 
  }
}

Элемент, который я пытаюсь выбрать и изменить, находится здесь:

<div class="mini-header__wrapper">
  <aside class="mini-header content-wrapper">
    <div class="mini-header__left">
      <a class="mini-header__title" href="/" tabindex="-1">Whitney Museum of American Art</a>
    </div>

    <div class="mini-header__right">
      <div class="nav-actions">
          <div class="nav-actions__hours body-medium">
            <a href="/visit#hours">Open today: 10:30 am–6 pm</a>
          </div>

          <a href="/ticketing-services" class="nav-actions__link nav-actions__link--btn nav__link nav__link--primary" onclick="if (useAnalytics) dataLayer.push({'event': 'gaEvent', 'category': 'Buttons', 'action': 'click', 'label': 'Ticketing (Header)' });">
            Buy Tickets
          </a>

        <a href="/membership-services" class="nav-actions__link nav-actions__link--btn nav__link nav__link--secondary" onclick="if (useAnalytics) dataLayer.push({'event': 'gaEvent', 'category': 'Buttons', 'action': 'click', 'label': 'Membership (Header)' });">
          Become a Member
        </a>
      </div>

      <button class="mini-header__menu" type="button" aria-label="Scroll to menu" onclick="if (useAnalytics) dataLayer.push({'event': 'gaEvent', 'category': 'Buttons', 'action': 'click', 'label': 'Menu (Header)' });">
        Menu
      </button>

      <button class="mini-header__mobile-menu" type="button" aria-label="Menu" aria-haspopup="true" onclick="if (useAnalytics) dataLayer.push({'event': 'gaEvent', 'category': 'Buttons', 'action': 'click', 'label': 'Menu (Header)' });" aria-expanded="false">
        Menu
      </button>
    </div>
  </aside>
</div>

Я не получаю никаких сообщений об ошибках. Это просто не модифицирует CSS так, как я ожидаю. Есть мысли?