Edge용 확장 프로그램을 대충 만들었다

나는 작년에 고급 마우스를 샀다.

mx master 3 for Mac (윈도우에서 사용중)

이 마우스에는 엄지 손가락으로 누를 수 있는 버튼이 두 개 있는데, 브라우저에서는 기본적으로 '앞으로 가기', '뒤로 가기' 버튼이다. 그러니까 브라우징 중 뒤로 가고 싶을 때 창의 왼쪽 위 까지 가지 않고 이 버튼만 누르면 된다!

 

하지만 모든 문제가 사라진 것은 아니었다. 새 탭을 연다면 다시 문제가 생기게 된다.

비활성화된 뒤로가기 버튼

새 탭을 열면 탭 화면까지 가서 탭을 닫아줘야 한다. 

특히 위키질 할 때 취약했다. 죄다 새 탭으로 열리니까 아예 들어가기 싫어졌다.

Create an extension tutorial, part 1 - Microsoft Edge Development | Microsoft Learn

Create an extension tutorial, part 1 - Microsoft Edge Development

마침 확장을 만들어보고 싶기도 했고 해결 방법을 찾아보기로 했다.

내가 잘못 만든 건지는 모르겠지만 예제대로 하면 안 되더라.

 

 

 

하여튼 예제대로 만들면 manifest.json에

- action > default_popup에 상태 표시용 ui를 html로 만들어서 주면 되고,

- content_script에 매 탭에서 실행될 스크립트를 js로 만들어서 주면 된다.

 

내가 만들고 싶은 건 어느 탭에서든 뒤로가기가 불가능한 탭에서 뒤로가기 버튼을 누르면 탭이 닫히도록 하는 것이다.

 

마우스 인식은: MouseEvent: button property - Web APIs | MDN (mozilla.org)

MouseEvent: button property - Web APIs | MDN

뒤로가기 가능 판정은: Window.history - Web API | MDN (mozilla.org)

Window.history - Web API | MDN

탭 닫기는: Window: close() method - Web APIs | MDN (mozilla.org)

Window: close() method - Web APIs | MDN

 

전체 스크립트는 다음과 같다.

if (window.history.length == 1) {
    const BACK_BUTTON_CODE = 8
    var recordedButtons = 0

    document.addEventListener('mousedown', (e) => {
        recordedButtons = e.buttons
    });
    document.addEventListener('mouseup', (e) => {
        if ((recordedButtons - e.buttons) == BACK_BUTTON_CODE) {
            window.close()
        }
        recordedButtons = e.buttons
    });
}

작동한다.

 

 

 

그리고 이렇게만 만들어 놓으면 ui에서 보여줄 게 없으니 ui단에도 뭔가 기능을 만들기로 했다.

 

https://gall.dcinside.com/rome/1072209

https://gall.dcinside.com/board/view/?id=rome&no=1072209

버튼을 누르면 생활수준이 올라가는 게임.

버튼을 누르면.

 

 

창을 닫아도 숫자가 유지되게 하려면: chrome.storage - Chrome Developers

chrome.storage - Chrome Developers

 

전체 코드는 다음과 같다.

const title = document.querySelector('#number');
const button = document.querySelector('#button');
chrome.storage.local.get(["num"]).then((result) => {
    title.innerHTML = result.num ?? 0
})
if (button) {
    button.addEventListener('click', () => {
        var num = parseInt(title.innerHTML);
        title.innerHTML = num + 1;
        chrome.storage.local.set({num: title.innerHTML})
    });
}

https://stackoverflow.com/q/2315863/16089754

Does onbeforeunload event trigger for popup.html in a google chrome extension?

스토리지 저장을 ui 닫힐 때 한번만 해야 되지 않나 했는데

오버헤드가 거의 없는 것 같아서 대충 매 클릭마다 저장하게 했다.

 

 

chrome-types - npm (npmjs.com)

chrome-types

이 라이브러리를 사용하면 타입 예측도 해준다. 타입스크립트 만세.

 

 

 

소스를 굳이 보고 싶다면: hyuckkim/edge-extension (github.com)

GitHub - hyuckkim/edge-extension

 

 

 

 

끝.