Javascript Chrome扩展中的类选择困难

我正在编写一个chrome扩展，它在DOM顶部呈现一个工具栏。打开时，我已经编写了javascript，它将所有内容向下推30像素，以允许工具栏不间断地查看其余内容

我遇到的问题是document.querySelector。我正在使用一个简单的Javascript Chrome扩展（用户Javascript和CSS）来快速原型化，并确保在打包所有内容并将其加载到Chrome之前，代码至少可以远程工作。通过浏览器扩展，使用查询选择器选择图元可以正常工作，但不能正常工作

在阅读时，我看到了一些我并不完全理解的内容脚本。是否有一个很好的资源来了解这些以及何时应该使用它们？我的研究不是很有帮助，但我觉得我找的地方不一定对。我知道有些东西需要chromeapi来访问网页（防止恶意脚本？）

我试过一些方法。我尝试的第一件事是：

document.getElementsByClassName（“小标题”）.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";
    } 
  }
}


for（var i=0；i-1）{
navBar=document.createElement（'div'）；
setAttribute（“id”、“pwmdnavbar”）
navBar.innerHTML='博物馆指南
让我看看灰尘！X'；
x、 插入之前（导航栏，x.firstChild）；
}
如果（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。有什么想法吗？
1）GetElementsByCassName返回一个类似数组的集合，因此第一个代码无法正常工作，您需要添加
[0]
来选择第一个元素，2）我在html代码段中没有看到
小标题
，我看到了
小标题包装器
，3）您应该看到错误消息，因此，既然您没有看到，我猜这段代码就像后台脚本一样在错误的上下文中运行。您需要声明一个，并将代码放入其中。如果您已经这样做了，请向我们展示manifest.json的相关部分，并指定包含代码的文件的名称。