如何使浏览器自定义样式 (Chrome) 在 Google Earth Web 上运行？

Question

我使用的是 Chrome 浏览器，版本 87.0.4280.141（官方版本）（64 位）。出于特定原因，我在某些网站上使用 Stylus 扩展来自定义样式。

我想隐藏https://earth.google.com/web/ 上的某些界面元素。例如，div id="earthNavigationElements"。目前，我每次访问 Google 地球时都手动执行此操作，方法是右键单击元素，检查然后从 HTML 中删除元素。

对于任何其他网站，Stylus 都可以正常工作，我只需将 #div-id { display:none } 用于相应的元素。但它对 Google Earth Web 没有影响。似乎 Google 有某种保护措施。

我也尝试过 Firefox + Stylus，但它也无法在那里工作。

有什么想法可以在 Google 地球网络上应用自定义样式，无论是否有扩展，这样我就不必每次都手动隐藏某些界面元素？

Answer 1

我认为这是因为您要隐藏的元素位于 shadow-root 内，因此您无法轻松地将 CSS 应用于该元素。

我有这个 JavaScript 代码可以帮助您解决问题：

var earthElements = document.querySelectorAll('earth-app');
earthElements.forEach(function(item){
  var root = item.shadowRoot;
  root.querySelector('#earthNavigationElements').style.display = 'none';
})