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

Question

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

一开始我想用一个mouseover event ，但随后我必须创建一个 mouseout 事件才能使其恢复正常，所以我认为最好的方法是使用 css

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

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

这是我到目前为止尝试过的方法(不会产生任何错误)，但我认为这只是针对内容；如果这是是正确的，那么我不确定如何绑定(bind)到元素:

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

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

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 使用自定义小部件 ID 方案和 action按钮，因此您的按钮 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, '');