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

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 loader 才能在工具箱中使用它。 在 SDK 插件中，直接使用require。

注意：拼写有所不同：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, '');

或

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 函数调用中），还需要在插件文件夹的根目录中创建一个 chrome.manifest，并将其放入其中：content spadmintoolbar data/ 其中“data”是根文件夹中真实目录的名称。我需要一个data/ 文件夹，这样我就可以为按钮声明加载图标，但您需要在chrome.manifest 中声明您的虚拟目录，而jpm init 不适合您。

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

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

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

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

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

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

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

真的很简单不是吗？！

样式表附加代码的功劳归mconley