darkreader README.md 한국어 해석

배코딩·2024년 10월 11일
0

note

목록 보기
144/151

Dark Reader는 웹 페이지를 분석하여 웹 서핑 중 눈의 피로를 줄이기 위한 오픈 소스 MIT 라이선스 브라우저 확장 프로그램입니다. Dark Reader는 다크 모드를 생성하며, 여러 UI를 통해 다양한 방식으로 사용자화할 수 있습니다.

질문
대부분의 질문은 도움말 페이지를 읽으면 답을 얻을 수 있습니다. 만약 도움말 페이지에서 답을 찾지 못했다면 새로운 토론을 열어주세요.

기여 방법
Dark Reader에 기여하는 방법에 대해 자세히 알고 싶다면 CONTRIBUTING.md를 읽어보세요.

사용을 위한 빌드
Dark Reader 빌드 스크립트는 자바스크립트 런타임을 필요로 하며, NodeJS 또는 Deno 중 하나를 사용할 수 있습니다. NodeJS 사용을 권장하지만, Deno는 실험적으로 지원됩니다.

NodeJS로 빌드하기
확장 프로그램을 파일에서 설치할 수 있습니다. Node.js를 설치하세요(우리는 LTS 버전 이상을 권장하지만, 버전 15 이상이면 모두 작동합니다). 소스 코드를 다운로드(또는 git에서 체크아웃)하고, 루트 폴더에서 터미널을 열어 다음 명령어를 실행하세요:

npm install
npm run build 또는 npm run build [-- flags]

이 명령어는 Chromium 기반 브라우저용 build/release/darkreader-chrome.zip 파일과 Firefox용 build/release/darkreader-firefox.xpi 파일을 생성합니다.

빌드 스크립트에 플래그를 전달하여 빌드 프로세스를 사용자화할 수 있습니다. 모든 플래그를 확인하려면 npm run build -- --help 명령어를 실행하세요.

Deno로 빌드하기

Deno라는 대체 런타임을 사용하여 Dark Reader를 빌드할 수 있습니다. deno:bootstrap 스크립트를 실행한 후(예: npm run deno:bootstrap 또는 package.json에서 명령어를 수동으로 복사하여 실행), 위에 설명된 것과 동일한 명령어를 실행하세요.

만약 "Too many open files (os error 24)" 오류가 발생하면 최신 버전의 Deno를 사용해야 합니다(소스 또는 캐너리에서 빌드한 버전 권장).

공식 Firefox 스토어 서명으로 번들링하기 (실험적)

발행 전에 확장 프로그램 스토어는 확장 프로그램에 디지털 서명을 제공합니다. 이 디지털 서명은 번들의 무결성을 인증하고(확장 프로그램이 손상되지 않았거나 비트 손실이 없음을 확인) 기본적인 확장 프로그램 검증을 수행합니다.

Dark Reader 저장소에는 이러한 디지털 서명이 포함되어 있으며, 이를 확장 프로그램 번들에 추가할 수 있습니다. 다음 명령어로 Firefox 4.9.63 버전용 Dark Reader를 빌드할 수 있습니다:

bash
코드 복사
npm run build -- --firefox --version=4.9.63

현재는 Firefox Add-ons 스토어 서명만 저장소에 있습니다. 또한 NodeJS 및 TypeScript 버전 호환성 문제로 인해 먼저 이전 커밋(리비전)을 체크아웃한 다음 확장 프로그램 파일을 빌드하고, 이후 최근 커밋을 체크아웃하여 번들을 생성해야 할 수도 있습니다(서명과 압축만 수행).

웹사이트에서 Dark Reader 사용하기

웹사이트에서 다크 모드를 활성화하려면 Dark Reader를 사용할 수 있습니다.

  • NPM에서 패키지를 설치하세요(npm install darkreader)
  • 또는 소스 코드에서 빌드하세요(npm run api)
  • 또는 unpkg나 jsDelivr 같은 CDN을 통해 스크립트를 포함하세요.

그런 다음 다음 코드를 사용하여 Dark Reader의 API를 제어할 수 있습니다:

DarkReader.enable({
    brightness: 100,
    contrast: 90,
    sepia: 10
});

DarkReader.disable();

DarkReader.auto({
    brightness: 100,
    contrast: 90,
    sepia: 10
});

DarkReader.auto(false);

const CSS = await DarkReader.exportGeneratedCSS();
const isEnabled = DarkReader.isEnabled();

...또는 ES 모듈을 사용 중이라면:

import {
    enable as enableDarkMode,
    disable as disableDarkMode,
    auto as followSystemColorScheme,
    exportGeneratedCSS as collectCSS,
    isEnabled as isDarkReaderEnabled
} from 'darkreader';

enableDarkMode({
    brightness: 100,
    contrast: 90,
    sepia: 10,
});

disableDarkMode();

followSystemColorScheme();

const CSS = await collectCSS();

const isEnabled = isDarkReaderEnabled();

Dark Reader는 window 객체에 chrome 객체를 추가합니다. 이는 코드에서 사용할 일부 기능을 대신하는 스터브로, 웹 확장 API에서 비롯된 것입니다.

사이트 수정 사항

모든 Dark Reader 사용자에 대한 사이트 수정을 자동으로 동기화하는 기능은 GitHub 팀에서 GitHub를 콘텐츠 전송 네트워크(CDN)로 사용하는 것을 허용하지 않기 때문에 비활성화되었습니다. 이러한 파일의 저장은 비용이 많이 들고, 다른 리소스에 대한 요청은 의심스러워 보일 수 있습니다. Dark Reader의 각 새 릴리스에는 새로운 변경 사항이 포함됩니다.

그러나 다음 단계를 통해 수동으로 이 기능을 활성화할 수 있습니다:

  1. Dark Reader 확장 아이콘을 클릭합니다.
  2. Dev tools 버튼(오른쪽 하단 모서리)을 클릭합니다.
  3. 고급 옵션으로 이동한 후 "새 디자인 미리보기" 버튼을 클릭합니다.
  4. 개발자 도구 창을 닫고 다시 Dark Reader 확장 아이콘을 클릭합니다.
  5. 설정 -> 고급으로 가서 "사이트 수정 동기화" 설정을 활성화합니다.

사이트 수정을 강제로 동기화하려면(해당 설정이 활성화되어 있을 때) 다음 단계를 수행하세요:

  1. Dark Reader 확장 아이콘을 클릭합니다.
  2. 설정 -> 고급 -> Dev tools로 이동합니다.
  3. 각 "편집기" 섹션에서 "변경 사항 재설정"을 클릭하고, 확인을 위해 OK를 클릭한 후 적용을 클릭합니다. 그 후 개발자 도구 창을 닫고 원하는 페이지를 새로 고칩니다.

Mozilla Firefox에서 제한된 페이지에서 Dark Reader 활성화하기

기본적으로 Dark Reader는 Mozilla에서 시행하는 보안 제한으로 인해 일부 웹사이트에서 작동하지 않습니다.

다음 지침은 이러한 제한을 비활성화하는 방법을 안내합니다.

주의해서 진행하세요. 이 방법은 자신이 무엇을 하고 있는지 모른다면 보안 위험을 초래할 수 있습니다.

진행하기 전에 의심스럽거나 악성으로 보이는 확장 프로그램이 설치되어 있지 않은지 확인하세요.

이 설정은 Dark Reader뿐만 아니라 모든 확장 프로그램에 적용됩니다.

단계 1: Dark Reader의 설정 변경

  1. Dark Reader 확장 아이콘을 클릭합니다.
  2. Dev tools 버튼(오른쪽 하단 모서리)을 클릭합니다.
  3. 고급 옵션으로 이동하여 "새 디자인 미리보기" 버튼을 클릭합니다.
  4. 개발자 도구 창을 닫고 다시 Dark Reader 확장 아이콘을 클릭합니다.
  5. 설정 -> 고급으로 가서 "제한된 페이지에서 활성화" 설정을 활성화합니다.

단계 2: Firefox의 설정 변경

  1. 주소창에 about:config를 입력하고 Enter를 누릅니다.
  2. 경고 페이지가 나타날 수 있습니다. "위험을 감수하고 계속"을 클릭하여 진행합니다.
  3. extensions.webextensions.restrictedDomains를 검색하고 비어 있는 값으로 설정합니다(프리퍼런스가 존재하지 않는 경우, 문자열 타입으로 새로 생성합니다).
  4. privacy.resistFingerprinting.block_mozAddonManager를 true로 설정합니다(프리퍼런스가 존재하지 않는 경우, 불리언 타입으로 새로 생성합니다).

필요한 설정을 모두 변경한 후 원하는 페이지를 새로 고칩니다.

이전에 다음 프리퍼런스를 변경했다면, Dark Reader가 제한된 웹사이트에서 작동하는 데 필요하지 않으므로 기본값으로 재설정해야 합니다. 재설정하려면 about:config의 프리퍼런스 라인 오른쪽 끝에 있는 재설정(또는 삭제 아이콘, 있는 경우)을 클릭하세요.

  • extensions.webextensions.addons-restricted-domains@mozilla.com.disabled
  • extensions.quarantinedDomains.enabled
  • extensions.quarantinedDomains.list

제한된 도메인에 대한 설명 ("제한이 있는 사이트에서 실행" 옵션)

제한된 도메인과 Dark Reader - 설명

일부 확장에서 제공되는 "제한이 있는 사이트에서 실행" 옵션은 제한된 도메인과 관련이 있으며, Dark Reader가 제한된 웹사이트에서 작동하는 데 필요하지 않습니다.

제한된 도메인에 대한 더 많은 정보: 일부 애드온이 Mozilla에 의해 제한된 사이트에서 허용되지 않는 이유는 무엇인가요?

Dark Reader의 경우, 이 옵션은 표시되지 않는데, 이는 Dark Reader가 Mozilla의 추천 확장 프로그램이기 때문입니다.

추천 확장 프로그램이라는 것은 "보안, 기능성 및 사용자 경험의 최고 기준을 충족한다"는 의미입니다. 제한된 도메인은 보안과 관련이 있으며, Dark Reader가 Mozilla에 의해 안전하다고 간주되므로 이 옵션은 표시되지 않으며, 제한된 도메인에서도 항상 실행됩니다.

Firefox의 소스 코드에서:

arduino
코드 복사
// 권한이 부여된 확장 프로그램 및 추천 상태의 모든 확장 프로그램은
// 제한된 도메인에서 면제됩니다.
profile
배코딩
PS, 풀스택, 앱 개발, 각종 프로젝트 내용 정리 (https://github.com/minsu-cnu)
이전 포스트

구글 OAuth 로그인 참고 자료 모음

다음 포스트

darkreader CONTRIBUTING.md 한국어 해석

0개의 댓글