javascript - Chrome 扩展用户界面

Question

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

我想为跨平台创建相同的外观和感觉，如果可能的话更漂亮一些。我的意思是我想要所有可能的 HTML 元素，例如复选框、单选框、选择、选项标签，为跨平台设置相同的样式。

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

Answer 1

您所请求的是一项需求量很大的功能(尽管尚未实现)，请参阅 Issue 25317: Help extensions authors make options pages with a consistent look在 Chromium 的错误跟踪器上。

当您实现一个选项页面时，您可以采用以下两种方法之一:

1. 实现像素完美的用户界面，在 Linux、Mac 和 Windows 上看起来完全相同。
2. 使用相关平台的原生控件实现 UI。

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

因此，从基本的无样式 HTML 开始，以实现正确的主要目的。例如:

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

完成后，您可以根据需要使用 CSS 修饰 UI。但不要过度:用户应该仍然能够识别复选框。

如果您的应用特别需要特定于平台的颜色，请使用 CSS 颜色关键字，例如 ButtonFace、ButtonText、CaptionText 等。您可以找到更多这些关键字 in Chromium's source code .