Deskripsi
Gunakan chrome.devtools.inspectedWindow
API untuk berinteraksi dengan jendela yang diperiksa: dapatkan ID tab untuk halaman yang diperiksa, evaluasi kode dalam konteks jendela yang diperiksa, muat ulang halaman, atau dapatkan daftar resource dalam halaman.
Manifes
Gunakan chrome.devtools.inspectedWindow
untuk berinteraksi dengan jendela yang diperiksa: dapatkan ID tab untuk
halaman yang diperiksa, evaluasi kode dalam konteks jendela yang diperiksa, muat ulang halaman, atau dapatkan
daftar resource dalam halaman.
Lihat ringkasan API DevTools untuk pengantar umum tentang cara menggunakan API Developer Tools.
Ringkasan
Properti tabId
menyediakan ID tab yang dapat Anda gunakan dengan panggilan API
chrome.tabs.*
. Namun, perlu diperhatikan bahwa chrome.tabs.*
API tidak diekspos ke halaman ekstensi Developer Tools
karena pertimbangan keamanan—Anda harus meneruskan ID tab ke halaman
latar belakang dan memanggil fungsi API chrome.tabs.*
dari sana.
Metode reload
dapat digunakan untuk memuat ulang halaman yang diperiksa. Selain itu, pemanggil dapat menentukan
penggantian untuk string agen pengguna, skrip yang akan dimasukkan lebih awal setelah halaman dimuat, atau
opsi untuk memaksa pemuatan ulang resource yang di-cache.
Gunakan panggilan getResources
dan peristiwa onResourceContent
untuk mendapatkan daftar resource (dokumen, stylesheet, skrip, gambar, dll.) dalam halaman yang diperiksa. Metode getContent
dan
setContent
dari class Resource
bersama dengan peristiwa onResourceContentCommitted
dapat
digunakan untuk mendukung modifikasi konten resource, misalnya, oleh editor eksternal.
Mengeksekusi Kode di Jendela yang Diperiksa
Metode eval
memberikan kemampuan bagi ekstensi untuk mengeksekusi kode JavaScript dalam konteks halaman yang diperiksa. Metode ini efektif jika digunakan dalam konteks yang tepat, dan berbahaya jika digunakan
tidak tepat. Gunakan metode tabs.executeScript
kecuali jika Anda memerlukan fungsionalitas tertentu
yang disediakan oleh metode eval
.
Berikut adalah perbedaan utama antara metode eval
dan tabs.executeScript
:
- Metode
eval
tidak menggunakan dunia yang terisolasi untuk kode yang dievaluasi, sehingga status JavaScript dari jendela yang diperiksa dapat diakses oleh kode. Gunakan metode ini saat akses ke status JavaScript halaman yang diperiksa diperlukan. - Konteks eksekusi kode yang dievaluasi mencakup API konsol Developer Tools.
Misalnya, kode dapat menggunakan
inspect
dan$0
. - Kode yang dievaluasi dapat menampilkan nilai yang diteruskan ke callback ekstensi. Nilai yang ditampilkan harus berupa objek JSON yang valid (nilai tersebut hanya dapat berisi jenis JavaScript primitif dan referensi asiklik ke objek JSON lainnya). Harap perhatikan saat memproses data yang diterima dari halaman yang diperiksa—konteks eksekusi pada dasarnya dikontrol oleh halaman yang diperiksa; halaman berbahaya dapat memengaruhi data yang ditampilkan ke ekstensi.
Perlu diketahui bahwa halaman bisa menyertakan beberapa konteks eksekusi JavaScript yang berbeda. Setiap frame memiliki konteksnya sendiri, plus konteks tambahan untuk setiap ekstensi yang memiliki skrip konten yang berjalan dalam frame tersebut.
Secara default, metode eval
dieksekusi dalam konteks frame utama halaman yang diperiksa.
Metode eval
mengambil argumen kedua opsional yang dapat Anda gunakan untuk menentukan konteks tempat
kode dievaluasi. Objek options ini dapat berisi satu atau beberapa kunci berikut:
frameURL
- Gunakan untuk menentukan frame selain frame utama halaman yang diperiksa.
contextSecurityOrigin
- Gunakan untuk memilih konteks dalam frame yang ditentukan sesuai dengan asal webnya.
useContentScriptContext
- Jika true (benar), jalankan skrip dalam konteks yang sama dengan skrip konten ekstensi. (Setara dengan menentukan asal web ekstensi itu sendiri sebagai asal keamanan konteks.) Ini dapat digunakan untuk bertukar data dengan skrip konten.
Contoh
Kode berikut memeriksa versi jQuery yang digunakan oleh halaman yang diperiksa:
chrome.devtools.inspectedWindow.eval(
"jQuery.fn.jquery",
function(result, isException) {
if (isException) {
console.log("the page is not using jQuery");
} else {
console.log("The page is using jQuery v" + result);
}
}
);
Untuk mencoba API ini, instal contoh API DevTools dari repositori chrome-extension-samples.
Jenis
Resource
Resource di halaman yang diperiksa, misalnya dokumen, skrip, atau gambar.
Properti
-
url
string
URL resource.
-
getContent
void
Mendapatkan konten resource.
Fungsi
getContent
terlihat seperti:(callback: function) => {...}
-
callback
fungsi
Parameter
callback
terlihat seperti:(content: string, encoding: string) => void
-
konten
string
Konten resource (kemungkinan dienkode).
-
encoding
string
Kosong jika konten tidak dienkode, nama encoding jika sebaliknya. Saat ini, hanya base64 yang didukung.
-
-
-
setContent
void
Menetapkan konten resource.
Fungsi
setContent
terlihat seperti:(content: string, commit: boolean, callback?: function) => {...}
-
konten
string
Konten baru untuk resource. Hanya resource dengan jenis teks yang saat ini didukung.
-
commit
boolean
Benar jika pengguna telah selesai mengedit resource, dan konten baru resource harus dipertahankan; salah jika ini adalah perubahan kecil yang dikirim saat pengguna mengedit resource.
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:(error?: object) => void
-
error
objek opsional
Disetel ke undefined (tidak ditentukan) jika konten resource berhasil disetel; menjelaskan error jika tidak.
-
-
Properti
tabId
ID tab yang sedang diperiksa. ID ini dapat digunakan dengan chrome.tabs.* API.
Jenis
angka
Metode
eval()
chrome.devtools.inspectedWindow.eval(
expression: string,
options?: object,
callback?: function,
)
Mengevaluasi ekspresi JavaScript dalam konteks frame utama halaman yang diperiksa. Ekspresi harus dievaluasi ke objek yang sesuai dengan JSON. Jika tidak, pengecualian akan ditampilkan. Fungsi evaluasi dapat melaporkan error sisi DevTools atau pengecualian JavaScript yang terjadi selama evaluasi. Dalam kedua kasus tersebut, parameter result
callback adalah undefined
. Dalam kasus error sisi DevTools, parameter isException
adalah non-null dan memiliki isError
yang disetel ke benar (true) dan code
disetel ke kode error. Jika terjadi error JavaScript, isException
disetel ke benar (true) dan value
disetel ke nilai string objek yang ditampilkan.
Parameter
-
ekspresi
string
Sebuah ekspresi yang akan dievaluasi.
-
opsi
objek opsional
Parameter opsi dapat berisi satu atau beberapa opsi.
-
frameURL
string opsional
Jika ditentukan, ekspresi dievaluasi di iframe yang URL-nya cocok dengan URL yang ditentukan. Secara default, ekspresi dievaluasi di bingkai atas halaman yang diperiksa.
-
scriptExecutionContext
string opsional
Chrome 107 dan yang lebih baruEvaluasi ekspresi dalam konteks skrip konten ekstensi yang cocok dengan origin yang ditentukan. Jika diberikan, scriptExecutionContext akan mengganti setelan 'true' pada useContentScriptContext.
-
useContentScriptContext
boolean opsional
Evaluasi ekspresi dalam konteks skrip konten ekstensi panggilan, asalkan skrip konten sudah dimasukkan ke halaman yang diperiksa. Jika tidak, ekspresi tidak dievaluasi dan callback akan dipanggil dengan parameter pengecualian yang disetel ke objek yang menyetel kolom
isError
ke benar (true) dan kolomcode
disetel keE_NOTFOUND
.
-
-
callback
fungsi opsional
Parameter
callback
terlihat seperti:(result: object, exceptionInfo: object) => void
-
hasil
objek
Hasil evaluasi.
-
exceptionInfo
objek
Objek yang memberikan detail jika pengecualian terjadi saat mengevaluasi ekspresi.
-
kode
string
Setel jika error terjadi di sisi DevTools sebelum ekspresi dievaluasi.
-
deskripsi
string
Setel jika error terjadi di sisi DevTools sebelum ekspresi dievaluasi.
-
detail
setiap[]
Setel jika terjadi error di sisi DevTools sebelum ekspresi dievaluasi, berisi array nilai yang dapat diganti ke dalam string deskripsi untuk memberikan informasi selengkapnya tentang penyebab error.
-
isError
boolean
Setel jika error terjadi di sisi DevTools sebelum ekspresi dievaluasi.
-
isException
boolean
Tetapkan jika kode yang dievaluasi menghasilkan pengecualian yang tidak tertangani.
-
value
string
Tetapkan jika kode yang dievaluasi menghasilkan pengecualian yang tidak tertangani.
-
-
getResources()
chrome.devtools.inspectedWindow.getResources(
callback: function,
)
Mengambil daftar resource dari halaman yang diperiksa.
Parameter
-
callback
fungsi
Parameter
callback
terlihat seperti:(resources: Resource[]) => void
-
referensi
Resource di dalam halaman.
-
reload()
chrome.devtools.inspectedWindow.reload(
reloadOptions?: object,
)
Muat ulang halaman yang diperiksa.
Parameter
-
reloadOptions
objek opsional
-
ignoreCache
boolean opsional
Jika true (benar), loader akan mengabaikan cache untuk semua resource halaman yang diperiksa dan dimuat sebelum peristiwa
load
diaktifkan. Efeknya mirip dengan menekan Ctrl+Shift+R di jendela yang diperiksa atau di dalam jendela Developer Tools. -
injectedScript
string opsional
Jika ditentukan, skrip akan dimasukkan ke setiap frame halaman yang diperiksa segera setelah dimuat, sebelum skrip frame mana pun. Skrip tidak akan dimasukkan setelah pemuatan ulang berikutnya—misalnya, jika pengguna menekan Ctrl+R.
-
userAgent
string opsional
Jika ditentukan, string akan mengganti nilai header HTTP
User-Agent
yang dikirim saat memuat resource halaman yang diperiksa. String ini juga akan mengganti nilai propertinavigator.userAgent
yang ditampilkan ke skrip apa pun yang berjalan di halaman yang diperiksa.
-
Peristiwa
onResourceAdded
chrome.devtools.inspectedWindow.onResourceAdded.addListener(
callback: function,
)
Diaktifkan saat resource baru ditambahkan ke halaman yang diperiksa.
Parameter
-
callback
fungsi
Parameter
callback
terlihat seperti:(resource: Resource) => void
-
resource
-
onResourceContentCommitted
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
callback: function,
)
Diaktifkan saat revisi baru resource di-commit (misalnya, pengguna menyimpan versi resource yang telah diedit di Developer Tools).