Skip to content

Instantly share code, notes, and snippets.

@Cologler
Last active January 15, 2018 15:09
Show Gist options
  • Save Cologler/afa006ee29bdeed823b56cc05535a229 to your computer and use it in GitHub Desktop.
Save Cologler/afa006ee29bdeed823b56cc05535a229 to your computer and use it in GitHub Desktop.
StyleSwitcher is a easy way to change the css in greasemonkey.
// ==UserScript==
// @name StyleSwitcher
// @namespace https://github.com/cologler/
// @version 0.2.2
// @description try to take over the world!
// @author cologler
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_info
// @grant GM_unregisterMenuCommand
// @grant GM_registerMenuCommand
// ==/UserScript==
// just let type script work.
(function() { function require(){}; require("greasemonkey"); })();
class _Style {
constructor(name, css) {
this.style = GM_addStyle(css);
Object.defineProperty(this, 'name', { get: () => name });
this.disable();
}
enable() {
this.style.disabled = false;
}
disable() {
this.style.disabled = true;
}
}
class StyleSwitcher {
constructor(storeKey = 'cssstyle') {
this._csses = [];
this._enabled = null;
this._cmdId = null;
const name = GM_info.script.name_i18n[navigator.language.replace('-', '_')] || GM_info.script.name;
Object.defineProperty(this, 'name', { get: () => name })
Object.defineProperty(this, 'storeKey', { get: () => storeKey });
let style = null;
Object.defineProperty(this, 'currentStyle', {
get: () => style,
set: value => {
value.enable();
if (style !== null) {
style.disable();
}
style = value;
}
})
}
addStyle(name, css) {
this._csses.push(new _Style(name, css));
}
load() {
if (this._csses.length == 0) {
return;
}
let i = this.getIndex();
this.apply(i);
}
getIndex() {
return GM_getValue(this.storeKey, 0);
}
setIndex(value) {
GM_setValue(this.storeKey, value);
}
apply(index) {
if (this._cmdId !== null) {
GM_unregisterMenuCommand(this._cmdId);
this._cmdId = null;
}
this.currentStyle = this._csses[index % this._csses.length];
let nextStyle = this._csses[(index + 1) % this._csses.length];
if (this.currentStyle !== nextStyle) {
let self = this;
let menu = `${this.name} switch to ${nextStyle.name}`;
this._cmdId = GM_registerMenuCommand(menu, () => {
if (self._csses.length == 0) {
return;
}
let i = GM_getValue(self.storeKey, 0);
i++;
self.setIndex(i % self._csses.length);
self.apply(i);
});
}
}
}

switch css style.

let sw = new StyleSwitcher();
sw.addStyle('hide all',
`
* { display: none }
`);
sw.load();

now you can switch css on menu command.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment