Javascript Chrome扩展用户界面

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

我想为跨平台设计同样的外观和感觉，如果可能的话，再加上一点装饰。我的意思是，我希望所有可能的HTML元素，例如，复选框、单选框、选择框、选项标记，都能为跨平台设置相同的样式

---

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

您所请求的是一个要求很高的功能（尽管尚未实现），请参阅Chromium的bug tracker上的

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

实现在Linux、Mac和Windows上看起来完全相同的像素级UI

使用相关平台的本机控件实现UI

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

因此，从基本的非样式化HTML开始，以获得正确的主要目的。例如：

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

一些选择

完成后，如果愿意，可以使用CSS装饰UI。但不要过度：用户应该仍然能够识别复选框

---

如果您的应用程序特别需要特定于平台的颜色，请使用CSS颜色关键字，如

ButtonFace

，

ButtonText

，

CaptionText

，等等。您可以找到更多这些关键字。

更新后，您可能正在寻找类似的内容。有许多备选方案，例如，请参见以下答案：

---

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

我专门为chrome扩展制作了一个小的UI工具包，它与默认chrome设置页面的外观和感觉非常相似。看一看

---

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

您能更清楚地了解哪些部分看起来不同吗？也许一个不同之处的截图会有所帮助。选项页面只是一些HTML，因此如果您对其应用CSS，它将像标准网页一样工作。不确定你所说的“弹出窗口”是指哪个UI功能？你指的是弹出窗口，还是当你点击浏览器或页面操作时会得到什么？我更新了这个问题。我缺乏CSS和设计技巧。如果可能的话，我需要准备好的CSS模板或库来完成这项工作。请检查outhttp://getbootstrap.com/ 谢谢，我知道本机很好，但我认为一致的外观将有助于将扩展移植到其他平台和浏览器。这就是为什么我要一个CSS或Javascript库。你想解决什么问题？如果您的HTML是正常的，那么您的选项页面在每个平台/浏览器上都会正常显示。通用库建议在堆栈溢出问题上是离题的，因为答案往往变得过时和固执己见。您不应该为了使用库而使用库，而是定义需求，然后查找库。这使得找到合适的框架/库变得更容易（谷歌是你的朋友）。仅供参考，你的作品在Chrome 40+中将基本上过时，因为

选项\u ui

，请参阅@RobW注意，接受Chrome注入的CSS是可选的选项v2，问题是关于覆盖用户代理CSS。@Xan的Q是关于一致的跨平台UI。这个答案提升了一个库，“类似于默认chrome设置页面的外观和感觉”。我还没有看过链接的框架，但是这个描述听起来像是Chrome40+通过

options\uUI

（又名OptionsV2）解决的问题。我只是想指出这一点。@RobW感谢您提供的信息，但谷歌也建议同时指定

options\u-page

和

options\u-ui

，这样Chrome40+就可以使用

options\u-ui

，而较低版本可以使用

options\u-page

。所以我想让你的选项页面在所有版本中看起来都很相似，我的

ui工具包

可能非常有用。哇！！谢谢我知道用户界面上有很多选项，但看到你的作品真是太好了。