Chrome扩展程序用户界面

Question

我已经编写了Google Chrome扩展程序，现在有一个用于选项和浏览器操作弹出窗口的基本界面。但是Mac，Windows和Linux的外观和感觉都不同。

我希望为跨平台创建相同的外观和感觉，如果可能的话，有点发烧友。我的意思是我想要所有可能的HTML元素，例如复选框，收音机，选择，选项标签为跨平台的样式相同。

我缺乏设计技巧，正在寻找快速准备的解决方案。是否有任何CSS或Javascript库为所有操作系统创建相同的用户界面？

Answer 1

您要求的是一项要求很高的功能（虽然尚未实现），请参阅Chromium的错误跟踪器上的Issue 25317: Help extensions authors make options pages with a consistent look。

实施选项页面时，您可以采用以下两种方法之一：

1. 在Linux，Mac和Windows上实现看起来相同的像素完美UI。
2. 使用相关平台的本机控件实现UI。

我建议遵循方法2，因为选项页面最重要的部分是快速设置首选项的能力。这是通过使用用户熟悉的控件来实现的。

因此，从基本的无格式HTML开始，以达到主要目的。 E.g：

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

如果你愿意的话，你可以用CSS装扮UI。但不要过度：用户应该仍然能够识别复选框。

如果您的应用特别要求使用平台特定的颜色，请使用CSS颜色关键字，例如ButtonFace，ButtonText，CaptionText等。您可以找到更多这些关键字{{3 }}

Answer 2

我制作了一个小型UI工具包，特别适用于镀铬扩展，类似于默认镀铬设置页面的确切外观。看看http://code.compzets.com/css-kit-for-chrome-extensions/。

我也将它用于我自己的扩展SimpleFill。

Answer 3

在您更新之后，也许您正在寻找类似Bootstrap的内容。有很多选择，例如，请参阅此答案：https://stackoverflow.com/a/9214391/2022285

应该注意的是，由于Chrome平台旨在构建在Web平台上，因此可以设想在扩展中使用任何类型的客户端JavaScript / CSS库（尽管有某些安全策略）