How to make browser custom styles (Chrome) work on Google Earth Web?

HTML & CSS
1

I am using Chrome browser, version 89.0.4389.82 (Official Build) (64-bit). And I use Stylus extension for custom styles on some websites, for specific reasons.

While browsing Google Earth Web, I want to hide certain interface elements on https://earth.google.com/web/. For example, div id=“earthNavigationElements” . Currently, I am doing this manually every time I visit Google Earth, by right clicking on the elements, Inspect and then delete element from HTML.

For any other website, Stylus works fine, I simply have #div-id { display:none } for the respective elements. But it has no effect on Google Earth Web. Seems like Google has some kind of protection.

I tried Firefox + Stylus too, and it doesn’t work on there too.

Any ideas how to apply custom styles on Google Earth Web, with or without an extension, so that I don’t have to manually hide certain interface elements every time?

Thanks for any ideas.

2

Hi,

I couldn’t find the example div you referred to.

The ID is quite specific, in case you can’t use the direct site, could you use a global rule?

3

The div items I want to hide are:

#toolbar
#earth-relative-elements

It appears that they change div names from time to time. Global rule is what I had tried and not worked.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.