[chrome 확장 기능] 브라우저의 일부분을 밝게 합니다

유튜브에서 공포 게임의 실황(감자의 제이슨 애니메이션)을 자주 볼 수 있는데 이런 게임 화면은 매우 어둡다.
그나저나 모니터가 켜지면 눈에 안 좋을 것 같고, 이어서 흰색 페이지를 열면 눈이 흔들려요.
따라서 영상 화면만 밝게 하면 전기와 눈을 절약할 수 있다(마땅하다)
그래서 유튜브 영상의 밝기를 조절하는 크롬 확장 기능을 만들었어요.
browser_아이콘을 액션으로 클릭하면 5단계에서 밝기가 조정되며, 6번 클릭하면 밝기가 회복됩니다.
그럼 해봐.
또한 다음 코드는 이 사이트의 초기 형태를 이용했다.
[구조 단순] 브라우저 동작 버튼에서 불이 나는 자체 제작 크롬 확장 기능의 제작 방법 & 샘플
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://*/*"
    ]
}

필요한 manfest.이게 제이슨이야.
특별히 눈에 띄는 일은 하지 않았다
background.js

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

여기서 확장 아이콘을 누르면 contenscripth에 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장은 Brightness 100%, 5장은 500%
공포게임 실황을 볼 때 이걸 쓰면 일일이 조정할 필요가 없어요.
감상
하고 싶은 일을 했지만 똑똑하지 못하다는 생각이 들었다.
browser_액션만 하면 단조롭게 전환할 뿐 재미가 없다
이번에는 Brightness가 팝업 페이지에서 조작할 수 있도록 하려고 합니다.
참고 자료
[구조 단순] 브라우저 동작 버튼에서 불이 나는 자체 제작 크롬 확장 기능의 제작 방법 & 샘플