Блог

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

Я хочу скрыть определенные элементы интерфейса на https://earth.google.com/web /. Например, идентификатор div=»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';
})