Jika Anda pengguna Chrome, kemungkinan Anda akan menggunakan satu atau lebih ekstensi. Baik itu untuk memblokir iklan atau menambah fitur, ekstensi menambahkan banyak utilitas ke browser. Jadi bukankah itu keren jika Anda bisa membangun ekstensi Chrome Anda sendiri? Itulah yang akan saya tunjukkan di sini.
Lihat juga artikel kami Chromebook Layar Sentuh Terbaik
Karena saya mengelola situs web untuk klien, saya ingin tahu bagaimana kinerja setiap situs sehubungan dengan pemuatan halaman. Karena Google sekarang menggunakan waktu muat dalam perhitungan SEO-nya, mengetahui seberapa cepat, atau lambat memuat halaman adalah metrik penting ketika mengoptimalkan situs. Ini bahkan lebih benar ketika mengoptimalkan situs web untuk seluler. Itu harus ringan, cepat, dan memuat tanpa kesalahan untuk mendapatkan skor tinggi di Google.
Selain itu, fakta orang yang giat di SitePoint juga menggunakan situs web yang sama dengan yang saya lakukan untuk memeriksa kecepatan halaman, GTmetrix dan telah mengembangkan ekstensi Chrome untuk memeriksanya, saya pikir saya akan melakukan hal yang sama dan memandu Anda melewatinya.
Ekstensi Chrome
Ekstensi Chrome adalah program mini yang menambahkan fitur ke browser inti. Mereka bisa sesederhana yang akan kita buat atau serumit manajer kata sandi aman atau emulator skrip. Ditulis dalam bahasa yang kompatibel seperti HTML, CSS dan JavaScript, mereka adalah file mandiri yang berada di samping browser.
Karena kebutuhan, sebagian besar ekstensi adalah eksekusi klik ikon sederhana yang melakukan tindakan tertentu. Tindakan itu benar-benar bisa menjadi apa pun yang Anda ingin Chrome lakukan.
Buat ekstensi Chrome Anda sendiri
Dengan sedikit riset, Anda dapat mengubah ekstensi Anda untuk melakukan apa pun yang Anda suka, tetapi saya menyukai gagasan pemeriksaan kecepatan satu tombol, jadi saya akan melakukannya.
Biasanya, ketika Anda memeriksa kecepatan situs, Anda akan menempelkan URL halaman yang sedang Anda kunjungi ke GTmetrix, Pingdom atau di mana saja dan tekan Analisis. Hanya perlu beberapa detik, tetapi bukankah lebih baik jika Anda bisa memilih ikon di peramban dan melakukannya untuk Anda? Setelah mengerjakan tutorial ini, Anda akan dapat melakukan hal itu.
Anda harus membuat folder di komputer Anda untuk menyimpan semuanya. Buat tiga file kosong, manifest.json, popup.html dan popup.js. Klik kanan di dalam folder baru Anda dan pilih File baru dan teks. Buka masing-masing dari tiga file Anda di editor teks pilihan Anda. Pastikan popup.html disimpan sebagai file HTML dan popup.js disimpan sebagai file JavaScript. Unduh ikon sampel ini dari Google juga hanya untuk keperluan tutorial ini.
Pilih manifest.json dan rekatkan yang berikut ini ke dalamnya:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Gunakan GTmetrix untuk menganalisis kecepatan pemuatan halaman situs web", "versi": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "izin":}
Seperti yang Anda lihat, kami telah memberinya judul dan deskripsi dasar. Kami juga menyebut tindakan peramban yang menyertakan ikon yang kami unduh dari Google yang akan muncul di bilah peramban dan popup.html. Popup.html adalah apa yang disebut ketika Anda memilih ikon ekstensi di browser.
Buka popup.html dan rekatkan yang berikut ke dalamnya.
Penganalisa Pagespeed menggunakan GTMetrix
Popup.html adalah apa yang disebut ketika Anda memilih ikon ekstensi di browser. Kami telah memberinya nama, memberi label pada sembulan dan menambahkan tombol. Memilih tombol akan memanggil popup.js yang merupakan file yang akan kita selesaikan selanjutnya.
Buka popup.js dan rekatkan yang berikut ke dalamnya:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('klik', function () {chrome.tabs.getSelected (null, function (tab) {d = dokumen; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'posting'; var i = d.createElement ( 'input'); i.type = 'disembunyikan'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);}, false);
Saya tidak akan berpura-pura tahu JavaScript yang mengapa berguna bahwa SitePoint sudah memiliki file di tempatnya. Yang saya tahu adalah memberitahu GTmetrix untuk menganalisis halaman di tab Chrome saat ini. Di mana dikatakan 'chrome.tabs.getSelected' ekstensi mengambil URL dari tab aktif dan memasukkannya ke dalam formulir web. Sejauh yang saya bisa.
Menguji ekstensi Chrome Anda
Sekarang kita memiliki kerangka dasar di tempat, kita perlu menguji untuk melihat cara kerjanya.
- Buka Chrome, pilih More Tools and Extensions.
- Centang kotak di sebelah mode Pengembang untuk mengaktifkannya.
- Pilih Muat ekstensi yang belum dibuka dan navigasikan ke file yang Anda buat untuk ekstensi ini.
- Pilih OK untuk memuat ekstensi dan itu akan muncul di daftar Ekstensi Anda.
- Centang kotak di sebelah Diaktifkan dalam daftar dan ikon akan muncul di browser Anda.
- Pilih ikon di browser sehingga popup muncul.
- Pilih tombol, Periksa halaman ini sekarang!
Anda akan melihat halaman sedang diperiksa dan laporan kinerja dari GTmetrix. Seperti yang dapat Anda lihat dari situs saya sendiri di gambar utama, saya memiliki sedikit pekerjaan yang harus dilakukan untuk mempercepat desain baru saya!
Memajukan ekstensi
Membuat ekstensi Chrome Anda sendiri tidak sesulit kelihatannya. Meskipun tentu saja membantu untuk memulai dengan mengetahui sedikit kode, ada ratusan sumber daya online yang akan menunjukkan kepada Anda. Plus, Google memiliki gudang besar informasi, tutorial, dan penelusuran yang akan membantu. Saya menggunakan halaman ini dari situs Pengembang Google untuk membantu saya dengan ekstensi ini. Halaman ini memandu Anda melalui setiap bagian membuat ekstensi dan memberikan ikon yang kami gunakan sebelumnya.
Dengan riset yang cukup, Anda dapat membuat ekstensi yang mampu melakukan apa saja yang dapat dilakukan oleh browser. Beberapa ekstensi terbaik di toko Chrome berasal dari individu dan bukan perusahaan, membuktikan bahwa Anda benar-benar dapat membuatnya sendiri.
Semua kredit untuk John Sonmez di SitePoint untuk panduan asli. Dia melakukan kerja keras, saya hanya mengatur ulang sedikit dan memperbaruinya sedikit.
Sudahkah Anda membuat ekstensi Chrome sendiri? Ingin mempromosikan atau membagikannya? Beri tahu kami di bawah jika Anda melakukannya!
