Chrome扩展程序用户界面

Question

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, eg 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?

Answer 1

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. Eg:

<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 .

Answer 2

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.

Answer 3

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)