Как заставить пользовательские стили браузера (Chrome) работать в Google Earth Web?

#javascript #css #google-chrome #google-earth

#javascript #css — код #google-chrome #google-планета Земля

Вопрос:

Я использую браузер Chrome, версия 87.0.4280.141 (официальная сборка) (64-разрядная версия). И я использую расширение Stylus для пользовательских стилей на некоторых веб-сайтах по определенным причинам.

Я хочу скрыть определенные элементы интерфейса на https://earth.google.com/web /. Например, div id=»earthNavigationElements». В настоящее время я делаю это вручную каждый раз, когда посещаю Google Планета Земля, щелкая правой кнопкой мыши по элементам, проверяя, а затем удаляя элемент из HTML.

Для любого другого веб-сайта стилус работает нормально, у меня просто есть #div-id { display:none } для соответствующих элементов. Но это не влияет на Google Earth Web. Похоже, у Google есть какая-то защита.

Я тоже пробовал Firefox Stylus, и там он тоже не работает.

Есть идеи, как применить пользовательские стили в Google Earth Web, с расширением или без него, чтобы мне не приходилось каждый раз вручную скрывать определенные элементы интерфейса?

Ответ №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';
})

1. Как мне использовать приведенный выше код? Куда мне это поместить?

2. вы можете поместить его в <script> script code here </script> перед </body>

3. Что <body> вы имеете в виду? Я просматриваю earth.google.com/web в браузере Chrome. Я не создаю веб-страницу.