문서

확장 프로그램은 Chrome 120 이상과 Firefox 136 이상에서 작동합니다.

사용자 스크립트 허용

브라우저는 별도의 권한이 있어야 확장 프로그램의 JavaScript를 웹 페이지에서 실행합니다. 권한이 없으면 규칙의 스타일은 적용되지만 규칙의 JavaScript는 실행되지 않으며, 이때 팝업과 설정 페이지에 권한을 켜는 방법이 표시됩니다.

• Chrome 138 이상: 확장 프로그램 세부정보(chrome://extensions → User JavaScript and CSS → "세부정보")를 열고 "사용자 스크립트 허용"을 켜세요. 개발자 모드는 필요하지 않습니다.
• Chrome 120–137: chrome://extensions 오른쪽 위에서 "개발자 모드"를 켜세요. 사용자 스크립트를 사용하는 모든 확장 프로그램에 적용되는 Google 요구 사항입니다.
• Firefox: 팝업에서 "사용자 스크립트 권한 허용"을 클릭하고 브라우저 대화 상자에서 확인하세요. Firefox에서는 확장 프로그램에 사이트 액세스 권한이 없을 수도 있습니다. 이 경우 팝업에는 "사이트 액세스 허용"이, 설정 페이지에는 위쪽 배너에 "허용"이 표시됩니다.

규칙

이 확장 프로그램에서 규칙은 URL 패턴과 일치하는 웹 페이지에서 실행되는 JavaScript 코드, CSS 코드 또는 둘 다를 말합니다.

URL 패턴

• 패턴의 형식은 <scheme>://<host>/<path>입니다: https://site.com/*
• 여러 패턴은 쉼표로 구분합니다: https://one.com/*, https://two.com/*
• 제외 패턴은 !로 표시합니다: !https://site.com/admin/*

확장 프로그램은 모든 패턴을 브라우저의 일치 패턴 형식으로 변환하며, 팝업과 배지에는 브라우저가 규칙을 실행할 위치가 정확히 표시됩니다.

스킴이 있는 패턴은 거의 작성한 그대로 사용됩니다.

작성한 패턴	규칙이 실행되는 곳
https://site.com/*	site.com과 www.site.com, 다른 하위 도메인은 제외
https://*.site.com/*	site.com과 모든 하위 도메인
https://site.com/path	site.com과 www.site.com에서 /path로 시작하는 페이지
https://site.com	site.com과 www.site.com 전체
http*://site.com	http와 https의 site.com과 www.site.com
http://localhost:*/*	모든 포트의 localhost

스킴이 없는 패턴은 http와 https에서 해당 사이트와 그 하위 도메인을 뜻합니다.

작성한 패턴	규칙이 실행되는 곳
site.com, *site.com*, *.site.com	site.com과 모든 하위 도메인
www.site.com	www.site.com과 site.com
пример.рф	пример.рф와 그 하위 도메인
site.com/path	site.com과 그 하위 도메인에서 /path로 시작하는 페이지
localhost:3000	포트 3000의 localhost
/admin	모든 사이트에서 경로에 /admin이 포함된 페이지
*	모든 사이트

스킴이 있는 제외 패턴은 작성한 그대로 사용됩니다. https://site.com/*, !https://www.site.com/*는 site.com에서는 실행되지만 www.site.com에서는 실행되지 않습니다. 스킴이 없는 제외 패턴은 위 표를 따릅니다. !site.com/admin은 site.com과 그 하위 도메인의 /admin을 제외합니다.

Firefox의 포트. Firefox 패턴에는 포트를 지정할 수 없으므로 포트가 무시됩니다. localhost:3000은 모든 포트의 localhost에서 실행되고, 포트가 있는 제외 패턴은 해당 호스트의 모든 포트를 제외합니다. 한 포트의 모든 사이트를 가리키는 패턴(*://*:8080/*)은 모든 사이트에 대한 패턴이 되므로 Firefox에서는 빨간색으로 표시됩니다.

빨간색으로 표시되는 패턴은 브라우저가 받아들이지 않는 패턴입니다. 호스트 중간에 *가 있거나(https://shop*.site.com/*, https://site.*/*) 확장 프로그램이 실행될 수 없는 스킴(chrome-extension://, ws://)인 경우입니다. 이런 패턴은 건너뛰고 규칙의 다른 패턴은 계속 작동합니다. 제외 패턴이 거부되면 이를 고칠 때까지 규칙이 어디에서도 실행되지 않습니다. 그렇지 않으면 제외한 페이지에서 규칙이 실행되기 때문입니다.

JavaScript 속성

JavaScript 패널 머리글의 버튼:

• 격리된 환경: 스크립트가 페이지의 DOM은 볼 수 있지만 페이지의 변수와 함수는 볼 수 없습니다.
• 모든 프레임: 주소가 규칙과 일치하는 프레임에서도 스크립트가 실행됩니다. 각 프레임은 규칙 패턴과 따로 비교됩니다.
• 시작 시 실행: 스크립트가 DOM이 구성되기 전에 실행됩니다. 끄면 DOM이 구성된 뒤, 이미지나 프레임 같은 리소스가 로드되기 전에 실행됩니다. 이렇게 실행되는 스크립트에서는 DOMContentLoaded 이벤트가 발생하지 않습니다.

스타일 속성

스타일 패널 머리글의 버튼:

• Sass 전처리기: 켜면(기본값) 스타일이 Sass 또는 SCSS로 컴파일되며, 코드에 {;}가 있는지에 따라 구문이 결정됩니다. 끄면 스타일이 작성한 그대로 적용됩니다.
• 모든 속성에 !important 자동 추가: 컴파일된 스타일의 모든 속성에 !important를 추가합니다.
• 중첩 프레임에 적용: 페이지 안의 프레임에도 스타일이 적용됩니다. 기본적으로 켜져 있습니다.
• shadow DOM에 적용: 열린 shadow DOM이 있는 웹 컴포넌트 내부에도 스타일이 적용됩니다. 기본적으로 꺼져 있습니다.

스타일을 편집하거나 규칙을 켜거나 주소를 바꾸면 페이지를 새로고침하지 않아도 열린 탭에 스타일이 바로 반영됩니다.

공유 규칙

"공유 규칙"을 사용하면 규칙 사이에 의존 관계를 만들고 로드 순서를 명시적으로 정할 수 있습니다. 규칙 메뉴에서 어떤 규칙이든 "공유 규칙"으로 표시할 수 있으며, 그러면 다른 규칙의 모듈 목록에 추가됩니다. 포함된 규칙에서는 JS와 CSS 내용만 가져오고 나머지 속성은 무시합니다.

이전 버전

확장 프로그램은 최근 10번의 저장 각각의 직전 규칙 코드를 보관합니다. 규칙 메뉴의 "이전 버전"에서 볼 수 있습니다. 선택한 버전은 편집기로 불러오며, 저장해야 적용됩니다. 버전은 이 브라우저에만 보관되며 내보내기나 클라우드에는 포함되지 않습니다.

기타 기능

• 규칙이 공유 규칙이고 다른 규칙에 포함된 경우 규칙 사용 표시는 무시됩니다.
• 클라우드에 저장 표시는 규칙이 클라우드 백업에 포함된다는 뜻일 뿐입니다.
• 규칙 메뉴의 "새 규칙 템플릿으로 사용": 새 규칙이 이 규칙의 코드와 속성으로 시작합니다.

모듈

규칙에 외부 JS 및 CSS 모듈을 연결할 수 있으며, 모듈은 규칙보다 먼저 실행됩니다. https://... 링크를 지원하며, 리소스 유형은 확장 프로그램이 알아서 인식합니다.

모듈 내용은 다운로드되어 확장 프로그램 저장소에 보관됩니다. 모듈 편집 창의 "다시 다운로드"로 업데이트하거나, "라이브러리 업데이트" 설정에 따라 일정대로 업데이트됩니다. 설정 값은 수동, 매일, 매주 중에서 선택합니다. 다운로드에 실패하면 이전 버전의 모듈이 유지됩니다.

저장소

로컬 저장소

• "JSON 다운로드"는 규칙, 라이브러리, 설정을 파일로 저장합니다.
• "JSON 업로드"는 파일에 있는 규칙과 라이브러리 목록을 엽니다. "선택 항목 추가"는 선택한 항목을 기존 항목에 추가합니다. 이미 있는 규칙은 대체되며 이전 코드는 이전 버전에 남습니다. "모두 바꾸기"는 기존 규칙과 라이브러리를 파일의 규칙과 라이브러리로 바꿉니다.

브라우저 동기화

브라우저에서 동기화가 켜져 있으면 Google 또는 Firefox 계정으로 클라우드에 백업을 업로드할 수 있습니다. 이 방법은 별도의 로그인이나 설정이 필요하지 않습니다. storage.sync는 확장 프로그램의 표준 동기화 유형입니다. 백업은 수동으로 업로드하고 다운로드합니다.

용량이 100KB로 제한되므로 업로드하기 전에 백업 사본에서 외부 모듈의 내용과 생성된 모든 데이터를 제거하고 결과를 압축합니다. 그래도 공간이 부족하면 백업에 필요 없는 규칙에서 "클라우드에 저장"을 끄세요.

에이전트(MCP)

Claude Code, Codex, Gemini CLI, Cursor, VS Code, Claude Desktop 등의 AI 에이전트가 로컬 MCP 서버 user-js-css-mcp를 통해 규칙을 읽고 편집할 수 있습니다. 실험적 기능입니다.

1. 설정 페이지의 MCP 섹션을 열고 "MCP 연결 허용"을 켜세요.
2. 클라이언트를 선택하세요. 섹션에 연결 비밀 키가 미리 채워진 명령, 원클릭 설치 링크 또는 구성 블록이 표시됩니다.
3. 클라이언트를 다시 시작하세요. 클라이언트가 서버를 직접 시작하고, 섹션에 클라이언트가 연결되었다고 표시됩니다.

서버는 사용자의 컴퓨터(127.0.0.1)에서 실행되며 Node.js 18 이상 또는 Bun 1.2 이상이 필요합니다. 확장 프로그램과 서버는 모든 요청 전에 연결 비밀 키를 확인하므로 컴퓨터의 다른 프로그램은 이를 사용할 수 없습니다. 비밀 키 옆의 "교체"를 누르면 이전 비밀 키로 설정된 모든 클라이언트의 연결이 끊어집니다.

에이전트는 규칙과 라이브러리의 목록을 보고, 읽고, 검색하고, 만들고, 변경할 수 있습니다. 또한 페이지에서 실행되는 규칙을 찾고, 규칙이 작동하지 않는 이유를 확인하고, 규칙을 파일로 백업하고 복원하고, 규칙을 이전 버전으로 되돌릴 수 있습니다.