Membuat Theme Google Chrome Sendiri

beberapa hari yang lalu aku nyari theme buat chrome di google karena bosen dengan penampilan yang gitu" aja, akhirnya dapet nih, theme Final Fantasy XIII.

Themenya bagus, tapi aku ngerasa ada yang cacat dari theme itu, yaitu themenya ga ditampilin secara maksimal karena resolusinya beda
(punya aku 1280x800, themenya lebih lebar dari itu)

Akhirnya aku putusin bikin sendiri dan nyari wallpaper yang sama kaya yang di tampilin di theme itu buat bahan dasar, bagus sih
yang dibutuhkan:crxtheme-v1.0 - "compiler" untuk file *.crx (theme chrome)
Download

• 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)

 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.
contoh yang dah jadi




Semoga bermanfaat................