<div id="readability-page-1" class="page"><div role="banner"> <div>  <h4>21 May 2025</h4> <p> <i></i> Reading time ~2 minutes </p> </div> <h2 id="간단-토글-크롬-확장-프로그램"><a href="https://github.com/lahuman/chrome-extensions-example">간단 토글 크롬 확장 프로그램</a></h2> <h2 id="설치-및-시연-영상">설치 및 시연 영상</h2> <iframe width="560" height="315" src="https://www.youtube.com/embed/NT-xJ17T7y0" frameborder="0" allowfullscreen=""></iframe> <blockquote> <p>이 확장 프로그램은 특정 웹사이트(<code>https://lahuman.github.io/</code>)에서만 활성화되며, 사용자가 상태를 켜고 끌 수 있는 간단한 기능을 제공합니다. 확장 프로그램이 켜져 있을 때는 해당 웹사이트에서 10초마다 특정 버튼을 클릭하고, 현재 페이지에 상태 표시와 카운트다운을 보여줍니다.</p> </blockquote> <h2 id="소스코드-바로가기"><a href="https://github.com/lahuman/chrome-extensions-example">소스코드 바로가기</a></h2> <h2 id="기능">기능</h2> <ul> <li> <p><strong>상태 토글:</strong> 확장 프로그램 아이콘 클릭 시 나타나는 팝업에서 상태를 ‘켜짐’ 또는 ‘꺼짐’으로 변경할 수 있습니다.</p> </li> <li> <p><strong>특정 사이트에서만 활성화:</strong> <code>https://lahuman.github.io/</code> 도메인 및 하위 경로에서만 확장 프로그램이 기능합니다. 다른 사이트에서는 기능이 비활성화됩니다.</p> </li> <li> <p><strong>아이콘 변화:</strong> 허용된 사이트와 그 외 사이트에서 확장 프로그램 아이콘이 다르게 표시됩니다.</p> </li> <li> <p><strong>팝업에 현재 URL 표시:</strong> 허용된 사이트에서 확장 프로그램이 켜져 있을 때, 팝업에 현재 페이지의 전체 주소를 표시합니다.</p> </li> <li> <p><strong>자동 버튼 클릭 (허용된 사이트, 켜짐 상태 시):</strong> <code>https://lahuman.github.io/</code> 사이트에서 확장 프로그램이 ‘켜짐’ 상태일 때, 10초마다 미리 정의된 특정 버튼을 자동으로 클릭합니다.</p> </li> <li> <p><strong>페이지 내 상태 표시 및 카운트다운:</strong> 확장 프로그램이 ‘켜짐’ 상태일 때, 현재 보고 있는 웹 페이지의 우측 하단에 상태 표시(“확장 프로그램 켜짐 (X초)”)와 다음 클릭까지 남은 카운트다운을 보여줍니다.</p> </li> <li> <p><strong>카운트다운 초기화:</strong> 자동 클릭이 발생하거나, 수동으로 특정 버튼이 클릭될 때 카운트다운이 10초부터 다시 시작됩니다.</p> </li> <li> <p><strong>상태 유지:</strong> 확장 프로그램의 켜짐/꺼짐 상태는 브라우저를 닫았다 열어도 유지됩니다.</p> </li> <li> <p><strong>사이트 이탈 시 자동 꺼짐:</strong> <code>https://lahuman.github.io/</code> 사이트를 벗어나 다른 페이지로 이동하거나 탭을 닫으면 해당 탭의 확장 프로그램 상태가 자동으로 ‘꺼짐’으로 변경되고 자동 클릭 및 카운트다운이 중지됩니다.</p> </li> </ul> <h2 id="설치-방법-개발자-모드">설치 방법 (개발자 모드)</h2> <ol> <li> <p>이 프로젝트의 모든 파일 (<code>manifest.json</code>, <code>popup.html</code>, <code>popup.css</code>, <code>popup.js</code>, <code>content.js</code>, <code>background.js</code>, <code>constants.js</code> 및 <code>icons</code> 폴더 내 이미지 파일)을 하나의 폴더에 다운로드합니다.</p> </li> <li> <p>크롬 브라우저를 엽니다.</p> </li> <li> <p>주소창에 <code>chrome://extensions</code>를 입력하고 이동합니다.</p> </li> <li> <p>페이지 우측 상단의 <strong>‘개발자 모드’</strong> 토글 스위치를 M니다.</p> </li> <li> <p>좌측 상단에 나타나는 <strong>‘압축 해제된 확장 프로그램을 로드합니다.’</strong> 버튼을 클릭합니다.</p> </li> <li> <p>파일 탐색기에서 1단계에서 다운로드한 폴더를 선택합니다.</p> </li> <li> <p>확장 프로그램이 성공적으로 로드되면 목록에 나타납니다.</p> </li> </ol> <h2 id="사용-방법">사용 방법</h2> <ol> <li> <p><code>https://lahuman.github.io/</code> 사이트로 이동합니다. 확장 프로그램 아이콘이 활성화된 아이콘으로 변경될 것입니다.</p> </li> <li> <p>확장 프로그램 아이콘을 클릭하여 팝업을 엽니다.</p> </li> <li> <p>팝업에서 ‘상태 변경’ 버튼을 클릭하여 확장 프로그램 상태를 ‘켜짐’으로 변경합니다.</p> </li> <li> <p>상태가 ‘켜짐’으로 바뀌면 웹 페이지 우측 하단에 상태 표시와 카운트다운이 나타나고, 10초마다 특정 버튼이 자동으로 클릭됩니다. 팝업에도 현재 페이지 주소가 표시됩니다.</p> </li> <li> <p>상태를 ‘꺼짐’으로 변경하거나 다른 사이트로 이동하면 자동 클릭과 페이지 내 표시가 중지됩니다.</p> </li> </ol> <h2 id="파일-구조">파일 구조</h2> <div><pre><code>/ (확장 프로그램 루트 폴더)
├── manifest.json
├── popup.html
├── popup.css
├── popup.js
├── content.js
├── background.js
├── constants.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    ├── icon128.png
    ├── icon16-inactive.png
    └── icon48-inactive.png
</code></pre></div> <h2 id="설정">설정</h2> <ul> <li> <p><code>constants.js</code>: 확장 프로그램이 활성화될 웹사이트 주소(<code>ALLOWED_URL</code>)를 설정할 수 있습니다.</p> </li> <li> <p><code>content.js</code>: 자동 클릭할 버튼의 CSS 선택자(<code>BUTTON_SELECTOR</code>)를 수정해야 합니다.</p> </li> </ul> <h2 id="라이선스">라이선스</h2> <p>이 프로젝트는 별도의 라이선스 명시가 없는 경우 표준 MIT 라이선스를 따릅니다. (필요시 라이선스 정보를 추가하세요.)</p> <p><strong>참고:</strong> <code>content.js</code> 파일의 <code>BUTTON_SELECTOR</code> 상수는 <code>https://lahuman.github.io/</code> 사이트 내에서 실제로 클릭하려는 버튼의 정확한 CSS 선택자로 <strong>반드시 수정</strong>해야 합니다.</p>  </div></div>

lahuman

Daniel Lim

간단 토글 크롬 확장 프로그램
설치 및 시연 영상
  
이 확장 프로그램은 특정 웹사이트(https://lahuman.github.io/)에서만 활성화되며, 사용자가 상태를 켜고 끌 수 있는 간단한 기능을 제공합니다. 확장 프로그램이 켜져 있을 때는 해당 웹사이트에서 10초마다 특정 버튼을 클릭하고, 현재 페이지에 상태 표시와 카운트다운을 보여줍니다.
소스코드 바로가기
기능
상태 토글: 확장 프로그램 아이콘 클릭 시 나타나는 팝업에서 상태를 ‘켜짐’ 또는 ‘꺼짐’으로 변경할 수 있습니다.
특정 사이트에서만 활성화: https://lahuman.github.io/ 도메인 및 하위 경로에서만 확장 프로그램이 기능합니다. 다른 사이트에서는 기능이 비활성화됩니다.
아이콘 변화: 허용된 사이트와 그 외 사이트에서 확장 프로그램 아이콘이 다르게 표시됩니다.
팝업에 현재 URL 표시: 허용된 사이트에서 확장 프로그램이 켜져 있을 때, 팝업에 현재 페이지의 전체 주소를 표시합니다.
자동 버튼 클릭 (허용된 사이트, 켜짐 상태 시): https://lahuman.github.io/ 사이트에서 확장 프로그램이 ‘켜짐’ 상태일 때, 10초마다 미리 정의된 특정 버튼을 자동으로 클릭합니다.
페이지 내 상태 표시 및 카운트다운: 확장 프로그램이 ‘켜짐’ 상태일 때, 현재 보고 있는 웹 페이지의 우측 하단에 상태 표시(“확장 프로그램 켜짐 (X초)”)와 다음 클릭까지 남은 카운트다운을 보여줍니다.
카운트다운 초기화: 자동 클릭이 발생하거나, 수동으로 특정 버튼이 클릭될 때 카운트다운이 10초부터 다시 시작됩니다.
상태 유지: 확장 프로그램의 켜짐/꺼짐 상태는 브라우저를 닫았다 열어도 유지됩니다.
사이트 이탈 시 자동 꺼짐: https://lahuman.github.io/ 사이트를 벗어나 다른 페이지로 이동하거나 탭을 닫으면 해당 탭의 확장 프로그램 상태가 자동으로 ‘꺼짐’으로 변경되고 자동 클릭 및 카운트다운이 중지됩니다.
설치 방법 (개발자 모드)
이 프로젝트의 모든 파일 (manifest.json, popup.html, popup.css, popup.js, content.js, background.js, constants.js 및 icons 폴더 내 이미지 파일)을 하나의 폴더에 다운로드합니다.
크롬 브라우저를 엽니다.
주소창에 chrome://extensions를 입력하고 이동합니다.
페이지 우측 상단의 ‘개발자 모드’ 토글 스위치를 M니다.
좌측 상단에 나타나는 ‘압축 해제된 확장 프로그램을 로드합니다.’ 버튼을 클릭합니다.
파일 탐색기에서 1단계에서 다운로드한 폴더를 선택합니다.
확장 프로그램이 성공적으로 로드되면 목록에 나타납니다.
사용 방법
https://lahuman.github.io/ 사이트로 이동합니다. 확장 프로그램 아이콘이 활성화된 아이콘으로 변경될 것입니다.
확장 프로그램 아이콘을 클릭하여 팝업을 엽니다.
팝업에서 ‘상태 변경’ 버튼을 클릭하여 확장 프로그램 상태를 ‘켜짐’으로 변경합니다.
상태가 ‘켜짐’으로 바뀌면 웹 페이지 우측 하단에 상태 표시와 카운트다운이 나타나고, 10초마다 특정 버튼이 자동으로 클릭됩니다. 팝업에도 현재 페이지 주소가 표시됩니다.
상태를 ‘꺼짐’으로 변경하거나 다른 사이트로 이동하면 자동 클릭과 페이지 내 표시가 중지됩니다.
파일 구조
/ (확장 프로그램 루트 폴더)
├── manifest.json
├── popup.html
├── popup.css
├── popup.js
├── content.js
├── background.js
├── constants.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    ├── icon128.png
    ├── icon16-inactive.png
    └── icon48-inactive.png
설정
constants.js: 확장 프로그램이 활성화될 웹사이트 주소(ALLOWED_URL)를 설정할 수 있습니다.
content.js: 자동 클릭할 버튼의 CSS 선택자(BUTTON_SELECTOR)를 수정해야 합니다.
라이선스
이 프로젝트는 별도의 라이선스 명시가 없는 경우 표준 MIT 라이선스를 따릅니다. (필요시 라이선스 정보를 추가하세요.)
참고: content.js 파일의 BUTTON_SELECTOR 상수는 https://lahuman.github.io/ 사이트 내에서 실제로 클릭하려는 버튼의 정확한 CSS 선택자로 반드시 수정해야 합니다.

Chrome Extentions 개발기

댓글