Jika anda pengguna Chrome, kemungkinan anda akan menggunakan satu atau lebih pelanjutan. Sama ada untuk menyekat iklan atau menambah ciri, sambungan menambah banyak utiliti ke penyemak imbas. Oleh itu, tidakkah ia menjadi sejuk jika anda boleh membina sambungan Chrome anda sendiri? Itulah yang saya akan tunjukkan kepada anda di sini.
Juga lihat artikel kami Chromebook Touchscreen Terbaik
Memandangkan saya mengekalkan laman web untuk pelanggan, saya suka mengetahui bagaimana setiap tapak melakukan hal ehwal halaman loading. Memandangkan Google kini menggunakan masa beban dalam pengiraan SEO, mengetahui seberapa cepat, atau memperlahankan beban halaman adalah metrik penting ketika mengoptimumkan tapak. Ini lebih tepat apabila mengoptimumkan laman web untuk mudah alih. Ia perlu ringan, cepat dan tanpa sebarang kesilapan untuk mendapat skor yang tinggi di dalam Google.
Tambah itu, hakikatnya orang yang giat di SitePoint juga menggunakan laman web yang sama yang saya lakukan untuk memeriksa kelajuan halaman, GTmetrix dan telah mengembangkan sambungan Chrome untuk memeriksa, saya fikir saya akan melakukan perkara yang sama dan membimbing anda menerusinya.
Sambungan Chrome
Sambungan Chrome adalah program mini yang menambah ciri ke pelayar teras. Mereka boleh seperti yang mudah seperti yang kita buat atau sebagai rumit sebagai pengurus kata laluan yang selamat atau emulator skrip. Ditulis dalam bahasa yang serasi seperti HTML, CSS dan JavaScript, mereka adalah fail sendiri yang duduk di sebelah penyemak imbas.
Oleh itu, kebanyakan pelanjutan adalah ikon klik klik execution yang melaksanakan tindakan yang diberikan. Tindakan itu boleh menjadi apa yang anda mahukan Chrome lakukan.
Bina pelanjutan Chrome anda sendiri
Dengan sedikit penyelidikan, anda boleh mengubah taraf pelanjutan anda untuk melakukan apa sahaja yang anda suka tetapi saya suka idea tentang satu butang kelajuan cek supaya saya pergi dengan itu.
Biasanya, apabila anda menyemak kelajuan laman web, anda akan menyisipkan URL halaman yang anda masuk ke GTmetrix, Pingdom atau di mana sahaja dan tekan Analisa. Ia hanya mengambil masa beberapa saat tetapi tidakkah lebih bagus jika anda hanya boleh memilih ikon pada pelayar anda dan melakukannya untuk anda? Selepas bekerja melalui tutorial ini, anda akan dapat melakukannya.
Anda perlu membuat folder pada komputer anda untuk menyimpan segala-galanya. Buat tiga fail kosong, manifest.json, popup.html dan popup.js. Klik kanan dalam folder baru anda dan pilih Fail baru dan teks. Buka setiap tiga fail anda dalam editor teks pilihan anda. Pastikan popup.html disimpan sebagai fail HTML dan popup.js disimpan sebagai fail JavaScript. Muat turun ikon sampel ini dari Google juga untuk tujuan tutorial ini.
Pilih manifest.json dan tampal yang berikut ke dalamnya:
, "nama" ":" GTmetrix Page Speed Analyzer ", " description ":" Gunakan GTmetrix untuk menganalisis laman muat turun halaman ", " versi ":" 1.0 ", " browser_action ": {" default_icon " : "icon.png", "default_popup": "popup.html"}, "permissions":}
Seperti yang dapat anda lihat, kami telah memberikan tajuk dan penerangan asas. Kami juga memanggil tindakan penyemak imbas yang merangkumi ikon yang kami muat turun dari Google yang akan muncul di bar penyemak imbas anda dan popup.html. Popup.html adalah apa yang dipanggil apabila anda memilih ikon pelanjutan dalam penyemak imbas.
Buka popup.html dan tampal yang berikut ke dalamnya.
Pagespeed Analyzer menggunakan GTMetrix
Popup.html adalah apa yang dipanggil apabila anda memilih ikon pelanjutan dalam penyemak imbas. Kami telah memberikannya nama, yang dilabel pop dan menambah satu butang. Memilih butang akan memanggil popup.js yang merupakan fail yang akan kami selesaikan seterusnya.
Buka popup.js dan tampal yang berikut ke dalamnya:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) = document; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'tersembunyi'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, palsu);}, palsu);
Saya tidak akan berpura-pura mengetahui JavaScript sebab itulah berguna bahawa SitePoint sudah mempunyai fail di tempatnya. Yang saya tahu ialah ia memberitahu GTmetrix untuk menganalisis halaman dalam tab Chrome semasa. Di mana ia berkata 'chrome.tabs.getSelected' pelanjutan mengambil URL dari tab aktif dan memasukkannya ke dalam borang web. Itu adalah sejauh yang saya boleh pergi.
Menguji pelanjutan Chrome anda
Sekarang kita mempunyai rangka kerja asas di tempat, kita perlu menguji untuk melihat bagaimana ia berfungsi.
- Buka Chrome, pilih Lagi Alat dan Sambungan.
- Tandakan kotak di sebelah mod Pemaju untuk mendayakannya.
- Pilih Muatkan sambungan yang tidak dibongkar dan navigasi ke fail yang anda buat untuk sambungan ini.
- Pilih OK untuk memuatkan pelanjutan dan ia sepatutnya muncul dalam senarai Pelanjutan anda.
- Tandai kotak di sebelah Diaktifkan dalam senarai dan ikon akan muncul di penyemak imbas anda.
- Pilih ikon dalam penyemak imbas supaya muncul pop timbul.
- Pilih butang, Semak halaman ini sekarang!
Anda harus melihat halaman diperiksa dan laporan prestasi dari GTmetrix. Seperti yang anda dapat lihat dari laman web saya sendiri dalam imej utama, saya mempunyai sedikit kerja untuk mempercepatkan reka bentuk baru saya!
Mengambil sambungan ke hadapan
Mewujudkan sambungan Chrome anda sendiri tidak begitu sukar kerana ia mungkin kelihatan. Walaupun ia pasti membantu untuk memulakan kepala dengan mengetahui kod kecil, terdapat beratus-ratus sumber dalam talian yang akan menunjukkan kepada anda itu. Selain itu, Google mempunyai repositori besar maklumat, tutorial dan panduan yang dapat membantu. Saya menggunakan laman ini dari laman Pembangun Google untuk membantu saya menggunakan sambungan ini. Halaman ini membimbing anda melalui setiap bahagian membuat sambungan dan menyediakan ikon yang kami gunakan sebelumnya.
Dengan penyelidikan yang mencukupi, anda boleh membuat sambungan yang cukup banyak apa yang pelayar mampu. Beberapa pelanjutan terbaik dalam gedung Chrome adalah daripada individu dan bukan syarikat, membuktikan bahawa anda benar-benar boleh membuat anda sendiri.
Semua kredit kepada John Sonmez di SitePoint untuk panduan asal. Dia melakukan kerja keras, saya hanya menyusun semula sedikit dan mengemas kini sedikit.
Adakah anda telah mencipta pelanjutan Chrome anda sendiri? Mahu mempromosikan atau membaginya? Marilah kita tahu di bawah jika anda lakukan!
