Web扩展程序:如何使用& quot; browser_style = true& quot ;? [英] Web Extension : How do I use "browser_style = true"?

问题描述

编写Firefox Web扩展程序时，可以对浏览器或页面操作使用默认的CSS，以使其样式类似于其他浏览器UI组件.通过插入:

When writing a Firefox web extension it's possible to use a default css for browser or page actions so that they are styled like other browser UI components. It's done by inserting:

"browser_style": true

扩展清单中的

.可以使用 panel-section-footer-button 之类的样式.

in the extension manifest. Styles like panel-section-footer-button become available.

我的问题:您怎么知道如何使用默认样式，似乎没有官方的来源或描述?

My question: How can you know how to use the default styles, there doesn't seem to be an official source or description of them?

相关:

• 内置资源 chrome://browser/content/extension.css 中的CSS.

此弹出示例，该网站使用了一些默认样式.

This popup example on Mozilla site, which uses some default styles..

推荐答案

使用"browser_style":true 会生成 chrome://browser/content/extension.css >文件已应用于您的HTML(在OSX上 chrome://browser/content/extension-mac.css 代替).

Using "browser_style": true results in the chrome://browser/content/extension.css file being applied to your HTML (on OSX chrome://browser/content/extension-mac.css is applied instead).

Mozilla有一个样式指南，您可以仔细阅读该指南以了解各种元素和类的方式被使用.该样式指南的链接位于 browser_action 文档页面的语法"部分中的> browser_style 条目.在 page_action MDN文档页面.就个人而言，我认为将样式指南中包含的信息直接托管在MDN而不是 firefoxux.github.io .

Mozilla has a Style Guide which you can peruse to see how various elements and classes are used. The link to this Style Guide is in the browser_style entry within the "Syntax" section of the browser_action documentation page. A similar link is in the same location on the page_action MDN documentation page. Personally, I would find it more appropriate for the information contained in the Style Guide to be hosted directly on MDN rather than on firefoxux.github.io.

如果您仅对元素和类感兴趣，可以在组件"部分下找到示例.

If you are just interested in the elements and classes, you can find examples under the Components section.

注意:在有些条件，Firefox也尝试申请 chrome://browser/content/extension-win-panel.css 或 chrome://browser/content/extension-mac-panel.css 都不存在.

Note: Under some conditions, Firefox also attempts to apply chrome://browser/content/extension-win-panel.css or chrome://browser/content/extension-mac-panel.css neither of which exist.

这篇关于Web扩展程序:如何使用& quot; browser_style = true& quot ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！