Membuat sendiri Theme Chrome

Tool yang dibutuhkan:

• crxtheme-v1.0 - "compiler" untuk file *.crx (theme chrome). Download: Here
• program editing gambar yang punya fasilitas crop, resize, convert (aku pake photoshop, tapi buat crop pake program lain, masih belum terlalu ngerti photoshop sih)
• Wallpaper/gambar yang ingin dijadikan theme, harus dalam format *.png, ukuran sesuaikan dengan resolusi layar biar ukurannya pas pada kondisi fullscreen, jangan pake gambar yang resolusinya melebihi layar

karena inti dari pembuatan theme ini adalah program crxtheme-v1.0, aku jelasin dulu tentang program ini

Color, menampilkan warna pada bagian yang dipilih

·         frame, area di belakang tabs sama border (border ga bakal keliatan kalau fullscreen), mengisi bagian yang ga ketutup frame di Image

·         frame_inactive, area di belakang tabs sama border dalam keadaan tidak aktif

·         frame_incognito, area di belakang tabs sama border mode incognito

·         frame_incognito_inactive, area di belakang tabs sama border mode incognito dalam keadaan tidak aktif

·         toolbar, area tab aktif dan toolbar di bawahnya

·         tab_text, teks di tab yang lagi aktif

·         tab_background_text, teks di toolbar yang ga lagi aktif

·         bookmark_text, teks di bookmark, termasuk teks di bar download yang muncul di bagian bawah waktu download

·         ntp_background, area putih pada saat masuk ke new tab, yang ada "most visited" sama "recently closed"

·         ntp_text, teks yang muncul di new tab

·         ntp_link, teks link yang muncul di new tab

·         ntp_link_underline, teks link underlined yang muncul di new tab

·         ntp_header, frame bagian "most visited" yang muncul waktu di roll over

·         ntp_section, border bagian "most visited" yang muncul waktu di roll over

·         ntp_section_text, teks yang ada di bagian "recently closed"

·         ntp_section_link, teks link yang ada di bagian "recently closed"

·         ntp_section_link_underline, teks link underlined yang ada di bagian "recently closed"

·         control_background, tombol minimize, maximize, close, sama new tab

·         button_background, background tombol di toolbar (ga keliatan pengaruhnya)

Image, menampilkan gambar pada bagian yang dipilih

·         frame, area di belakang tabs, area yang ga ketutup diisi sama frame di Color (berlaku untuk semua bagian "frame"), kalau bagian ini ga diisi yang bakal muncul adalah warna biru default chrome (frame di Color ga akan ambil alih)

·         frame_inactive, area di belakang tabs dalam keadaan tidak aktif

·         frame_incognito, area di belakang tabs mode incognito

·         frame_incognito_inactive, area di belakang tabs mode incognito dalam keadaan tidak aktif

·         toolbar, background tab aktif dan toolbar di bawahnya

·         tab_background, background tab yang ga aktif

·         tab_background_incognito, background tab yang ga aktif mode incognito

·         tab_background_v, fungsinya masih belum ketauan 

·         ntp_background, area putih pada saat masuk ke new tab, yang ada "most visited" sama "recently closed"

·         frame_overlay, area kecil di sudut kiri atas, sebelah kiri tab paling kiri (ga keliatan pengaruhnya)

·         frame_overlay_inactive, area kecil di sudut kiri atas, sebelah kiri tab paling kiri dalam keadaan tidak aktif (ga keliatan pengaruhnya)

·         button_background, background tombol" di toolbar (ga keliatan pengaruhnya)

·         ntp_attribution, space kecil untuk diisi tulisan "Theme created by" (tapi disini ga akan dipake)

·         window_control_background, background tombol minimize, maximize, close, sama new tab (kalau ga diisi di ambil alih control background di Color)

Tint, memberikan color tint pada bagian" dibawah. ga usah di ubah juga ga apa" (aku ga ngerti cara settingnya makanya ga di ubah, lagipula udah ada nilai defaultnya )

·         buttons

·         frame

·         frame_inactive

·         frame_incognito

·         frame_incognito_inactive

·         background_tab

UI Property, pengaturan tambahan ntp_background

·         ntp_background_alignment, pengaturan alignment

·         ntp_background_repeat, pengaturan pengulangan gambar kalau gambarnya ga memenuhi area (x axis, y axis)

·         ntp_logo_alternate, logo google chrome (0 untuk berwarna, 1 untuk hitam-putih)

Yuk tutorial dimulai 

·         gambar yang udah di sediain crop bagian atasnya dengan ukuran height/tinggi: 120 px dan weight/lebar: max px (disesuaikan, kalau ukuran gambarnya 1280 masukin 1280, kalau 800 masukin 800, dst...), save as

·         crop bagian bawah dengan ukuran height: (max px-120)+34 weight: max px, rumus height yang itu tested buat yang 1280px, pada dasarnya buat ngepasin gambar yang ada di area putih (ntp_background) sama bookmark (toolbar) biar nyambung. untuk yang selain 1280 bisa dicoba juga rumus itu tapi kalau hasil jadinya ga ngepas berarti harus crop ulang gambar bawahnya (pixelnya ditambah atau dikurangi biar ngepas) setelah semuanya selesai, jadi kerja 2x. maaf banget soalnya aku cuma ngetes 1280 , kalau udah di crop, save as

·         sekarang jalanin crxtheme nya

1.    nama theme (terserah)

2.    versi (terserah)

3.    bagian color:
frame
frame_inactive
frame_incogito
frame_incognito_inactive
button_background
diubah sesuai warna gambar, untuk frame cuma buat di ambil fungsi bordernya, kalau framenya sendiri pasti ketutupan sama gambar

4.    bagian image:
frame
frame_inactive
frame_incogito
frame_incognito_inactive
toolbar
tab_background
tab_background_incognito
diisi sama hasil crop gambar bagian atas
ntp_background diisi sama hasil crop gambar bagian bawah

5.    bagian tint biarin

6.    bagian UI property:
ntp_background_alignment diisi center & top
ntp_background_repeat diisi no-repeat
ntp_logo_alternate terserah (mau coba" barangkali )

·         kalau udah semua klik "pack theme", ntar kalau prosesnya dah selesai ada jendela pemberitahuan, file *.crx nya ada di dalem folder tempat nyimpen crxtheme, tinggal drag filenya ke tab chrome, selesai 

catatan tambahan:
di dalem crxtheme ada folder yang namanya theme berisi images sama manifest.json, kalau mau bikin theme baru delete dulu file yang ada di dalem folder images terus pindahin file *.crx sebelumnya ke tempat lain (atau di rename) soalnya bakal di replace