일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- javascript
- 개발자
- 리더
- JS
- select tag
- PM
- css
- html
- 테드스페이스
- Regexp
- XFrameOptions
- 느린 서버
- 공유 오피스
- Django
- turborepo
- 구로 공유 오피스
- 2인 사무실
- Domination Game
- ai로 앱 만들기
- 좋은 리더란
- 구로 디지털 단지 사무실
- iframe
- multiprocessing
- React
- 스타트업
- python
- typescript
- select css
- 빠른 서버
- 동료리뷰
- Today
- Total
개발하는 일상
크롬 확장프로그램 만들어서 내 마음대로 웹 페이지 커스텀하기 본문
나는 왜 웹 페이지를 커스텀 해야 했을까?
나는 요즘 원티드에서 채용공고를 아주 많이 확인한다.
하지만 문제는 특히 지원하지 않기로 결정한 공고가 계속 같은 화면에 표시된다는 것이었다.
이런 공고를 반복적으로 확인하는 건 번거로웠고, 이를 해결할 방법이 필요했다.
어떤 웹 사이트를 커스텀하는데 크롬 익스텐션이 가장 좋은 선택지라고 생각한다. 특히나 데스크탑 환경이라면 더욱더.
나는 크롬 익스텐션을 통해 공고에 따로 표시를 만들기로 결정했다.
먼저 알아보는 크롬 확장프로그램의 구조
크롬 익스텐션은 다양한 파일들로 구성할 수 있지만, 그중 manifest.json은 필수로 포함되어야 한다.
나머지 popup, background, content-script 등은 필요에 따라 선택적으로 추가할 수 있다.
각 파일의 역할을 이해하면 원하는 기능을 효과적으로 구현할 수 있다.
1. manifest.json - 익스텐션의 ‘설정 파일’로, 이름, 버전, 권한, 각 파일의 역할 등을 정의한다.
2. content-script - 실제 웹 페이지의 DOM에 접근할 수 있는 파일이다. 기본 설정에서는 페이지가 로드된 후에 한 번 실행된다. 페이지 안의 요소를 숨기거나 스타일을 변경하는 등의 작업을 수행할 수 있다.
3. background - 브라우저의 이벤트에 대응하는 백그라운드 스크립트이다. 탭 이동이나 네트워크 요청 등 특정 이벤트에 반응하는 기능을 구현할 때 유용하다.
4. popup - 익스텐션 아이콘을 클릭했을 때 나타나는 사용자 인터페이스를 담당한다. 주로 간단한 설정이나 상태 표시를 위해 사용된다.
웹 페이지의 데이터에 접근하거나, 화면의 요소를 바꾸고 싶을 때 - content-script
content-script는 웹 페이지와 비슷한 환경에서 실행된다. window 객체에 접근할 수 있어서 특정 요소를 추가하거나 스타일을 변경하는 데 활용할 수 있다.
예를 들어, 내가 원티드에서 조회했던 공고를 표시하기 위해 아래와 같은 방법을 사용했다.
1. 공고 페이지를 조회할 때 데이터 저장 - content-script에서 location.pathname으로 공고 상세 페이지를 열었는지 확인하고, 그렇다면 해당 공고 ID를 저장해 두었다.
2. 목록 페이지 조회 시 데이터 불러오기 - 이후 목록 페이지를 확인할 때 저장된 데이터와 목록을 비교하여 이미 조회하거나 지원한 공고를 찾아낸다.
3. 스타일 수정 및 요소 추가 - 중복되는 공고를 찾으면, 그 공고에 맞는 스타일을 적용하고 ‘지원 완료’ 등의 표시를 위한 요소를 추가했다.
히스토리가 변경되는 걸 감지해야 할 때 - background
원티드는 SPA(Single Page Application) 형태로 동작하기 때문에, 공고 목록 페이지에서 상세 페이지로 이동할 때 content-script가 다시 실행되지 않았다.
나는 상세 페이지에서는 조회 데이터를 저장해야 했고, 목록 페이지에서는 읽은 데이터를 표시해야 했다.
때문에 history가 변하는 것을 감지해서 content-script를 실행할 필요가 있었다.
처음에는 history.pushState를 wrapping하는 방법을 시도했다.
하지만 content-script는 브라우저의 JavaScript 실행 환경과 분리되어 있기 때문에 이러한 방법은 통하지 않았다.
그래서 background 스크립트를 활용하기로 했다.
background 스크립트에서는 history API를 통해 페이지가 변화할 때마다 이를 감지할 수 있다.
이를 통해 사용자가 페이지를 이동할 때마다 content-script에 알림을 줬고, content-script에서는 각각의 페이지에 맞는 스크립트를 실행할 수 있었다.
별도의 UI를 만들어 활용하고 싶을 때 - popup
공고를 조회하거나 지원했다는 정보는 history를 tracking해서 얻을 수 있지만, 지원하지 않기로 한 결정은 history에서 추적할 수 없는 정보였다. 별도의 UI가 필요했는데, 이럴 때 popup을 활용하면 편리하다.
위의 그림2에서 읽음 표시를 웹 페이지에 직접 추가한 것처럼, content-script로 웹 페이지에 직접 UI를 바꿀 수도 있다. 용도에 따라 활용하면 좋을 것 같다.
popup은 익스텐션 아이콘을 클릭했을 때 나타나며, 사용자가 쉽게 접근할 수 있는 인터페이스를 제공한다. 이곳에서 사용자는 지원하지 않기로 한 공고를 관리하고, 추가적인 설정을 할 수 있도록 UI를 설계했다.
만든 결과물이 궁금하다면
이 링크에서 직접 설치해볼 수 있다.
'개발 간단 팁' 카테고리의 다른 글
Next의 router.push는 사실 동기가 아닐걸요? (0) | 2024.07.17 |
---|---|
github copilot 2년동안 사용한 사람의 활용 팁 (1) | 2024.03.17 |
예쁜 select 태그를 만들고 싶다면 꼭 알아야 하는 속성 tabIndex (0) | 2023.12.24 |
Typescript Function Overloading의 설명과 사용법(Function return type based on input parameter) (0) | 2022.06.22 |
history.go와 history.pushState의 실행 순서(order of history.go and history.pushState) (0) | 2022.06.21 |