CODEWITHSUNDEEP
javascriptcssgoogle-chromeuser-interfacegoogle-chrome-extension
Xunshirine
Xunshirine

Reputation: 181

Chrome Extension User Interface

I have written my Google Chrome extension and now have a basic interface for Options and Browser Action Popups. But the look and feel differs in Mac, Windows and Linux.

I want to create the same look and feel for cross platform, and a bit fancier if possible. I mean I want all possible HTML elements, e.g. checkbox, radio, select, option tag to style same for cross platform.

I am lacking design skills and looking for a quick and ready solution. Is there any CSS or Javascript library to create the same user interface for all operating systems?

Upvotes: 1

Views: 2305

Answers (3)

Ram Patra
Ram Patra

Reputation: 16674

I have made a small UI kit especially for chrome extensions which resembles the exact look and feel of the default chrome settings page. Give it a look at http://code.compzets.com/css-kit-for-chrome-extensions/.

I have also used this for my own extension SimpleFill.

Upvotes: 1

Chris Alexander
Chris Alexander

Reputation: 1312

Following your update, perhaps you are looking for something like Bootstrap. There are many alternatives, for example see this answer: https://stackoverflow.com/a/9214391/2022285

It should be noted that because the Chrome platform is designed to build on the web platform, it is conceivable to use any type of client JavaScript / CSS libraries in your Extensions (certain security policies notwithstanding)

Upvotes: 0

Rob W
Rob W

Reputation: 349232

What you're requesting is a highly-demanded feature (though not implemented yet), see Issue 25317: Help extensions authors make options pages with a consistent look on Chromium's bug tracker.

When you implement an options page, you could take either of the two next methods:

  1. Implement a pixel-perfect UI that looks identical on Linux, Mac and Windows.
  2. Implement a UI using native controls of the relevant platforms.

I suggest to follow approach 2, because the most important part of an options page is the ability to quickly set preferences. This is achieved by using controls that are familiar to the user.

So, start with the basic unstyled HTML to get the main purpose right. E.g.:

<label>
    <input type="checkbox" id="some-option-id">
    <span>Some option</span>
</label>

When you've done that, you could dress up the UI with CSS if you wish. But don't overdo it: users should still be able to recognize a checkbox.

If your app specifically demands for platform-specific colors, use CSS color keywords such as ButtonFace, ButtonText, CaptionText, etc. You can find more of these keywords in Chromium's source code.

Upvotes: 2

Related Questions