作 ▸ 2018-06-05 19:29

閲覧中のページをネガポジ反転するブックマークレット

お遊びクオリティ

↓のボタンをブックマークバーにドロップすると登録できます。コードをコピーして、適当なサイトで開発者ツールのコンソールにペーストして実行しても試せます。

画像には効かないし、グラデーションにも効かないし、疑似要素にも効かないけど……。

あと、実行後のstyle属性値がめちゃくちゃグロい。

minify前のソースコードは以下。

(function() {
	// スタイルのRGB文字列またはRGBA文字列から、RGBA値を配列で取得する関数
	var rgbaStringToRGBA = function(rgbaStr) {
		var rgba = rgbaStr.replace(/rgba?\(|\)|\s/g, '').split(',');
		if (rgba.length === 3) {
			rgba[3] = 1;
		}
		for (var i = 0; i < 4; ++i) {
			rgba[i] = Number(rgba[i]);
		}
		return rgba;
	};

	// RGBA値を反転させる関数
	var invertRGBA = function(rgba) {
		for (var i = 0; i < 3; ++i) {
			rgba[i] = 255 - rgba[i];
		}
		return rgba;
	};

	// 画面内の全要素を取得
	var elems = document.querySelectorAll('*');
	var newStyles = [];

	Array.prototype.forEach.call(elems, (elem) => {
		// 計算済みスタイルを取得
		var style = window.getComputedStyle(elem);
		var newStyle = {};
		for (var prop in style) {
			// 名前にcolorとつき、値がrgbで始まるスタイルだけ処理する
			if (prop.toLowerCase().indexOf('color') < 0) {
				continue;
			}
			var color = style[prop].toLowerCase();
			if (color.indexOf('rgb') === 0) {
				// スタイルの文字列からRGBA値を抽出
				var rgba = rgbaStringToRGBA(color);
				
				// html要素でbackgroundColorのα値がゼロだったら、不透明の白として扱う
				if (elem.tagName.toLowerCase() == 'html' && prop == 'backgroundColor' && rgba[3] == 0) {
					rgba[0] = rgba[1] = rgba[2] = 255;
					rgba[3] = 1;
				}

				// 色を反転してとっておく
				newStyle[prop] = 'rgba(' + invertRGBA(rgba).join(',') + ')';
			}
		}
		newStyles.push(newStyle);
	});

	// 反転した色を適用する (※全て色を作ってからまとめて反転しないと、親が反転したせいで子が再反転するので)
	Array.prototype.forEach.call(elems, (elem, i) => {
		var newStyle = newStyles[i];
		for (var prop in newStyle) {
			elem.style[prop] = newStyle[prop];
		}
	});
})();