Deskripsi
Gunakan chrome.pageAction
API untuk menempatkan ikon di toolbar utama Google Chrome, di sebelah kanan kolom URL. Tindakan halaman mewakili tindakan yang dapat dilakukan di halaman saat ini, tetapi tidak berlaku untuk semua halaman. Tindakan halaman muncul dalam warna abu-abu saat tidak aktif.
Ketersediaan
Beberapa contoh:
- Berlangganan feed RSS halaman ini
- Buat slideshow dari foto halaman ini
Ikon RSS dalam screenshot berikut mewakili tindakan halaman yang memungkinkan Anda berlangganan feed RSS untuk halaman saat ini.
Tindakan halaman tersembunyi terlihat berwarna abu-abu. Misalnya, feed RSS di bawah ini berwarna abu-abu, karena Anda tidak dapat berlangganan feed untuk halaman saat ini:
Sebaiknya gunakan tindakan browser, sehingga pengguna selalu dapat berinteraksi dengan ekstensi Anda.
Manifes
Daftarkan tindakan halaman Anda dalam manifes ekstensi seperti ini:
{
"name": "My extension",
...
"page_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
Karena perangkat dengan faktor skala yang kurang umum seperti 1,5x atau 1,2x menjadi lebih umum, Anda dianjurkan untuk menyediakan beberapa ukuran ikon. Chrome akan memilih yang terdekat dan menskalakannya untuk mengisi ruang 16 derajat. Hal ini juga memastikan bahwa jika ukuran tampilan ikon diubah, Anda tidak perlu melakukan pekerjaan lagi untuk menyediakan ikon yang berbeda. Namun, jika perbedaan ukuran terlalu ekstrem, penskalaan ini dapat menyebabkan ikon kehilangan detail atau terlihat tidak jelas.
Sintaksis lama untuk mendaftarkan ikon default masih didukung:
{
"name": "My extension",
...
"page_action": {
...
"default_icon": "images/icon32.png" // optional
// equivalent to "default_icon": { "32": "images/icon32.png" }
},
...
}
Bagian-bagian UI
Seperti tindakan browser, tindakan halaman dapat memiliki ikon, tooltip, dan pop-up; tetapi tidak dapat memiliki badge. Selain itu, tindakan halaman dapat berwarna abu-abu. Anda dapat menemukan informasi tentang ikon, tooltip, dan pop-up dengan membaca UI tindakan browser.
Anda membuat tindakan halaman muncul dan berwarna abu-abu menggunakan metode pageAction.show
dan
pageAction.hide
. Secara default, tindakan halaman berwarna abu-abu. Saat
menampilkannya, Anda menentukan tab tempat ikon akan muncul. Ikon akan tetap terlihat hingga tab ditutup atau mulai menampilkan URL lain (misalnya, karena pengguna mengklik link).
Tips
Untuk memberikan dampak visual terbaik, ikuti panduan berikut:
- Gunakan tindakan halaman untuk fitur yang hanya relevan untuk beberapa halaman.
- Jangan gunakan tindakan halaman untuk fitur yang masuk akal bagi sebagian besar halaman. Sebagai gantinya, gunakan tindakan browser.
- Jangan terus-menerus menganimasikan ikon Anda. Merepotkan.
Jenis
ImageDataType
Data piksel untuk gambar. Harus berupa objek ImageData (misalnya, dari elemen canvas
).
Jenis
ImageData
TabDetails
Properti
-
tabId
nomor opsional
ID tab untuk status kueri. Jika tidak ada tab yang ditentukan, status non-khusus tab akan ditampilkan.
Metode
getPopup()
chrome.pageAction.getPopup(
details: TabDetails,
callback?: function,
)
Mendapatkan dokumen HTML yang ditetapkan sebagai pop-up untuk tindakan halaman ini.
Parameter
-
detail
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:(result: string) => void
-
hasil
string
-
Hasil
-
Promise<string>
Chrome 101+Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.
getTitle()
chrome.pageAction.getTitle(
details: TabDetails,
callback?: function,
)
Mendapatkan judul tindakan halaman.
Parameter
-
detail
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:(result: string) => void
-
hasil
string
-
Hasil
-
Promise<string>
Chrome 101+Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.
hide()
chrome.pageAction.hide(
tabId: number,
callback?: function,
)
Menyembunyikan tindakan halaman. Tindakan halaman tersembunyi tetap muncul di toolbar Chrome, tetapi berwarna abu-abu.
Parameter
-
tabId
angka
ID tab yang tindakan halamannya ingin Anda ubah.
-
callback
fungsi opsional
Chrome 67 dan yang lebih baruParameter
callback
terlihat seperti:() => void
Hasil
-
Promise<void>
Chrome 101+Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.
setIcon()
chrome.pageAction.setIcon(
details: object,
callback?: function,
)
Menetapkan ikon untuk tindakan halaman. Ikon dapat ditetapkan sebagai jalur ke file gambar atau sebagai data piksel dari elemen kanvas, atau sebagai kamus untuk salah satu dari ikon tersebut. Properti path atau imageData harus ditentukan.
Parameter
-
detail
objek
-
iconIndex
nomor opsional
Tidak digunakan lagi. Argumen ini diabaikan.
-
imageData
ImageData | objek opsional
Objek ImageData atau kamus {size -> ImageData} yang mewakili ikon yang akan disetel. Jika ikon ditetapkan sebagai kamus, gambar sebenarnya yang akan digunakan akan dipilih, bergantung pada kepadatan piksel layar. Jika jumlah piksel gambar yang sesuai dengan satu unit ruang layar sama dengan
scale
, maka gambar dengan ukuranscale
* n akan dipilih, dengan n adalah ukuran ikon di UI. Minimal satu gambar harus ditentukan. Perhatikan bahwa 'details.imageData = foo' setara dengan 'details.imageData = {'16': foo}' -
jalur
string | objek opsional
Baik jalur gambar relatif atau kamus {size -> relative image path} yang mengarah ke ikon yang akan ditetapkan. Jika ikon ditetapkan sebagai kamus, gambar sebenarnya yang akan digunakan akan dipilih, bergantung pada kepadatan piksel layar. Jika jumlah piksel gambar yang sesuai dengan satu unit ruang layar sama dengan
scale
, maka gambar dengan ukuranscale
* n akan dipilih, dengan n adalah ukuran ikon di UI. Minimal satu gambar harus ditentukan. Perhatikan bahwa 'details.path = foo' setara dengan 'details.path = {'16': foo}' -
tabId
angka
ID tab yang tindakan halamannya ingin Anda ubah.
-
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:() => void
Hasil
-
Promise<void>
Chrome 101+Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.
setPopup()
chrome.pageAction.setPopup(
details: object,
callback?: function,
)
Menetapkan dokumen HTML yang akan dibuka sebagai pop-up saat pengguna mengklik ikon tindakan halaman.
Parameter
-
detail
objek
-
pop-up
string
Jalur relatif ke file HTML yang akan ditampilkan dalam pop-up. Jika ditetapkan ke string kosong (
''
), tidak ada pop-up yang ditampilkan. -
tabId
angka
ID tab yang tindakan halamannya ingin Anda ubah.
-
-
callback
fungsi opsional
Chrome 67 dan yang lebih baruParameter
callback
terlihat seperti:() => void
Hasil
-
Promise<void>
Chrome 101+Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.
setTitle()
chrome.pageAction.setTitle(
details: object,
callback?: function,
)
Menetapkan judul tindakan halaman. Ini ditampilkan dalam tooltip di atas tindakan halaman.
Parameter
-
detail
objek
-
tabId
angka
ID tab yang tindakan halamannya ingin Anda ubah.
-
title
string
String tooltip.
-
-
callback
fungsi opsional
Chrome 67 dan yang lebih baruParameter
callback
terlihat seperti:() => void
Hasil
-
Promise<void>
Chrome 101+Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.
show()
chrome.pageAction.show(
tabId: number,
callback?: function,
)
Menampilkan tindakan halaman. Tindakan halaman ditampilkan setiap kali tab dipilih.
Parameter
-
tabId
angka
ID tab yang tindakan halamannya ingin Anda ubah.
-
callback
fungsi opsional
Chrome 67 dan yang lebih baruParameter
callback
terlihat seperti:() => void
Hasil
-
Promise<void>
Chrome 101+Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.
Acara
onClicked
chrome.pageAction.onClicked.addListener(
callback: function,
)
Diaktifkan saat ikon tindakan halaman diklik. Peristiwa ini tidak akan diaktifkan jika tindakan halaman memiliki pop-up.