CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromegoogle-chrome-extension
sampathsris
sampathsris

Reputation: 22290

UI Consistency: How do I inherit browser's look and feel in my Chrome extension

I am building a simple extension for chrome, which has a popup page. The page looks like this:

enter image description here

As you can see, the page's text is in Times New Roman, which is what I would get a if I opened a plain webpage in Chrome. Fair enough!

But I want to inherit the look and feel of the browser's UI to my extension. At least the font. How could this be done?

Edit: It is possible to get the style information from examining a chrome://* page (e.g. Extensions), using "Inspect Element". This is what I already did.

enter image description here

Although it looks much better, this is not a generic solution. Chrome's look and feel changes slightly by operating systems. For example,

So you're guaranteed to break the consistency in some OS.

Upvotes: 2

Views: 248

Answers (1)

kalman
kalman

Reputation: 654

You can't inherit them, though it's a timely question - we're actually starting to experiment with something like this.

In the meantime, most of those fonts are only available on the OS that they're used on, so you can list them all and rely on normal font-family fallback:

Like https://github.com/kalman/chrome-extensions/blob/master/browser-clock/options.html#L8

Maybe not Windows XP, but that's not supported anyway.

Upvotes: 3

Related Questions