Sederhanakan gaya halaman saat ini dengan mengklik ikon toolbar ekstensi.
Ringkasan
Tutorial ini membuat ekstensi yang menyederhanakan penataan gaya ekstensi Chrome dan halaman dokumentasi Chrome Web Store agar lebih mudah dibaca.
Dalam panduan ini, kami akan menjelaskan cara melakukan hal berikut:
- Gunakan pekerja layanan ekstensi sebagai koordinator peristiwa.
- Jaga privasi pengguna melalui izin
"activeTab". - Jalankan kode saat pengguna mengklik ikon toolbar ekstensi.
- Sisipkan dan hapus style sheet menggunakan Scripting API.
- Gunakan pintasan keyboard untuk menjalankan kode.
Sebelum memulai
Panduan ini mengasumsikan bahwa Anda memiliki pengalaman pengembangan web dasar. Sebaiknya lihat Hello World untuk mengetahui pengantar alur kerja pengembangan ekstensi.
Mem-build ekstensi
Untuk memulai, buat direktori baru bernama focus-mode yang akan menyimpan file ekstensi. Jika ingin, Anda dapat mendownload kode sumber lengkap dari GitHub.
Langkah 1: Tambahkan data dan ikon ekstensi
Buat file bernama manifest.json dan sertakan kode berikut.
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Untuk mempelajari kunci manifes ini lebih lanjut, lihat tutorial "Menjalankan skrip di setiap tab" yang menjelaskan metadata dan ikon ekstensi secara lebih mendetail.
Buat folder images, lalu download ikon ke dalamnya.
Langkah 2: Lakukan inisialisasi ekstensi
Ekstensi dapat memantau peristiwa browser di latar belakang menggunakan pekerja layanan ekstensi. Service worker adalah lingkungan JavaScript khusus yang menangani peristiwa dan berakhir saat tidak diperlukan.
Mulai dengan mendaftarkan pekerja layanan di file manifest.json:
{
...
"background": {
"service_worker": "background.js"
},
...
}
Buat file bernama background.js dan tambahkan kode berikut:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Peristiwa pertama yang akan diproses pekerja layanan adalah runtime.onInstalled(). Metode ini memungkinkan ekstensi untuk menetapkan status awal atau menyelesaikan beberapa tugas saat penginstalan. Ekstensi dapat menggunakan Storage API dan IndexedDB untuk menyimpan status aplikasi. Namun, dalam hal ini, karena kita hanya menangani dua status, kita akan menggunakan teks badge tindakan itu sendiri untuk melacak apakah ekstensi 'ON' atau 'OFF'.
Langkah 3: Aktifkan tindakan ekstensi
Tindakan ekstensi mengontrol ikon toolbar ekstensi. Jadi, setiap kali pengguna mengklik ikon ekstensi, ikon tersebut akan menjalankan beberapa kode (seperti dalam contoh ini) atau menampilkan pop-up. Tambahkan kode berikut untuk mendeklarasikan tindakan ekstensi dalam file manifest.json:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
Menggunakan izin activeTab untuk melindungi privasi pengguna
Izin activeTab memberi ekstensi kemampuan sementara untuk mengeksekusi kode
di tab aktif. Parameter ini juga memungkinkan akses ke properti sensitif dari tab saat ini.
Izin ini diaktifkan saat pengguna memanggil ekstensi. Dalam hal ini, pengguna akan memanggil ekstensi dengan mengklik tindakan ekstensi.
💡 Interaksi pengguna lain apa yang mengaktifkan izin activeTab di ekstensi saya sendiri?
- Menekan kombinasi pintasan keyboard.
- Memilih item menu konteks.
- Menerima saran dari omnibox.
- Membuka pop-up ekstensi.
Izin "activeTab" memungkinkan pengguna dengan sengaja memilih untuk menjalankan ekstensi di tab yang difokuskan. Dengan begitu, privasi pengguna akan dilindungi. Manfaat lainnya adalah tidak
memicu peringatan izin.
Untuk menggunakan izin "activeTab", tambahkan izin ke array izin manifes:
{
...
"permissions": ["activeTab"],
...
}
Langkah 4: Lacak status tab saat ini
Setelah pengguna mengklik tindakan ekstensi, ekstensi akan memeriksa apakah URL cocok dengan halaman dokumentasi. Selanjutnya, fungsi ini akan memeriksa status tab saat ini dan menetapkan status berikutnya. Tambahkan
kode berikut ke background.js:
const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON'
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
Langkah 5: Tambahkan atau hapus lembar gaya
Sekarang saatnya mengubah tata letak halaman. Buat file bernama focus-mode.css dan sertakan
kode berikut:
body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
display: none;
}
main > :last-child {
margin-top: min(10vmax, 10rem);
margin-bottom: min(10vmax, 10rem);
}
Sisipkan atau hapus style sheet menggunakan Scripting API. Mulailah dengan
mendeklarasikan izin "scripting" dalam manifes:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Terakhir, di background.js, tambahkan kode berikut untuk mengubah tata letak halaman:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 Dapatkah saya menggunakan Scripting API untuk memasukkan kode, bukan lembar gaya?
Ya. Anda dapat menggunakan scripting.executeScript() untuk memasukkan JavaScript.
Opsional: Menetapkan pintasan keyboard
Untuk bersenang-senang, tambahkan pintasan untuk mempermudah pengaktifan atau penonaktifan mode fokus. Tambahkan
kunci "commands" ke manifes.
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
Tombol "_execute_action" menjalankan kode yang sama dengan peristiwa action.onClicked() sehingga tidak memerlukan kode tambahan.
Menguji apakah berfungsi
Pastikan struktur file project Anda terlihat seperti berikut:
Memuat ekstensi secara lokal
Untuk memuat ekstensi yang belum dibuka dalam mode developer, ikuti langkah-langkah di Halo Dunia.
Menguji ekstensi di halaman dokumentasi
Pertama, buka salah satu halaman berikut:
Kemudian, klik tindakan ekstensi. Jika menyiapkan pintasan keyboard, Anda dapat mengujinya dengan menekan Ctrl + B atau Cmd + B.
Tampilannya harus seperti ini:
Ke ini:
🎯 Potensi peningkatan
Berdasarkan apa yang telah Anda pelajari hari ini, cobalah untuk menyelesaikan salah satu hal berikut:
- Menyempurnakan lembar gaya CSS.
- Tetapkan pintasan keyboard lain.
- Ubah tata letak blog atau situs dokumentasi favorit Anda.
Teruslah berkembang.
Selamat, Anda telah menyelesaikan tutorial ini 🎉. Terus tingkatkan keterampilan Anda dengan menyelesaikan tutorial lainnya di seri ini:
| Perluasan | Yang akan Anda pelajari |
|---|---|
| Waktu membaca | Untuk menyisipkan elemen pada rangkaian halaman tertentu secara otomatis. |
| Pengelola Tab | Untuk membuat pop-up yang mengelola tab browser. |
Jelajahi lebih jauh
Kami harap Anda senang membuat ekstensi Chrome ini dan bersemangat untuk melanjutkan perjalanan pembelajaran pengembangan ekstensi Anda. Kami merekomendasikan jalur pembelajaran berikut:
- Panduan developer ini berisi puluhan link tambahan ke bagian dokumentasi yang relevan dengan pembuatan ekstensi lanjutan.
- Ekstensi memiliki akses ke API yang canggih selain yang tersedia di web terbuka. Dokumentasi API Chrome menjelaskan setiap API.