LanguageEkstensi terkait:
Membuat Tema Chrome Anda Sendiri
Tema Google Chrome adalah add-on favorit bagi penggunanya dan Anda dapat menemukan ribuan tema di seluruh internet, dengan sumber terbesar adalah Chrome Web Store.
Namun banyak pengguna yang penasaran ingin membuat tema pribadi mereka sendiri atau bahkan membagikannya dengan teman dan dunia luar.
Tutorial kecil ini akan menunjukkan struktur internal tema Google dan bagaimana Anda dapat membuat tema sendiri dari gambar apa pun.
Struktur Tema Chrome
Sebuah Tema Chrome tidak lain adalah add-on yang tidak mengandung kode sumber atau skrip yang luas dan pada dasarnya terdiri dari dua bagian:
- gambar yang digunakan untuk tema itu sendiri
- sebuah file manifest.json tunggal yang berisi parameter dan pengaturan untuk membentuk tema
Kedua bagian ini kemudian dikemas menjadi satu file dengan ekstensi file CRX.
Cara menyiapkan Tema Google secara manual
Anda tentu memerlukan wallpaper yang sesuai yang ingin digunakan untuk tema Anda dan juga gagasan dasar tentang tema Anda secara keseluruhan. Namun Anda juga akan memerlukan beberapa alat perangkat lunak untuk mewujudkannya:
- Editor gambar. Gunakan program apa pun yang Anda suka, ada banyak alat perangkat lunak yang tersedia untuk Anda gunakan. Bahkan Microsoft Paint dasar sudah cukup, namun tentu saja Anda bisa menggunakan alat profesional, seperti Adobe Photoshop atau CorelDraw.
- Editor teks. Notepad dasar sudah cukup, begitu pula program lain yang serupa.
Setelah Anda memiliki semua ini, cukup ikuti langkah-langkah di bawah ini untuk membuat tema Google Chrome Anda sendiri.
Langkah 1: Buat direktori dengan nama tema
Salah satu hal pertama yang akan Anda lakukan adalah membuat direktori baru untuk tema Anda dan menamainya sesuai dengan tema Anda. Misalnya "my_new_theme". Di dalam folder ini buat folder lain, bernama "images", yang akan berisi semua gambar yang digunakan oleh tema baru Anda.
Langkah 2: Buat gambar untuk tema Anda
Untuk membuat tema yang berfungsi Anda membutuhkan empat elemen gambar dasar, atau lima, jika Anda ingin menambahkan logo pribadi Anda ke tema, tetapi itu bersifat opsional. Semua gambar yang digunakan dalam tema Google Chrome harus berformat file PNG.
Jika Anda memiliki gambar dalam format lain, Anda harus terlebih dahulu mengonversinya ke PNG dengan perangkat lunak atau alat konversi online yang tersedia.
Berikut adalah daftar setiap elemen gambar dengan persyaratan yang tepat:
Frame Tema (frame.png)
Gambar ini digunakan untuk bingkai tema Google Chrome baru Anda dan sebagai gambar latar belakang tombol "Close", "Minimize" dan "Maximize". Jika Anda tidak ingin menggunakan gambar ini, maka tema Chrome yang Anda buat akan bertindak sebagai tema Chrome default dan menampilkan bar judul OS asli.
Gambar frame tema membutuhkan tinggi minimum 30px tanpa batasan lebar. Elemen ini biasanya dibuat dengan warna paling gelap.
Toolbar Tema (toolbar.png)
Elemen tema ini ditampilkan sebagai latar belakang tombol "Forward", "Back" dan "Refresh" serta sebagai toolbar ekstensi. Ini mewakili baik tab saat ini maupun toolbar.
Membutuhkan tinggi minimum 120px tanpa batasan lebar.
Latar Belakang Tab Tema (tab.png)
Digunakan untuk tab tidak aktif jika ada beberapa tab yang dibuka sekaligus. Memiliki persyaratan tinggi minimum 65px dan tanpa batasan lebar.
Latar Belakang Halaman Tab Baru (background.png)
Gambar utama yang ditampilkan ketika tab baru dibuka. Ukuran gambar minimum yang direkomendasikan adalah 800x600, tetapi untuk tampilan terbaik, gunakan wallpaper yang sesuai dengan resolusi layar tampilan tempat tema akan digunakan. Gambar ini harus menggunakan warna paling terang untuk presentasi visual terbaik.
Atribusi Tema (theme_ntp_attribution.png)
Logo pembuat, yang ditampilkan di pojok kanan bawah tema Google Chrome. Ini sepenuhnya opsional.
Setelah semua elemen gambar dipersiapkan, pindahkan mereka ke direktori "images" yang Anda buat pada langkah 1, sehingga folder tersebut harus berisi 4-5 gambar.
Langkah 3: Buat file manifest
Setiap add-on Google Chrome yang dapat dipasang sebagai aplikasi web atau tema memiliki file "manifest.json" sendiri. File ini menyediakan browser dengan informasi tentang tema.
Anda dapat menemukan lebih banyak informasi tentang format file JSON di basis data kami.
Manifest berisi kode untuk 4 hal berbeda: nama, gambar, warna, tint dan properti. Contoh kode dalam file manifest.json ditunjukkan di bawah ini.
|
{ "version": "1.0", "name": "my_new_theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.png", "theme_tab_background" : "images/tab.png", "theme_ntp_attribution" : "images/theme_ntp_attribution.png" }, "colors" : { "ntp_link": [255,255,255], "ntp_text": [255,255,255], "ntp_section_link": [255,255,255], "ntp_section_text": [10 , 17 , 27], "ntp_background": [10 , 17 , 27], "frame": [10 , 17 , 27], "toolbar": [10 , 17 , 27], "tab_text": [255,255,255], "tab_background_text": [10 , 17 , 27], "bookmark_text": [255,255,255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47], "frame_inactive": [0.50, 0.50, 0.50], "frame_incognito_inactive": [0.50, 0.50, 0.50] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } } |
Cukup buka file baru di notepad, salin tempel kode dan simpan dengan nama manifest. Setelah itu, ganti ekstensi file dari txt menjadi json.
Sekarang setelah Anda membuat file manifest.json sendiri, mari lihat apa arti dan fungsi setiap bagian serta apa yang dapat Anda sunting.
Nama
Itulah nama tema Google Chrome baru Anda. Nama dalam file manifest.json harus sesuai dengan nama tema yang Anda tulis pada Langkah 1.
Gambar
Gambar dari Langkah 2 panduan kami didefinisikan di bagian ini dari file manifest.json. Jika Anda ingin mengubah nama file atau folder gambar, Anda harus melakukan perubahan yang sesuai pada file manifest.json juga.
Warna
Setiap elemen di bagian ini menentukan warna yang digunakan dalam tema. Ada beberapa hal yang perlu diingat tentang warna:
- Warna teks tombol toolbar unduhan sama dengan warna teks bookmark.
- Warna latar belakang status bar sama dengan warna toolbar yang Anda pilih.
- Warna teks status bar sama dengan warna teks tab yang Anda pilih.
Tint
Elemen tint menentukan rona warna untuk semua ikon di dalam semua tombol di toolbar (forward, back, refresh, dll.). Setiap tint memiliki nilai float dari 0 sampai 1 atau -1. Nilai -1 berarti tidak ada perubahan yang dilakukan pada warna elemen tersebut. Nilai tint disusun sebagai [Hue, Saturation, Luminance] dan Anda dapat menggunakan nilai seperti misalnya 0.256, 0.2, -0.4 untuk mendefinisikan warna. Anda dapat menyesuaikan nilai tersebut agar tombol menyatu atau menonjol.
Properti
Bagian properti dalam file manifest.json digunakan untuk mendefinisikan pengaturan untuk gambar latar utama. Gambar latar bisa ditempatkan di atas, bawah atau tengah browser dan Anda bisa memilih untuk mengulanginya sepanjang sumbu x atau y, atau tidak sama sekali.
Langkah 4: Mengemas dan melihat pratinjau tema Anda
Sekarang Anda harus memiliki gambar siap di direktori "my_new_theme/images" dan file manifest.json di direktori "my_new_theme".
Untuk menguji tema baru Anda, buka browser Google Chrome dan ketik "chrome://extensions" di address bar lalu tekan tombol enter.
Setelah masuk, klik pada tanda "+" di samping tautan "Developer mode" di sisi kanan. Anda sekarang akan melihat beberapa opsi muncul di halaman. Klik "Load unpacked extension" dan cari melalui komputer Anda ke direktori "my_new_theme". Pilih dan tekan OK. Jika file manifest.json yang benar ada di folder tersebut, Chrome akan memuat tema baru Anda. Sekarang periksa browser Anda apakah semuanya sudah benar.
Anda dapat mengulangi proses ini sampai Anda menyempurnakan Tema Google Anda. Setelah Anda puas dengan Tema Google Chrome kustom Anda, tekan tombol "Pack extension" dan Chrome akan membuat tema tersebut dan menyimpannya di direktori "my_new_theme" dengan ekstensi file CRX. File dengan ekstensi PEM juga akan dibuat, yang merupakan kunci privat untuk tema Google Anda, yang memungkinkan Anda untuk memperbarui ekstensi ini di masa depan jika Anda mengunggah tema Anda ke Chrome Extensions Gallery.
Jika semuanya berjalan lancar, Google Chrome akan memberi tahu Anda bahwa file .crx dan .pem telah dibuat dan juga menampilkan lokasi file baru tersebut. Setelah Anda membuat beberapa tema Google Chrome, Anda akan melihat bahwa ini sebenarnya tidak terlalu sulit.
Cara membuat Tema Chrome dengan lebih mudah
Tentu saja Anda bisa melakukan semuanya lebih cepat jika menggunakan beberapa alat khusus untuk Tema Chrome. Salah satu alat tersebut adalah, yang kini sudah dihentikan, Theme Creator. Anda masih bisa mengunduhnya dari web store dan menggunakannya, namun alat ini sudah tidak lagi didukung oleh Google dan mungkin terdapat gangguan. Namun ini tetap salah satu cara paling mudah untuk membuat Tema Chrome baru secara cepat.