Cara Membuat Ekstensi Chrome Sederhana

Cara Membuat Ekstensi Chrome Sederhana

Cara Membuat Ekstensi Chrome Sederhana.

 Cara Membuat Ekstensi Chrome Sederhana



Membuat ekstensi Chrome adalah proses yang cukup mudah. Setelah selesai, Anda dapat menggunakannya di komputer untuk menyempurnakan cara kerja browser.


Ada beberapa komponen dasar yang diperlukan browser sebelum ekstensi dapat beroperasi penuh. Kami akan membahas semua ini di bawah, termasuk cara membuat ekstensi khusus Anda berfungsi di Chrome tanpa perlu mengunggahnya atau membagikannya dengan orang lain.

Daftar isi


Membangun ekstensi Chrome yang kompleks adalah proses yang jauh lebih detail daripada yang akan Anda lihat di bawah, tetapi proses umumnya sama. Teruslah membaca untuk mempelajari cara membuat ekstensi Chrome yang dapat Anda mulai gunakan hari ini.


Kiat: Untuk melihat betapa hebatnya ekstensi Anda sendiri, lihat ekstensi Chrome yang menakjubkan ini.


Cara Membuat Ekstensi Chrome


Dengan menggunakan panduan ini, Anda akan membuat ekstensi Chrome sederhana yang mencantumkan beberapa situs web favorit Anda. Ini sepenuhnya dapat disesuaikan dan sangat mudah untuk diperbarui.


Inilah yang Harus Dilakukan:


  * Buat folder yang akan menampung semua file yang membentuk ekstensi.

  * Buat file dasar yang diperlukan ekstensi ini: manifest.json, popup.html, background.html, styles.css.

  * Buka popup.html di editor teks lalu rekatkan semua yang berikut di sana, pastikan untuk menyimpannya setelah selesai.


<!DOCTYPE html>

<html>

   <kepala>

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>Situs Favorit</title>

      <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<tubuh>

    <ul id="myUL">

       <li><a href="https://helpdeskgeek.com/" target="_blank">Geek Help Desk</a></li>

       <li><a href="https://www.online-tech-tips.com/" target="_blank">Kiat Teknologi Online</a></li>

       <li><a href="https://thebackroomtech.com/" target="_blank">Teknologi Ruang Belakang</a></li>

    </ul>

</tubuh>

</html>


Jangan ragu untuk mengedit tautan dan teks tautan, atau jika Anda ingin membuat ekstensi Chrome persis seperti kami, tetap sama saja.

   * Buka manifest.json di editor teks dan salin/tempel yang berikut ini:


{

“update_url”: “https://clients2.google.com/service/update2/crx”,


“manifest_version”: 2,

“nama”: “Situs Favorit”,

“description”: “Semua situs web favorit saya.”,

"versi": "1.0",

"ikon": {

“16”: “ikon.png”,

“32”: “ikon.png”,

“48”: “ikon.png”,

“128”: “ikon.png”

},


    "Latar Belakang": {

         “halaman”:”background.html”

},

“browser_action” : {

        “default_icon” : “icon.png”,

        “default_title” : “Situs Favorit”,

        “default_popup”: “popup.html”

    }

}


Area yang dapat dimakan dari kode ini termasuk nama, deskripsi, dan default_title.

  * Buka styles.css dan paste kode berikut. Inilah yang menghiasi menu popup agar lebih menarik untuk dilihat dan lebih mudah digunakan.


#myUL {

list-style-type: tidak ada;

   bantalan: 0;

   margin: 0;

   lebar: 300 piksel;

}

#myUL li a {

  perbatasan: 1px solid #ddd;

  margin-atas: -1px;

  warna-latar belakang: #f6f6f6;

  bantalan: 12px;

  dekorasi teks: tidak ada;

  ukuran font: 18px;

  warna hitam;

  tampilan: blok;

  font-family: 'Noto Sans', sans-serif;

}


#myUL li a:hover:not(.header) {

   warna-latar belakang: #eee;

}


Ada banyak hal yang dapat Anda ubah dalam file CSS. Bermain-main dengan opsi ini setelah membuat ekstensi Chrome Anda untuk menyesuaikannya sesuai keinginan Anda.

  * Buat ikon untuk ekstensi dan beri nama icon.png. Tempatkan di folder ekstensi Chrome Anda. Seperti yang Anda lihat pada kode di atas, Anda dapat membuat ikon terpisah untuk ukuran tersebut: 16x16 piksel, 32x32, dan seterusnya.


Tip: Google memiliki informasi lebih lanjut tentang membuat ekstensi Chrome. Ada contoh lain dan opsi lanjutan yang melampaui langkah-langkah sederhana yang kami tunjukkan di sini.


Cara Menambahkan Ekstensi Khusus ke Chrome


Sekarang setelah Anda membuat ekstensi Chrome, saatnya untuk menambahkannya ke browser sehingga Anda benar-benar dapat menggunakan semua file yang baru saja Anda buat. Memasang ekstensi khusus melibatkan prosedur yang berbeda dari cara Anda memasang ekstensi Chrome biasa.

  * Dari menu Chrome, buka Alat lainnya > Ekstensi. Atau, ketik chrome://extensions/ di bilah alamat.

  * Pilih tombol di sebelah mode Pengembang jika belum dipilih. Ini akan mengaktifkan mode khusus yang memungkinkan Anda mengimpor ekstensi Chrome Anda sendiri.


  * Gunakan tombol Load unpacked di bagian atas halaman itu untuk memilih folder yang Anda buat selama Langkah 1 di atas.


  * Terima permintaan apa pun jika Anda melihatnya. Jika tidak, ekstensi Chrome yang dibuat khusus akan muncul bersama ekstensi lain yang Anda miliki di sudut kanan atas browser.


Mengedit Ekstensi Chrome Anda


Sekarang setelah ekstensi Chrome Anda dapat digunakan, Anda dapat membuat perubahan untuk menjadikannya milik Anda.


File styles.css mengontrol bagaimana ekstensi muncul, sehingga Anda dapat menyesuaikan gaya daftar keseluruhan dan mengubah warna atau jenis font. W3Schools adalah salah satu sumber terbaik untuk mempelajari semua hal berbeda yang dapat Anda lakukan dengan CSS.


Untuk mengubah urutan daftar situs web, atau untuk menambah atau lebih banyak situs atau menghapus yang sudah ada, edit file popup.html. Pastikan untuk menyimpan suntingan Anda hanya pada URL dan nama. Semua karakter lain, seperti <li> dan <html>, diperlukan dan tidak boleh diubah. Tutorial HTML di W3Schools adalah tempat yang baik untuk mempelajari lebih lanjut tentang bahasa itu.


Sekian artikel tentang Cara Membuat Ekstensi Chrome Sederhana. Baca juga artikel mengenai Cara Membuat Email Grup Di Gmail dan Fitur Tersembunyi Lainnya yang mungkin perlu Sobat ketahui.

Lebih baru Lebih lama