Ein Beispiel eines einfachen widgets vom typ button wäre (besteht auch den Elchtest) :
Prima Vorlage! 
Wenn du eine JS freundliche ID benutzt, zB ohne Bindestriche im Namen, kannst du die übrigens in vielen (nicht allen) Fällen direkt ohne getElement... benutzen, wie sowas (plus kleine unnötige Spielerei für die Styles).
Fill etc. Properties direkt für Buttons solltest du eigentlich nicht brauchen, wenn das SVG korrekte Einträge hat, oder? 
JavaScript
// Test
(function() {
if (!window.gBrowser)
return;
const
// ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
id = 'Fedia_button', // Id des Buttons
link = 'fedia.io/m/FirefoxCSS', // Linkziel des Buttons
label = 'Quicklink: Fedia', // Bezeichnung des Buttons
tooltiptext = 'Quicklink:\nfedia.io/m/FirefoxCSS',
// Icon-------------------------------------------------------
icon = '16-Fedia_Logo.svg', // [Name.Dateiendung] des Symbols
iconPath = '/chrome/icons/', // Pfad zum Ordner der das Icon beinhaltet
// ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
}
//BUTTON
try {
CustomizableUI.createWidget({
id: id,
defaultArea: CustomizableUI.AREA_NAVBAR,
tooltiptext: tooltiptext,
label: label,
onCreated: (button) => {
let styles = {
listStyleImage: 'url("' + curProfDir + iconPath + icon + '")',
fill: 'orange',
outline: '1px solid orange',
outlineOffset: '-1px',
//minWidth: 'fit-content',
};
Object.assign(button.style, styles);
}
});
} catch(e) { }
//click
Fedia_button.addEventListener('click', () => {
if (event.button === 0) {
event.target.ownerGlobal.openTrustedLinkIn(link, "tab");
}
});
})();
