네이버 웹툰 북마크 - Typescript + background 적용

 

사실..background는 그냥 JS로쓰는게 맞지않을까한다 

 

굳이..? 하는 생각도 많이들기도하고 

 

1인개발에서 고작 몇줄적자고 (많아야 2~30줄일듯한데 ..)

 

TS적용하는 것은 좀 아니긴하지만 

 

그래도 야매로 적용하는 방법이 있으니 소개해보려한다 

 

 

Background + Typescript 세팅

먼저 type부터 설치해주자 

https://www.npmjs.com/package/@types/chrome

@types/chrome

npm i @types/chrome

 

이러면 chrome으로 시작되는 함수들을 오류없이 쓸수있다 

 

그다음으로는 src폴더에다 Background폴더를 만들고 background.ts를 만들어주자 

 

내용은.. 대충 history가 업데이트 되면 해당 탭으로 message를 날려버리는 기능을 만들어보자 

 

export default function background() {}
chrome.webNavigation.onHistoryStateUpdated.addListener(async (details) => {
    chrome.tabs.sendMessage(details.tabId, { message: 'test', detail: details });
});

이런식으로 빈 모듈을 내보내버리고 밑에다 냅다 자바스크립트를 적어버린다 ..

 

이러면 오류없이 build도 되긴하는데 이러면 그냥 js쓰는게 나아보이기도하는데 .. 뭐 .. 그건 사용자의 마음이다 

 

그리고 항상하던것처럼 역시 manifest에 "나 백그라운드쓴다.." 를 할건데 

 

여기서 또 권한도 필요하니 "tab이랑 webNavigation도 쓴다.." 라고 말해주자 

 

완성된 manifest.json는 아래와 같다 

{
    "manifest_version": 3,
    "name": "CRXJS React Vite Example",
    "version": "1.0.0",
    "action": { "default_popup": "index.html" },
    "permissions": ["webNavigation", "tabs"],
    "content_scripts": [
        {
            "js": ["src/Content/Content.tsx"],
            "matches": ["https://*/*"],
            "run_at": "document_idle"
        }
    ],
    "background": {
        "service_worker": "src/Background/background.ts"
    }
}

 

이러고 npm run dev나 build로 dist폴더를 만들어 익스텐션을 등록하여 실행해보면 .. 

 

 

요런식으로 페이지를 이동할때마다 내용을 찍어준다 

 

detail에는 tabId, 시간, url등등 여러가지가 찍히니 잘 활용해서 써먹어보자