Question

使用Firefox Addon SDK，我创建了一个包含多个按钮的工具栏，我想为按钮创建鼠标悬停效果。

起初我想使用mouseover event，但是我必须创建一个mouseout事件才能恢复正常，所以我认为最好的方法是使用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

在浏览器工具箱中测试过：

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。

NB ：拼写有所不同：self.data.url vs { uri }

请参阅self/data documentation。

NB2 ：SDK使用toggle和action按钮的自定义窗口小部件ID方案，因此您的按钮ID可能与预期不符：

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

OR

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

Answer 2

使用此代码，您应该可以使用鼠标悬停或悬停来改变它的外观。

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

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中指定content（在loadSheet函数调用中），还需要在addon文件夹的根目录中创建chrome.manifest ，并把它放在其中：content spadmintoolbar data/其中＆＃34;数据＆＃34;是根文件夹中的真实目录的名称。我需要一个data/文件夹，因此我可以为按钮声明加载图标，但是您需要在chrome.manifest中声明您的虚拟目录jpm init不适合您。

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

获取按钮元素的id以便在外部样式表中使用的简单方法是测试您的插件，然后使用浏览器工具箱的检查器找到元素，从那里你可以从输出的代码中获取id。

但是，如果您想自己计算，请尝试使用此公式。

[button-class] =按钮的sdk类。操作按钮变为action-button
[mybuttonid] =您在sdk按钮声明中给出了按钮id
[myaddonname] =您在name文件中添加了package.json个插件。
[strippedaddonid] =在id文件中获取您分配了插件的package.json，并删除所有@符号或点，并将其全部更改为小写。

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

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

示例：action-button--myaddonsomewherecom-mybutton

真的很简单吗？

样式表附加代码的信用额转到mconley

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

3 个答案: