如何将样式表添加到工具栏

Question

使用 Firefox Addon SDK，我正在创建一个带有多个按钮的工具栏，我想为这些按钮创建鼠标悬停效果。

起初我想使用mouseover event，但后来我必须创建一个mouseout事件才能return它正常，所以我认为最好的方法是使用 css

在我的插件的旧 XUL 版本中，我能够通过在 XUL 代码中链接到它来附加样式表，并且只需为我的 #buttonID 添加 css，效果很好。

但是如何使用 Addon SDK 为我的工具栏添加 css 样式表？

这是我迄今为止尝试过的方法（不会产生任何错误），但我认为这只是针对内容；如果这个是正确的，那么我不确定如何绑定到元素：

const { browserWindows } = require("sdk/windows");
const { loadSheet } = require("sdk/stylesheet/utils");


//This is how to load an external stylesheet
for(let w of browserWindows){
    loadSheet(viewFor(w), "./myStyleSheet.css","author"  );
}

我也试过这个：

var Style = require("sdk/stylesheet/style").Style;
let myStyle = Style({source:'./myStyleSheet.css'});
for(let w of browserWindows){ 
    attachTo(myStyle, viewFor(w))
};

还有这个：

var { attach, detach } = require('sdk/content/mod');
const { browserWindows } = require("sdk/windows");
var { Style } = require('sdk/stylesheet/style');

var stylesheet = Style({
  uri: self.data.url('myStyleSheet.css')
});

for(let w of browserWindows){ 
    attach(stylesheet, viewFor(w))
};

这是我的 css:

#myButton:hover{list-style-image(url("./icon-16b.png")!important; }

Answer 1

使用此代码，您应该能够使用鼠标悬停或悬停来更改它的外观。

#buttonID {
  //Normal state css here
}
#buttonID:hover {
  //insert css stuff here
}

Answer 2

在浏览器工具箱中对此进行了测试：

const { require } = Cu.import("resource://gre/modules/commonjs/toolkit/require.js"); // skip this in SDK
const { browserWindows: windows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const { attachTo } = require("sdk/content/mod");
const { Style } = require("sdk/stylesheet/style");
let style = Style({ source: "#my-button{ display: none!important; }" });
// let self = require("sdk/self");
// let style = Style({ uri: self.data.url("style.css") });

for (let w of windows)
    attachTo(style, viewFor(w));

注释部分允许从插件 data 目录中的样式表文件加载。

请注意，您需要导入 SDK 加载程序才能在工具箱中使用它。在 SDK 插件中，直接使用 require。

注意：拼写有区别：self.data.url vs { uri }

见self/data documentation。

NB2：SDK 对 toggle and action 按钮使用自定义小部件 ID 方案，因此您的按钮 ID 可能与您期望的不同：

const toWidgetId = id => 
    ('toggle-button--' + addonID.toLowerCase()+ '-' + id).replace(/[^a-z0-9_-]/g, '');

或

const toWidgetId = id =>
    ('action-button--' + addonID.toLowerCase()+ '-' + id).replace(/[^a-z0-9_-]/g, '');

Answer 3

这进入 javascript 文件：

const { browserWindows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const { loadSheet } = require("sdk/stylesheet/utils");
const { ActionButton } = require("sdk/ui/button/action");
var StyleUtils = require('sdk/stylesheet/utils');

var myButton = ActionButton({
    id: "mybutton",
    label: "My Button",
    icon: { "16": "./icon-16.png", "32":"./icon-32.png", "64": "./icon-64.png" },
    onClick: function(state) {
        console.log("mybutton '" + state.label + "' was clicked");
    }  
});

//this is how you attach the stylesheet to the browser window
function styleWindow(aWindow) {
    let domWin = viewFor(aWindow);
    StyleUtils.loadSheet(domWin, "chrome://myaddonname/content/myCSSfile.css", "agent");  
}
windows.on("open", function(aWindow) {
  styleWindow(aWindow);
});
styleWindow(windows.activeWindow);

这是 css

//don't forget to add the .toolbarbutton-icon class at the end
#action-button--mystrippedadonid-mybuttonid .toolbarbutton-icon,{ 
    background-color: green;
}

这里有几个陷阱。

首先，从这篇文章开始，您不应该在按钮的 id 中使用大写字母，因为它们会 完全删除 - 只有小写字母和连字符是允许。
元素的 ID 与您在按钮声明中提供的 ID 不同。请参阅下文了解如何得出此标识符。
要在 url 中为样式 sheet 文件指定 content（在 loadSheet 函数调用中），您还需要在插件文件夹的根目录中创建一个 chrome.manifest，并将其放入其中： content spadmintoolbar data/ 其中 "data" 是根文件夹中实际目录的名称。我需要一个 data/ 文件夹，这样我就可以为按钮声明加载图标，但是你需要在 chrome.manifest 中声明你的虚拟目录，而 jpm init 不适合你。

如何获取 css 文件的元素 ID：

为您的按钮元素获取 id 以用于外部样式 sheet 的简单方法是测试您的插件，然后使用浏览器工具箱的检查器定位该元素，从那里您可以从输出的代码中获取 id。

不过，如果你想自己算，试试这个公式。

[button-class] = 按钮的 sdk class。操作按钮变为 action-button
[mybuttonid] = id 您在 sdk 按钮声明中提供的按钮
[myaddonname] = name 您在其 package.json 文件中提供的插件。
[strippedaddonid] = 获取你在 package.json 文件中分配插件的 id，删除任何 @ 符号或点并将其更改为全部小写。

现在把它们放在一起（不要包括方括号）：

`#[button-class]--[strippedaddonid]-[mybuttonid]]`

一个例子：action-button--myaddonsomewherecom-mybutton

是不是很简单？！

样式的功劳sheet 附加代码转到 mconley

如何将样式表添加到工具栏

How to add stylesheet to toolbar

css

firefox-addon-sdk