Skrip konten dieksekusi di lingkungan "dunia terisolasi" . Anda harus menyuntikkan state()metode Anda ke halaman itu sendiri.
Saat Anda ingin menggunakan salah satu chrome.*API dalam skrip, Anda harus menerapkan pengendali acara khusus, seperti yang dijelaskan dalam jawaban ini: Ekstensi Chrome - mengambil pesan asli Gmail .
Jika tidak, jika Anda tidak harus menggunakan chrome.*API, saya sangat menyarankan untuk menyuntikkan semua kode JS Anda di halaman melalui menambahkan <script>tag:
Daftar Isi
- Metode 1: Suntikkan file lain
- Metode 2: Suntikkan kode tertanam
- Metode 2b: Menggunakan fungsi
- Metode 3: Menggunakan acara inline
- Nilai dinamis dalam kode yang disuntikkan
Metode 1: Suntikkan file lain
Ini adalah metode termudah / terbaik ketika Anda memiliki banyak kode. Sertakan kode JS Anda yang sebenarnya dalam file dalam ekstensi Anda, katakanlah script.js. Kemudian biarkan skrip konten Anda sebagai berikut (dijelaskan di sini: Google Chome "Pintasan Aplikasi" Javascript Khusus ):
var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
Catatan: Jika Anda menggunakan metode ini, script.jsfile yang disuntikkan harus ditambahkan ke "web_accessible_resources"bagian ( contoh ). Jika tidak, Chrome akan menolak memuat skrip Anda dan menampilkan kesalahan berikut di konsol:
Menolak memuat ekstensi chrome: // [EXTENSIONID] /script.js. Sumber daya harus dicantumkan dalam kunci manifes web_accessible_resources agar dapat dimuat oleh halaman di luar ekstensi.
Metode 2: Suntikkan kode tertanam
Metode ini berguna ketika Anda ingin menjalankan sepotong kode dengan cepat. (Lihat juga: Cara menonaktifkan hotkey facebook dengan ekstensi Chrome? ).
var actualCode = `// Code here.
// If you want to use a variable, use $ and curly braces.
// For example, to use a fixed random number:
var someFixedRandomValue = ${ Math.random() };
// NOTE: Do not insert unsafe variables in this way, see below
// at "Dynamic values in the injected code"
`;
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Catatan: literal templat hanya didukung di Chrome 41 dan di atasnya. Jika Anda ingin ekstensi berfungsi di Chrome 40-, gunakan:
var actualCode = ['/* Code here. Example: */' + 'alert(0);',
'// Beware! This array have to be joined',
'// using a newline. Otherwise, missing semicolons',
'// or single-line comments (//) will mess up your',
'// code ----->'].join('\n');
Metode 2b: Menggunakan fungsi
Untuk sejumlah besar kode, mengutip string tidak layak. Alih-alih menggunakan array, sebuah fungsi dapat digunakan, dan dirender:
var actualCode = '(' + function() {
// All code is executed in a local scope.
// For example, the following does NOT overwrite the global `alert` method
var alert = null;
// To overwrite a global variable, prefix `window`:
window.alert = null;
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Metode ini berfungsi, karena +operator pada string dan fungsi mengubah semua objek menjadi string. Jika Anda berniat menggunakan kode lebih dari sekali, sebaiknya buat fungsi untuk menghindari pengulangan kode. Suatu implementasi mungkin terlihat seperti:
function injectScript(func) {
var actualCode = '(' + func + ')();'
...
}
injectScript(function() {
alert("Injected script");
});
Catatan: Karena fungsi ini diserialisasi, ruang lingkup asli, dan semua properti terikat hilang!
var scriptToInject = function() {
console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output: "undefined"
Metode 3: Menggunakan acara inline
Terkadang, Anda ingin menjalankan beberapa kode segera, misalnya untuk menjalankan beberapa kode sebelum <head>elemen dibuat. Ini dapat dilakukan dengan memasukkan <script>tag dengan textContent(lihat metode 2 / 2b).
Alternatif, tetapi tidak disarankan adalah menggunakan acara inline. Tidak disarankan karena jika halaman menetapkan kebijakan Keamanan Konten yang melarang skrip inline, maka acara inline pendengar diblokir. Skrip sebaris yang disuntikkan oleh ekstensi, di sisi lain, masih berjalan. Jika Anda masih ingin menggunakan acara sebaris, ini caranya:
var actualCode = '// Some code example \n' +
'console.log(document.documentElement.outerHTML);';
document.documentElement.setAttribute('onreset', actualCode);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');
Catatan: Metode ini mengasumsikan bahwa tidak ada pendengar acara global lain yang menangani resetacara tersebut. Jika ada, Anda juga dapat memilih salah satu acara global lainnya. Cukup buka konsol JavaScript (F12), ketik document.documentElement.on, dan pilih dari acara yang tersedia.
Nilai dinamis dalam kode yang disuntikkan
Kadang-kadang, Anda harus meneruskan variabel arbitrer ke fungsi yang disuntikkan. Sebagai contoh:
var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
alert(GREETING + NAME);
};
Untuk menyuntikkan kode ini, Anda harus meneruskan variabel sebagai argumen ke fungsi anonim. Pastikan untuk menerapkannya dengan benar! Berikut ini tidak akan berfungsi:
var scriptToInject = function (GREETING, NAME) { ... };
var actualCode = '(' + scriptToInject + ')(' + GREETING + ',' + NAME + ')';
// The previous will work for numbers and booleans, but not strings.
// To see why, have a look at the resulting string:
var actualCode = "(function(GREETING, NAME) {...})(Hi, I'm ,Rob)";
// ^^^^^^^^ ^^^ No string literals!
Solusinya adalah menggunakan JSON.stringifysebelum melewati argumen. Contoh:
var actualCode = '(' + function(greeting, name) { ...
} + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')';
Jika Anda memiliki banyak variabel, sebaiknya gunakan JSON.stringifysekali, untuk meningkatkan keterbacaan, sebagai berikut:
...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';
player.addEventListener("onStateChange", state);