브라우저 확장 - 첫 번째 테마

이전 기사에서는 our very first browser extension 생성에 대해 살펴보았습니다.

이 기사에서는 첫 번째 테마를 확장으로 만드는 방법을 살펴볼 것입니다!

프로세스는 매우 유사하지만 더 쉬울 것입니다.

구조

언급했듯이 테마의 구조는 더 쉽습니다.manifest.json를 사용하고 일부 이미지를 추가할 수 있습니다.

새 폴더를 만들어 시작합니다.

mkdir theme-extension && cd theme-extension

그런 다음 계속해서 manifest.json 파일을 추가할 수 있습니다.

내 매니페스트의 전체 버전을 붙여넣은 다음 각 옵션에 대해 자세히 설명하겠습니다.

{
  "manifest_version": 3,
  "version": "2.6",
  "name": "daily dev tips theme",
  "theme": {
    "images": {
      "theme_frame": "images/frame-background.png",
      "theme_frame_overlay": "images/frame-background.png",
      "theme_tab_background": "images/tab-background.png",
      "theme_ntp_background" : "images/ntp-background.png"
    },
    "colors" : {
      "toolbar" : [0, 185, 232],
      "tab_background_text": [255, 255, 255],
      "tab_text": [255, 255, 255],
      "bookmark_text": [255,255,255],
      "ntp_text" : [218, 0, 96],
      "ntp_link" : [218, 0, 96],
      "ntp_section" : [255, 255, 255],
      "ntp_background": [255, 255, 255]
    },
    "tints" : {
      "buttons" : [1, 1, 1]
    },
    "properties" : {
      "ntp_logo_alternate": 0,
      "ntp_background_alignment" : "center"
    }
  }
}

자, 계속해서 각 옵션을 분석해 보겠습니다.
먼저 색상 옵션이 RGB 형식이라는 점에 유의하는 것이 좋습니다.

사람들이 각 옵션이 어떤 영향을 미치는지 시각화할 수 있도록 이 색상 참조 이미지를 추가했습니다.



이미지:

theme_frame : 외부 프레임의 색상을 설정할 수 없지만 1x1 픽셀 이미지를 선택할 수 있습니다.

theme_frame_overlay : 왼쪽 상단 모서리입니다. 나는 프레임과 동일하게 갔다.

theme_tab_background : 비활성 탭을 나타냅니다. 다시 말하지만 이미지를 사용하여 색상을 지정해야 합니다.

theme_ntp_background : 화면의 실제 중앙 비트입니다.

그림 물감:

toolbar : 새 탭(왼쪽 하단)의 책갈피 요소 색상

tab_background_text : 배경 탭의 텍스트 색상

tab_text : 활성 탭의 색상

bookmark_text : 책갈피 항목의 색상

ntp_text : 중앙 프레임 텍스트 색상

ntp_link : 중앙 프레임 내부 링크 색상

ntp_section : 중앙 섹션의 빠른 링크 색상

ntp_background : 새 탭 페이지의 배경

색조:

buttons : 도구 모음 내부 아이콘의 색조 색상(뒤로, 새로 고침 등)

속성:

ntp_logo_alternate : 표시할 로고, 0은 화려한 Google 로고, 1은 흰색 Google 로고

ntp_background_alignment : NTP 이미지를 추가한 경우 위치를 조정할 수 있습니다

.

더 많은 작은 요소의 스타일을 지정할 수 있으며 다음GitHub repo이 매우 유용하다는 것을 알았습니다.

확장 테스트

확장 기능을 테스트하지 않고 상점에 게시하고 싶지 않으므로 로컬에서 시도하는 데 무엇이 필요한지 살펴보겠습니다.

더 빠른 인터페이스를 제공하는 Chrome을 선호합니다.

Chrome에서 플러그인 버튼을 클릭하고 해당 페이지를 엽니다.



다음으로 개발자 모드를 켭니다. 압축을 푼 확장 프로그램을 로드하는 옵션이 있는 다른 메뉴가 나타납니다.

압축을 푼 로드를 클릭하고 theme-extension 폴더로 이동합니다.

Chrome에서 테마가 활성화되었음을 알리고 색상이 적용된 것을 즉시 확인할 수 있습니다.

내 daily dev tips theme to GitHub도 추가했습니다. Chrome에서 개발자 모드를 통해 다운로드하여 설치할 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나