localStorage funktioniert hier nicht, was ich mir fast schon dachte. Gibt es eine andere Möglichkeit, eine Variable dauerhaft zu speichern? Also so, das auch nach einem Neustart noch darauf zurückgegriffen werden kann?
Userscript und Storage
-
EffPeh -
30. Oktober 2017 um 13:22 -
Erledigt
-
-
Wat für'n Userscript meinste denn? Greasemonkey oder userChrome.js? Greasemonkey lässt z.B. das Speichern und Auslesen von Variablen über aboutconfig /prefs.js zu.
-
Ja, das war missverständlich.
Ich meine die userChrome.js. Ich benötige eine Funktion, die es erlaubt eine Variable zu speichern und wieder abzurufen.
Also so, wie man das von localStorage kennt. localStorage funktioniert aber nicht. -
Hat sich erledigt. Habe eine andere Möglichkeit der Speicherung gefunden.
-
Darf ich wissen, welche?
-
Öhm, aber sicher doch.
Ich habe mir ja hier diesen CSS-Switcher gebastelt:
https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=122197Und damit ich mich nicht nach jedem Neustart des Browsers immer wieder zu meinem aktuell genutzten Style durchswitchen muss, habe ich den so umgeschrieben, das bei jedem Switch die jeweilige ID der CSS-Datei in eine gewöhnliche Textdatei direkt in chrome gespeichert wird. Der zuletzt genutzte Style wird also bei einem Neustart wieder eingebunden.
Dazu benutze ich diese Funktion:
Code
Alles anzeigenvar writeSwitchID = function(data) { Components.utils.import("resource://gre/modules/NetUtil.jsm"); Components.utils.import( 'resource://gre/modules/FileUtils.jsm' ); let file = Services.dirsvc.get( 'UChrm' , Components.interfaces.nsIFile ); file.appendRelativePath( 'switchpref.txt' ); var ostream = FileUtils.openSafeFileOutputStream(file); var converter = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]. createInstance(Components.interfaces.nsIScriptableUnicodeConverter); converter.charset = "UTF-8"; var istream = converter.convertToInputStream(data); NetUtil.asyncCopy(istream, ostream, function(status) { if (!Components.isSuccessCode(status)) { return; } }); };
Um die gespeicherte ID beim Browserstart abzurufen, benutze ich das hier:
Code
Alles anzeigenvar readSwitchID = function() { Components.utils.import("resource://gre/modules/NetUtil.jsm"); Components.utils.import( 'resource://gre/modules/FileUtils.jsm' ); let file = Services.dirsvc.get( 'UChrm' , Components.interfaces.nsIFile ); file.appendRelativePath( 'switchpref.txt' ); if (file.exists()) { var data = ""; var fstream = Components.classes["@mozilla.org/network/file-input-stream;1"]. createInstance(Components.interfaces.nsIFileInputStream); var cstream = Components.classes["@mozilla.org/intl/converter-input-stream;1"]. createInstance(Components.interfaces.nsIConverterInputStream); fstream.init(file, -1, 0, 0); cstream.init(fstream, "UTF-8", 0, 0); let str = {}; let read = 0; do { read = cstream.readString(0xffffffff, str); data += str.value; } while (read != 0); cstream.close(); var switchID = Number(data) - 1; if( typeof( switchID ) === 'undefined' ) { switchID = -1; } return switchID; } else { return -1; } };
Mehr dazu hier bei MDN: https://developer.mozilla.org/en-US/Add-ons/…ippets/File_I_O
Die Read-Version musste ich allerdings umschreiben, weil die MDN-Version einen Syntax-Fehler produziert.Die Switch-Funktion selbst wird durch einen Button ausgelöst und schaut mittlerweile so aus:
Code
Alles anzeigentry { CustomizableUI.createWidget({ id: "fp-switch", sid: readSwitchID(), defaultArea: CustomizableUI.AREA_NAVBAR, removable: true, label: "Switch Browser Color Scheme", tooltiptext: "Switch Browser Color Scheme", onClick: function() { this.sid++; if( this.sid > countSwitch() ) { this.sid = 0; } var switchFile = switchPrefix + this.sid + '.css'; writeSwitchID( this.sid ); document.getElementById('fp-switch').setAttribute('tooltiptext', 'Color Scheme : '+ switchFile); var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"] .getService( Components.interfaces.nsIStyleSheetService ); var ios = Components.classes["@mozilla.org/network/io-service;1"] .getService( Components.interfaces.nsIIOService ); Components.utils.import( 'resource://gre/modules/FileUtils.jsm' ); let file = Services.dirsvc.get( 'UChrm' , Components.interfaces.nsIFile ); file.appendRelativePath( switchFile ); var fileURL = Services.io.getProtocolHandler( 'file' ).QueryInterface( Ci.nsIFileProtocolHandler ).getURLSpecFromFile( file ); var uri = ios.newURI( fileURL , null , null ); sss.loadAndRegisterSheet( uri , sss.AGENT_SHEET ); } }); } catch (e) { Components.utils.reportError(e); };
Am Ende meines UserScripts löse ich einmal die click()-Funktion des Buttons aus, damit das zuletzt benutzte CSS-File eingebunden wird:
-
Hallo,
doofe Frage, wofür ist sowas gedacht ? -
Es gibt keine doofen Fragen.
Mit Hilfe des CSS-Switchers kann ich zwischen verschiedenen Farbvariationen für das Styling des Browsers auswählen.
Gewöhnlich sieht eine Farbangabe so aus:Das ist okay. Geiler ist es aber, wenn man sämtliche Farbangaben (oder auch andere häufig genutzte Styles) übersichtlich per Variablen definiert.
Das schaut dann so aus:
Diese Definitionen lassen sich jetzt überall im CSS einsetzen:Der Vorteil dabei ist, das ich bei späteren Änderungswünschen nicht im gesamten CSS die Änderung vornehmen muss, sondern einfach nur die Variable ändere.
Man kann sämtliche CSS-Definitionen in eine Datei schreiben, also in die userChrome.css. Man kann allerdings sein CSS auch zwecks Überschaubarkeit auf mehrere Dateien aufteilen und dann in der Hauptdatei einbinden. Das mache ich und bei mir schaut die userChrome.css so aus:Code
Alles anzeigen/* CSS Variables */ @import url('fp-switch-0.css'); /* Ordinal Group Elements */ @import url('fp-ordinal.css'); /* WebExtensions */ @import url('fp-extensions.css'); /* Navigation */ @import url('fp-navigator-toolbox.css'); /* Tabs */ @import url('fp-tabs-toolbar.css'); /* Bookmarks */ @import url('fp-personal-toolbar.css'); /* URL Bar */ @import url('fp-nav-bar.css'); /* Sidebar */ @import url('fp-sidebar.css'); /* Statusbar */ @import url('fp-statusbar.css');
In meiner fp-switch-0.css sind also sämtliche Farbangaben als Variablen definiert. Jetzt habe ich allerdings nicht nur diese eine, sondern mehrere solcher Dateien mit Farbangaben. Jede dieser Dateien präsentiert ein Color Scheme.
Und mit Hilfe des CSS-Switchers, den ich mir gebastelt habe, kann ich nun diese Dateien dynamisch nachladen, zwischen den Farbschemen wechseln und somit die Farbgebung des Browsers nach Belieben anpassen.
War das verständlich?... -
Zitat
War das verständlich?...
öhm nicht wirklich, aber ich habe es verstaden
Danke für die gute Erklärung.