Themebeta로 크롬 테마를 만들었습니다.

Figma로 배경 이미지를 만들고 Themebeta를 사용하여 크롬 테마를 만들려고했습니다.

다크 모드를 좋아해서 사용하고 있었습니다만, 북마크 바 상당히 보이기 어렵기 때문에,
다른 테마를 찾았지만 제대로 오지 않고 만들었습니다 ^^

사용한 것

Themebeta

Figma

Themebeta란?

ThemeBeta - Google Chrome Themes and Theme Creator, Windows Themes and Theme Creator online
여기입니다.

ThemeBeta.com is a web site for Theme Designers to create and share Chrome Themes online.
ThemeBeta.com은 테마 디자이너가 Chrome 테마를 온라인으로 만들고 공유하는 웹 사이트입니다.

아주 쉽게 크롬 테마를 만들 수 있습니다 ~ ◎ ^ 0 ^ ◎

만드는 법

ThemeBeta.com으로 이동하면 THEME CREATOR를 클릭하십시오. 작성 화면으로 이동합니다.

"1. Upload an Image"를 클릭하여 원하는 이미지를 업로드합니다.
화면의 크기에 맞게 배경 이미지를 만들거나 어딘가에서 다운로드하면 좋을 것 같습니다.

화면 미리보기의 "Background Image"로 깜박이고 배경 이미지의 기호를 지정하십시오.

다음은 컬러 설정입니다.
"2. Generate Colors"를 누르면 배경 이미지를 만나는 색상을 자동으로 설정하여 사용자 정의하고 싶은 부분만 탭의 "Images""Colors"에서 설정할 수 있습니다.
모두 스스로 설정하고 싶으니까 이미지를 설정하고 그대로 "Images""Colors"탭에서 설정하면 좋다고 생각합니다 ^^.

3. Pack and Install 저장합니다.

설정 방법

Google 크롬 설정 화면으로 이동확장 기능 설정으로 이동합니다.
거기에 다운로드한 테마 파일을 드래그 앤 드롭합니다.

이것으로 설정이 완료됩니다! 🎉

Google 계정별로 테마가 변경되므로,
자신은, 하나는 자작의 테마, 다른 하나는 Daily 2.0 - Source for Busy Developers라는 확장 기능을 사용하기도 합니다^^

여담

작성한 테마 파일의 내용

/images

manifest.json

images에는 배경 이미지에 사용한 이미지나, toolbar용의 단색의 이미지가 몇개인가 있어,
다른 모든 설정은 manifest.json에 기록되어 있습니다. chrome extentions에서도 필수가 되는 파일입니다.

manifest.json의 설정 항목 목록은 여기입니다.

이러한 설정을 자동으로 해주는 것이 Themebeta 같네요!
그래서 처음부터 스스로 만드는 것도 가능할 것 같습니다 ^^

배경 이미지 정보

먼저 원본 이미지를 만들었습니다

　
검색창 상단의 'Google' 문자와 엉망이 되지 않도록 문자가 45° 기울어져 있습니다.

이미지를 나란히하고 배경처럼 보입니다.

구글 로고 및 검색 창 근처를 더 쉽게 볼 수 있도록 배경 추가 🍫

　

참고:
Google Chrome 테마를 만들어보세요! - Qiita