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

问题描述

我使用的是 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 Earth Web 上应用自定义样式，无论是否有扩展程序，这样我就不必每次都手动隐藏某些界面元素？

解决方法

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

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

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

google-chrome google-earth javascript