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.

Membangun ekstensi Chrome(Chrome) yang kompleks adalah proses yang jauh lebih mendetail 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(Tip) : Untuk melihat betapa hebatnya ekstensi Anda sendiri, lihat ekstensi Chrome yang menakjubkan ini(these amazing Chrome extensions) .

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>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Jangan(Feel) 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,
“name”: “Situs Favorit”, ( “name”: “Favorite Sites”,)
“deskripsi”: “Semua situs web favorit saya.”, ( “description”: “All my favorite websites.”,)
“versi”: “1.0”, ( “version”: “1.0”,)
“ikon”: { ( “icons”: {)
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   “latar belakang”: {  (   “background”: { )
        “halaman”:”latar belakang.html” (        “page”:”background.html”)
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Situs Favorit”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Area yang dapat dimakan dari kode ini termasuk nama(name) , deskripsi(description) , dan default_title .

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

#myUL {
list-style-type: none;
   bantalan: 0; (   padding: 0;)
   margin: 0;
   lebar: 300 piksel; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-atas: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  bantalan: 12px; (  padding: 12px;)
  dekorasi teks: tidak ada; (  text-decoration: none;)
  ukuran font: 18px; (  font-size: 18px;)
  warna hitam; (  color: black;)
  tampilan: blok; (  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
   background-color: #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(Create) ikon untuk ekstensi dan beri nama icon.png . Tempatkan di folder ekstensi Chrome Anda. (Chrome)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(Google has more information) tentang membuat ekstensi Chrome . Ada contoh lain dan opsi lanjutan yang melampaui langkah-langkah sederhana yang telah kami tunjukkan di sini.

Cara Menambahkan Ekstensi Khusus(Custom Extension) 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(how you’d install a normal Chrome extension) .

  • Dari menu Chrome, buka Alat lainnya(More tools ) > Ekstensi(Extensions) . Atau, ketik chrome://extensions/ di bilah alamat.
  • Pilih tombol di sebelah mode Pengembang(Developer mode) jika belum dipilih. Ini akan mengaktifkan mode khusus yang memungkinkan Anda mengimpor ekstensi Chrome Anda sendiri.(Chrome)

  • Gunakan tombol Load unpacked di bagian atas halaman itu untuk memilih folder yang Anda buat selama Langkah 1(Step 1) di atas.

  • Terima(Accept) permintaan apa pun jika Anda melihatnya. Jika tidak, ekstensi Chrome(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(HTML Tutorial on W3Schools) adalah tempat yang baik untuk mempelajari lebih lanjut tentang bahasa itu.



Jaka Natsir

About the author

Hai! Nama saya, dan saya seorang peretas perangkat keras. Saya memiliki lebih dari 10 tahun pengalaman dalam memperbaiki dan memodifikasi komputer. Saya dapat memperbaiki apa saja mulai dari laptop, tablet, hingga smart TV. Dengan keahlian saya, saya dapat membantu klien memecahkan masalah mereka dengan cepat dan efisien. Blog saya didedikasikan untuk membantu orang mempelajari cara memperbaiki komputer dan peralatan mereka menggunakan alat yang tepat. Dan halaman Facebook saya adalah tempat saya berbagi tips, trik, dan wawasan tentang segala hal yang berhubungan dengan komputer!


Related posts