时间戳

首页 > 解决方案 > 如何使浏览器自定义样式 (Chrome) 在 Google Earth Web 上运行？

javascript - 如何使浏览器自定义样式 (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 没有影响。似乎谷歌有某种保护。

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

任何想法如何在谷歌地球网络上应用自定义样式，无论有没有扩展，这样我就不必每次都手动隐藏某些界面元素？

标签： javascriptcssgoogle-chromegoogle-earth

解决方案

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

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

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

推荐阅读