chrome extension

[chrome extension] css 적용방법

chrome extension를 통해서 특정 사이트에 강제적으로 css를 적용하는 방법이다. 예를 들어 https://naver.com를 접속하면 배경색을 노란색으로 바꿔보자. 배경색 뿐만 아니라 다른 css 적용도 가능하다. 여기서는 간단한 예제로 사용법만 알려주는 것이 목적이므로 배경색만 바꾼다. chrome extension에서 특정 사이트에 css를 적용하는 방법은 다양하게 있는데 어떻게 적용할 지 알아보자. 1. manifest.json에서 정적으로 적용 특정 사이트에 설정파일로 적용하는 방법이다. manifest.json 파일에 적용할 css(css)와 사이트(matches)를 지정하면 된다. { "manifest_version": 3, "background": { "service_worker..

2024. 4. 1. 08:49

chrome extension

chrome-extension-cli 소개

chrome extension을 개발할 때 npm 모듈을 가져다가 쓸 일이 있다. 직접 webpack을 세팅해서 사용하면 되지만 쉽지만은 않다. 그래서 npm 모듈을 좀 더 쉽게 사용할 수 있는 chrome-extension-cli가 있어서 정리한다. 설치 우선 chrome-extension-cli를 설치한다. npm install -g chrome-extension-cli 프로젝트 생성 아래 방법대로 샘플 프로젝트를 생성한다. 예) chrome extension-cli chrome-extension-cli sample-project 생성이 완료되면 아래와 같은 메시지가 표시된다. npm run build Bundles the app into static files for Chrome store. npm..

2024. 3. 19. 10:09

chrome extension

chrome extension 메시지 통신 방법

chrome extension 개발 시 popup, contentScript, background 간에 메시지를 전송하는 일이 많다. 매번 작업할 때마다 찾아보기 귀찮아서 정리를 하게 되었다. 1. popup --> contentScript 메시지 전송 popup에 버튼을 하나 만들고 클릭 시 contentScript로 메시지를 전송하게 만들자. 보낼때는 현재 탭(tab.id)으로 메시지를 보내야 한다. [popup.html] popup 메시지 [popup.js] document.getElementById('btnMessage').addEventListener('click', () => { chrome.tabs.query({ active: true, currentWindow:..

2023. 4. 28. 11:30