Sederhanakan gaya halaman aktif dengan mengklik ikon toolbar ekstensi.
Ringkasan
Tutorial ini membangun 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:
- Menggunakan pekerja layanan ekstensi sebagai koordinator acara.
- Jaga privasi pengguna melalui izin
"activeTab". - Jalankan kode saat pengguna mengklik ikon toolbar ekstensi.
- Sisipkan dan hapus lembar gaya menggunakan Scripting API.
- Gunakan pintasan keyboard untuk mengeksekusi kode.
Sebelum memulai
Panduan ini mengasumsikan bahwa Anda memiliki pengalaman pengembangan web dasar. Sebaiknya pelajari Hello World untuk pengantar alur kerja pengembangan ekstensi.
Membangun ekstensi
Untuk memulai, buat direktori baru bernama focus-mode yang akan menyimpan file ekstensi. Jika Anda
Namun, Anda dapat mendownload kode sumber lengkap dari GitHub.
Langkah 1: Tambahkan ikon dan data 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 "Menjalankan skrip di setiap tab" yang menjelaskan metadata dan ikon ekstensi secara lebih mendetail.
Buat folder images lalu download ikon ke dalamnya.
Langkah 2: Melakukan inisialisasi ekstensi
Ekstensi dapat memantau peristiwa browser di latar belakang menggunakan layanan ekstensi pekerja. Pekerja layanan adalah lingkungan JavaScript khusus yang menangani {i>event<i} dan berhenti saat tidak diperlukan.
Mulai dengan mendaftarkan pekerja layanan dalam file manifest.json:
{
...
"background": {
"service_worker": "background.js"
},
...
}
Buat file bernama background.js, lalu tambahkan kode berikut:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Peristiwa pertama yang akan dideteksi pekerja layanan adalah
runtime.onInstalled() Metode ini memungkinkan ekstensi menyetel
status atau menyelesaikan
beberapa tugas pada instalasi. Ekstensi dapat menggunakan Storage API dan
IndexedDB untuk menyimpan status aplikasi. Namun, dalam kasus ini, karena kita hanya menangani dua status, kita akan menggunakan teks badge tindakan itu sendiri untuk melacak apakah ekstensi 'ON' atau tidak atau 'NONAKTIF'.
Langkah 3: Aktifkan tindakan ekstensi
Tindakan ekstensi mengontrol ikon toolbar ekstensi. Jadi, setiap kali pengguna mengklik
, aplikasi 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 memberikan kemampuan sementara ekstensi untuk menjalankan kode
pada tab aktif. Alat ini juga memungkinkan akses ke properti sensitif
tab saat ini.
Izin ini diaktifkan saat pengguna memanggil ekstensi. Dalam hal ini, pengguna memanggil metode ekstensi dengan mengklik tindakan ekstensi.
💡 Apa saja interaksi pengguna lain 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 menjalankan ekstensi di
tab terfokus; dengan cara ini, akan
melindungi privasi pengguna. Manfaat lainnya adalah bahwa
memicu peringatan izin.
Untuk menggunakan izin "activeTab", tambahkan 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
. Selanjutnya, alat akan memeriksa status tab saat ini dan menyetel 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:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
Sisipkan atau hapus lembar gaya menggunakan Scripting API. Mulai paling lambat
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 sebagai ganti lembar gaya?
Ya. Anda dapat menggunakan scripting.executeScript() untuk memasukkan JavaScript.
Opsional: Tetapkan pintasan keyboard
Untuk bersenang-senang, tambahkan pintasan untuk mempermudah mengaktifkan atau menonaktifkan mode fokus. Tambahkan
"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(), jadi tidak ada tambahan
kode tertentu diperlukan.
Menguji apakah kode berfungsi
Pastikan struktur file project Anda terlihat seperti berikut:
Memuat ekstensi Anda secara lokal
Untuk memuat ekstensi yang belum dibuka dalam mode developer, ikuti langkah-langkah dalam 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.
Kodenya harus dimulai dari berikut ini:
Ubah menjadi:
🎯 Potensi peningkatan
Berdasarkan apa yang telah Anda pelajari hari ini, cobalah untuk menyelesaikan salah satu hal berikut:
- Koreksi 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 keterampilanmu dengan menyelesaikan tutorial di seri ini:
| Perluasan | Yang akan Anda pelajari |
|---|---|
| Waktu membaca | Untuk menyisipkan elemen pada kumpulan halaman tertentu secara otomatis. |
| Pengelola Tab | Untuk membuat pop-up yang mengelola tab browser. |
Jelajahi lebih jauh
Kami harap Anda menikmati proses membangun ekstensi Chrome ini dan bersemangat untuk melanjutkan ekstensi Anda dalam perjalanan pembelajaran pengembangan aplikasi. Kami merekomendasikan jalur pembelajaran berikut:
- Panduan developer memiliki banyak 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 Chrome API akan memandu setiap API.