익스텐션3 (익스텐션) 인기방송top10을 추적하는 chzzk-watcher를 만들다. 목차 실제 배포한 익스텐션https://chromewebstore.google.com/detail/chzzk-watcher/ipdmnoiimipnclfioflkkgcgmahabooe?authuser=0&hl=ko chzzk-watcher - Chrome 웹 스토어치지직 알림 크롬 익스텐션chromewebstore.google.com 그래서 무슨 프로그램인데?Chzzk이라는 네이버 인터넷 방송 플랫폼이 존재한다https://chzzk.naver.com/ 치지직 CHZZK지금, 스트리밍이 시작됩니다. 치지직-chzzk.naver.com인방을 이용하면서 가끔 아쉬웠던점이 있는데 그거는 내가 팔로우를 하지않은 사람이 인기방송이 되어서 재밌는 모습을 보여주는 경우가 있었던 것이다. 그것을 체크하기위해서는 .. 2026. 3. 7. (기록용) 크롬 익스텐션에서 각 무슨역할들을 할수 있을까? - 1 - (background, content, popup) 목차 익스텐션의 많은 기능들크롬 익스텐션은 우리가 아는 웹사이트와 개발이 조금 다르다. 익스텐션은 브라우저 자체에 기능을 추가하는 거다보니, 여러 상황에서 다르게 동작을해야하기 때문이다크롬 익스텐션의 주요 구성요소:├── Background # 브라우저 백그라운드에서 조용히 실행├── Content Script # 웹페이지 위에 내용을 추가├── Popup # 익스텐션 아이콘 클릭 시 나타나는 창├── Options # 설정 페이지├── Dashboard # 큰 화면에서 작업하는 페이지├── New Tab # 새 탭을 열 때 보이는 페이지└── DevTools # 개발자 도구에 추가하는 패널 Background Script (백그라운드 스크립트) 무슨 일을 하는가?**뇌**의 역할을 수행한다. .. 2026. 2. 26. (기록용)chrome 익스텐션 개발전 개발세팅하기(준비단계) 왜 익스텐션을 개발하려고 하는가?처음엔 프론트엔드 개발자로써 웹을 개발하려고 했었다. 근데 알아보던중에 익스텐션을통해서도 재밌고 다양한걸 만들어볼수 있을꺼같아서 익스텐션을 개발하는 과정들을 기록을 남기려고한다 라이브러리 선택익스텐션은 html, css, js 기반이기때문에 프론트엔드에서 접근하기는 좋았다. 하지만 바로 예제에 진입하는 코드들은 순수하게 html, css, js를 활용하기때문에 프레임워크 (vite, next)를 하는 사람으로써 일부 제약사항이 존재하였다. 그렇기에 github에서 라이브러리 서칭을 하였는데 아래와같이 star수가 무려 1천정도가 되는 보일러플레이트가 있는것을 발견하게 되었다. 그래서 해당 기반으로 개발하기로 하였다 https://github.com/JohnBra/vite.. 2026. 2. 24. 이전 1 다음
