Deskripsi
Gunakan chrome.declarativeContent
API untuk mengambil tindakan yang bergantung pada konten halaman, tanpa memerlukan izin untuk membaca konten halaman.
Izin
declarativeContent
Penggunaan
Declarative Content API memungkinkan Anda mengaktifkan tindakan ekstensi bergantung pada URL halaman web, atau jika pemilih CSS cocok dengan elemen di halaman, tanpa perlu menambahkan izin host atau memasukkan skrip konten.
Gunakan izin activeTab untuk berinteraksi dengan halaman setelah pengguna mengklik tindakan ekstensi.
Aturan
Aturan terdiri dari kondisi dan tindakan. Jika salah satu kondisi terpenuhi, semua tindakan
akan dijalankan. Tindakannya adalah setIcon
dan showAction
.
PageStateMatcher
cocok dengan halaman web jika dan hanya jika semua kriteria yang tercantum terpenuhi. Kolom ini dapat cocok dengan URL halaman, pemilih gabungan CSS, atau status bookmark halaman. Aturan berikut memungkinkan tindakan ekstensi di halaman Google jika kolom sandi ada:
let rule1 = {
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
css: ["input[type='password']"]
})
],
actions: [ new chrome.declarativeContent.ShowAction() ]
};
Guna mengaktifkan tindakan ekstensi untuk situs Google dengan video, Anda juga dapat menambahkan kondisi kedua, karena setiap kondisi cukup untuk memicu semua tindakan yang ditentukan:
let rule2 = {
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
css: ["input[type='password']"]
}),
new chrome.declarativeContent.PageStateMatcher({
css: ["video"]
})
],
actions: [ new chrome.declarativeContent.ShowAction() ]
};
Peristiwa onPageChanged
menguji apakah ada aturan yang memiliki setidaknya satu kondisi yang terpenuhi dan menjalankan tindakan tersebut. Aturan tetap ada di seluruh sesi penjelajahan; oleh karena itu, selama
waktu penginstalan ekstensi, Anda harus terlebih dahulu menggunakan removeRules
untuk menghapus
aturan yang diinstal sebelumnya, lalu menggunakan addRules
untuk mendaftarkan aturan baru.
chrome.runtime.onInstalled.addListener(function(details) {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([rule2]);
});
});
Dengan izin activeTab, ekstensi Anda tidak akan menampilkan peringatan izin apa pun dan saat pengguna mengklik tindakan ekstensi, ekstensi hanya akan berjalan di halaman yang relevan.
Pencocokan URL Halaman
PageStateMatcher.pageurl
cocok saat kriteria URL terpenuhi. Kriteria
yang paling umum adalah penyambungan dari host, jalur, atau URL, yang diikuti dengan Berisi, Sama dengan, Awalan, atau
Akhiran. Tabel berikut berisi beberapa contoh:
Kriteria | Kecocokan |
---|---|
{ hostSuffix: 'google.com' } |
Semua URL Google |
{ pathPrefix: '/docs/extensions' } |
URL dokumen ekstensi |
{ urlContains: 'developer.chrome.com' } |
Semua URL dokumen developer Chrome |
Semua kriteria peka huruf besar/kecil. Untuk daftar lengkap kriteria, lihat UrlFilter.
Pencocokan CSS
Kondisi PageStateMatcher.css
harus berupa pemilih gabungan,
yang berarti Anda tidak dapat menyertakan kombinator seperti spasi kosong atau ">
" di
pemilih Anda. Hal ini membantu Chrome mencocokkan pemilih secara lebih efisien.
Pemilih Gabungan (Oke) | Pemilih Kompleks (Tidak Oke) |
---|---|
a |
div p |
iframe.special[src^='http'] |
p>span.highlight |
ns|* |
p + ol |
#abcd:checked |
p::first-line |
Kondisi CSS hanya cocok dengan elemen yang ditampilkan: jika elemen yang cocok dengan pemilih Anda adalah
display:none
atau salah satu elemen induknya adalah display:none
, hal ini tidak menyebabkan kondisi cocok. Elemen yang diberi gaya dengan visibility:hidden
, diposisikan di luar layar, atau disembunyikan oleh elemen lain
masih dapat membuat kondisi Anda cocok.
Pencocokan Status yang Di-bookmark
Kondisi PageStateMatcher.isBookmarked
memungkinkan pencocokan
status URL saat ini yang diberi bookmark di profil pengguna. Untuk memanfaatkan kondisi ini,
izin "bookmark" harus dideklarasikan dalam manifes ekstensi.
Jenis
ImageDataType
Lihat https://developer.mozilla.org/en-US/docs/Web/API/ImageData.
Jenis
ImageData
PageStateMatcher
Mencocokkan status halaman web berdasarkan berbagai kriteria.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:(arg: PageStateMatcher) => {...}
-
arg
-
akan menampilkan
-
-
css
string[] opsional
Mencocokkan jika semua pemilih CSS dalam array cocok dengan elemen yang ditampilkan dalam sebuah bingkai dengan asal yang sama dengan bingkai utama halaman. Semua pemilih dalam array ini harus berupa pemilih gabungan untuk mempercepat pencocokan. Catatan: Mencantumkan ratusan pemilih CSS atau mencantumkan pemilih CSS yang cocok ratusan kali per halaman dapat memperlambat situs.
-
isBookmarked
boolean opsional
Chrome 45+Cocok jika status halaman yang di-bookmark sama dengan nilai yang ditentukan. Memerlukan izin bookmark.
-
pageUrl
UrlFilter opsional
Cocok jika kondisi
UrlFilter
terpenuhi untuk URL level teratas halaman.
RequestContentScript
Tindakan peristiwa deklaratif yang memasukkan skrip konten.
PERINGATAN: Tindakan ini masih bersifat eksperimental dan tidak didukung pada build Chrome yang stabil.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:(arg: RequestContentScript) => {...}
-
akan menampilkan
-
-
allFrames
boolean opsional
Apakah skrip konten berjalan di semua frame halaman yang cocok, atau hanya di frame atas. Default-nya adalah
false
. -
css
string[] opsional
Nama file CSS yang akan dimasukkan sebagai bagian dari skrip konten.
-
js
string[] opsional
Nama file JavaScript yang akan dimasukkan sebagai bagian dari skrip konten.
-
matchAboutBlank
boolean opsional
Apakah akan menyisipkan skrip konten di
about:blank
danabout:srcdoc
. Jumlah defaultnya adalahfalse
SetIcon
Tindakan peristiwa deklaratif yang menetapkan ikon persegi n-dip untuk tindakan halaman atau tindakan browser ekstensi saat kondisi yang sesuai terpenuhi. Tindakan ini dapat digunakan tanpa izin host, tetapi ekstensi harus memiliki tindakan halaman atau browser.
Tepat satu dari imageData
atau path
harus ditentukan. Keduanya adalah kamus yang memetakan jumlah {i>pixel<i} untuk sebuah representasi gambar. Representasi gambar di imageData
adalah objek ImageData; misalnya, dari elemen canvas
, sedangkan representasi gambar di path
adalah jalur ke file gambar yang relatif terhadap manifes ekstensi. Jika scale
piksel layar sesuai dengan piksel yang tidak bergantung pada perangkat, ikon scale * n
akan digunakan. Jika skala tersebut tidak ada, gambar lain akan diubah ukurannya ke ukuran yang diperlukan.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:(arg: SetIcon) => {...}
-
arg
-
akan menampilkan
-
-
imageData
ImageData | objek opsional
Objek
ImageData
atau kamus {size -> ImageData} yang mewakili ikon yang akan ditetapkan. Jika ikon ditetapkan sebagai kamus, gambar yang digunakan akan dipilih bergantung pada kepadatan piksel layar. Jika jumlah piksel gambar yang sesuai dengan satu unit ruang layar sama denganscale
, gambar dengan ukuranscale * n
akan dipilih dan n adalah ukuran ikon di UI. Minimal satu gambar harus ditentukan. Perhatikan bahwadetails.imageData = foo
setara dengandetails.imageData = {'16': foo}
.
ShowAction
Tindakan peristiwa deklaratif yang menetapkan tindakan toolbar ekstensi ke status aktif saat kondisi yang sesuai terpenuhi. Tindakan ini dapat digunakan tanpa izin host. Jika ekstensi memiliki izin activeTab, mengklik tindakan halaman akan memberikan akses ke tab aktif.
Di halaman yang kondisinya tidak terpenuhi, tindakan toolbar ekstensi akan berwarna abu-abu, dan mengkliknya akan membuka menu konteks, bukan memicu tindakan.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:(arg: ShowAction) => {...}
-
arg
-
akan menampilkan
-
ShowPageAction
Gunakan declarativeContent.ShowAction
.
Tindakan peristiwa deklaratif yang menetapkan tindakan halaman ekstensi ke status aktif saat kondisi yang sesuai terpenuhi. Tindakan ini dapat digunakan tanpa izin host, tetapi ekstensi harus memiliki tindakan halaman. Jika ekstensi memiliki izin activeTab, mengklik tindakan halaman akan memberikan akses ke tab aktif.
Di halaman yang kondisinya tidak terpenuhi, tindakan toolbar ekstensi akan berwarna abu-abu, dan mengkliknya akan membuka menu konteks, bukan memicu tindakan.
Properti
-
konstruktor
void
Fungsi
constructor
terlihat seperti:(arg: ShowPageAction) => {...}
-
arg
-
akan menampilkan
-
Acara
onPageChanged
Menyediakan Declarative Event API yang terdiri dari addRules
, removeRules
, dan getRules
.