【chrome拡張機能】ブラウザの一部分を明るくする

よくyoutubeでホラーゲーム実況(けそポテトのジェイソン動画)を見るが、こういう系のゲームは画面が暗い。
かといってディスプレイを明るくすると目に悪い気がするし、次に白いページを開くと目がちらつく

そこで、動画の画面だけを明るくすれば省電力と目に優しくなる(はず)

というわけでyoutubeの動画の明るさを調整するchrome拡張機能を作っていく

browser_actionとしてアイコンをクリックしたら5段階で明るさが調整される仕様で、6回にクリックしたときは明るさがもとに戻る。

それでは作っていく。

なお、以下のコードはこちらのサイトの雛形を利用しています。
【結構簡単】ブラウザアクションボタン発火の自作Chrome拡張機能の作り方＆サンプル

manifest.json

{
	"manifest_version": 2,
	"author": "",
	"homepage_url": "http://example.com",
	"name": "明るさ調整",
	"description": "動画を5段階で明るくする",
	"version": "0.1",
	"icons": {
		"32": "icon_32.png",
		"48": "icon_48.png",
		"128": "icon_128.png"
	},
	"content_scripts": [{
		"matches": ["<all_urls>"],
		"js": ["script.js"]
	}],
	"background": {
		"scripts": ["background.js"]
	},
	"browser_action": {
		"default_icon": "icon_32.png",
		"default_title": "明るくする"
	},
	"permissions": [
		"tabs",
		"background",
		"http://*/*",
		"https://*/*"
	]
}

必要なmanifest.jsonはこれになる。
とくに目立ったことをしているわけではない

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.sendMessage(tab.id, "Action");
});

ここでは拡張機能のアイコンをクリックしたらcontetn_scripthへActionを送っている

contetn_sctipt

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
	if (request == "Action") {
		brightnessChange();
	}
});

function brightnessChange() {
	if(localStorage.lev){
		localStorage.lev=Number(localStorage.lev)+1
		if(localStorage.lev>5){
			localStorage.lev=1
		}
		
	}else{
		localStorage.lev=2;
	}
	console.log(localStorage.lev);
	document.querySelector("video").style.filter="brightness("+localStorage.lev+")"
}

ローカルストレージを使って5段階でfilterのbrightness強度を調整している。

出来栄えは

1枚目はbrightness100%で5枚目は500%

ホラーゲーム実況などを見るときにはこれを使えばいちいちディベロッパーで調整しなくて済む

感想

やりたいことは出来たがなんとなくスマートさに欠ける作りになってしまった気がする。
browser_actionのみだと単調に切り替わるだけで面白みが無い
今度はbrightnessをpopupページから操作できるようにしたい。

参考

【結構簡単】ブラウザアクションボタン発火の自作Chrome拡張機能の作り方＆サンプル