11 KiB

Raw Permalink Blame History

Proyek Ekstensi Browser Bagian 1: Semua Tentang Browser

Sketchnote oleh Wassim Chegham

Kuis Pra-Kuliah

Pendahuluan

Ekstensi browser menambahkan fungsionalitas tambahan ke browser. Namun sebelum Anda membuatnya, Anda perlu mempelajari sedikit tentang cara kerja browser.

Tentang Browser

Dalam rangkaian pelajaran ini, Anda akan belajar cara membuat ekstensi browser yang dapat digunakan di browser Chrome, Firefox, dan Edge. Pada bagian ini, Anda akan mempelajari cara kerja browser dan membuat kerangka elemen-elemen ekstensi browser.

Tapi apa sebenarnya browser itu? Browser adalah aplikasi perangkat lunak yang memungkinkan pengguna akhir mengakses konten dari server dan menampilkannya di halaman web.

✅ Sedikit sejarah: browser pertama disebut 'WorldWideWeb' dan dibuat oleh Sir Timothy Berners-Lee pada tahun 1990.

Beberapa browser awal, via Karen McGrane

Ketika seorang pengguna terhubung ke internet menggunakan alamat URL (Uniform Resource Locator), biasanya menggunakan Hypertext Transfer Protocol melalui alamat http atau https, browser berkomunikasi dengan server web dan mengambil halaman web.

Pada titik ini, mesin perenderan browser menampilkannya di perangkat pengguna, yang bisa berupa ponsel, desktop, atau laptop.

Browser juga memiliki kemampuan untuk menyimpan cache konten sehingga tidak perlu diambil dari server setiap saat. Mereka dapat merekam riwayat aktivitas penelusuran pengguna, menyimpan 'cookie', yaitu potongan data kecil yang berisi informasi untuk menyimpan aktivitas pengguna, dan banyak lagi.

Hal yang sangat penting untuk diingat tentang browser adalah bahwa mereka tidak semuanya sama! Setiap browser memiliki kelebihan dan kekurangannya, dan seorang pengembang web profesional perlu memahami cara membuat halaman web bekerja dengan baik di berbagai browser. Ini termasuk menangani tampilan kecil seperti ponsel, serta pengguna yang sedang offline.

Sebuah situs web yang sangat berguna dan mungkin perlu Anda tandai di browser favorit Anda adalah caniuse.com. Saat Anda membuat halaman web, sangat membantu untuk menggunakan daftar teknologi yang didukung oleh caniuse agar Anda dapat mendukung pengguna Anda dengan lebih baik.

✅ Bagaimana Anda bisa mengetahui browser apa yang paling populer di antara basis pengguna situs web Anda? Periksa analitik Anda - Anda dapat menginstal berbagai paket analitik sebagai bagian dari proses pengembangan web Anda, dan mereka akan memberi tahu Anda browser apa yang paling sering digunakan oleh pengguna.

Ekstensi Browser

Mengapa Anda ingin membuat ekstensi browser? Ekstensi adalah alat yang berguna untuk ditambahkan ke browser Anda ketika Anda membutuhkan akses cepat ke tugas-tugas yang sering Anda ulangi. Misalnya, jika Anda sering memeriksa warna pada berbagai halaman web yang Anda kunjungi, Anda mungkin menginstal ekstensi browser pemilih warna. Jika Anda kesulitan mengingat kata sandi, Anda mungkin menggunakan ekstensi pengelola kata sandi.

Membuat ekstensi browser juga menyenangkan. Biasanya, ekstensi ini mengelola sejumlah tugas tertentu yang dilakukan dengan baik.

✅ Apa ekstensi browser favorit Anda? Tugas apa yang mereka lakukan?

Menginstal Ekstensi

Sebelum Anda mulai membuat, lihat proses membangun dan menerapkan ekstensi browser. Meskipun setiap browser memiliki sedikit perbedaan dalam cara mereka mengelola tugas ini, prosesnya serupa di Chrome dan Firefox seperti contoh di Edge:

Catatan: Pastikan untuk mengaktifkan mode pengembang dan izinkan ekstensi dari toko lain.

Secara garis besar, prosesnya adalah:

buat ekstensi Anda menggunakan npm run build
navigasikan di browser ke panel ekstensi menggunakan tombol "Settings and more" (ikon ...) di kanan atas
jika ini adalah instalasi baru, pilih load unpacked untuk mengunggah ekstensi baru dari folder build-nya (dalam kasus kita adalah /dist)
atau, klik reload jika Anda memuat ulang ekstensi yang sudah diinstal

✅ Instruksi ini berlaku untuk ekstensi yang Anda buat sendiri; untuk menginstal ekstensi yang telah dirilis ke toko ekstensi browser masing-masing, Anda harus menavigasi ke toko-toko tersebut dan menginstal ekstensi pilihan Anda.

Mulai

Anda akan membuat ekstensi browser yang menampilkan jejak karbon wilayah Anda, menunjukkan penggunaan energi wilayah Anda dan sumber energinya. Ekstensi ini akan memiliki formulir yang mengumpulkan kunci API sehingga Anda dapat mengakses API CO2 Signal.

Yang Anda butuhkan:

kunci API; masukkan email Anda di kotak pada halaman ini dan kunci akan dikirimkan kepada Anda
kode untuk wilayah Anda yang sesuai dengan Electricity Map (di Boston, misalnya, saya menggunakan 'US-NEISO').
kode awal. Unduh folder start; Anda akan melengkapi kode di folder ini.
NPM - NPM adalah alat manajemen paket; instal secara lokal dan paket-paket yang terdaftar di file package.json Anda akan diinstal untuk digunakan oleh aset web Anda

✅ Pelajari lebih lanjut tentang manajemen paket di modul pembelajaran yang sangat baik ini

Luangkan waktu sejenak untuk melihat basis kode:

✅ Setelah Anda memiliki kunci API dan kode wilayah Anda, simpan di suatu tempat untuk digunakan di masa depan.

Bangun HTML untuk Ekstensi

Ekstensi ini memiliki dua tampilan. Satu untuk mengumpulkan kunci API dan kode wilayah:

Dan yang kedua untuk menampilkan penggunaan karbon wilayah:

Mari kita mulai dengan membangun HTML untuk formulir dan menatanya dengan CSS.

Di folder /dist, Anda akan membuat formulir dan area hasil. Dalam file index.html, isi area formulir yang telah ditentukan:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

Ini adalah formulir tempat informasi yang disimpan akan dimasukkan dan disimpan ke penyimpanan lokal.

Selanjutnya, buat area hasil; di bawah tag formulir terakhir, tambahkan beberapa div:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

Pada titik ini, Anda dapat mencoba membangun. Pastikan untuk menginstal dependensi paket dari ekstensi ini:

npm install

Perintah ini akan menggunakan npm, Manajer Paket Node, untuk menginstal webpack untuk proses pembangunan ekstensi Anda. Webpack adalah alat bundler yang menangani kompilasi kode. Anda dapat melihat output dari proses ini dengan melihat di /dist/main.js - Anda akan melihat kode telah dibundel.

Untuk saat ini, ekstensi harus dapat dibangun dan, jika Anda menerapkannya ke Edge sebagai ekstensi, Anda akan melihat formulir yang ditampilkan dengan rapi.

Selamat, Anda telah mengambil langkah pertama menuju pembuatan ekstensi browser. Dalam pelajaran berikutnya, Anda akan membuatnya lebih fungsional dan berguna.

🚀 Tantangan

Lihat toko ekstensi browser dan instal salah satu ke browser Anda. Anda dapat memeriksa file-filenya dengan cara yang menarik. Apa yang Anda temukan?

Kuis Pasca-Kuliah

Kuis pasca-kuliah

Tinjauan & Studi Mandiri

Dalam pelajaran ini, Anda mempelajari sedikit tentang sejarah browser web; manfaatkan kesempatan ini untuk mempelajari bagaimana para penemu World Wide Web membayangkan penggunaannya dengan membaca lebih lanjut tentang sejarahnya. Beberapa situs yang berguna meliputi:

The History of Web Browsers

History of the Web

Wawancara dengan Tim Berners-Lee

Tugas

Ubah gaya ekstensi Anda

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diingat bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

11 KiB Raw Permalink Blame History