Saya sedang belajar cara membuat ekstensi Chrome. Saya baru saja mulai mengembangkan satu untuk menangkap acara YouTube. Saya ingin menggunakannya dengan pemutar flash YouTube (nanti saya akan mencoba membuatnya kompatibel dengan HTML5).

manifest.json:

{
    "name": "MyExtension",
    "version": "1.0",
    "description": "Gotta catch Youtube events!",
    "permissions": ["tabs", "http://*/*"],
    "content_scripts" : [{
        "matches" : [ "www.youtube.com/*"],
        "js" : ["myScript.js"]
    }]
}

myScript.js:

function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");

Masalahnya adalah konsol memberi saya "Memulai!" , tetapi tidak ada "Negara Berubah!" ketika saya memutar / menghentikan video YouTube.

Ketika kode ini diletakkan di konsol, itu berhasil. Apa yang saya lakukan salah?

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]) + ')';

Satu-satunya hilang tersembunyi dari jawaban sempurna Rob W adalah bagaimana berkomunikasi antara skrip halaman yang disuntikkan dan skrip konten.

Di sisi penerima (skrip konten Anda atau skrip halaman yang disuntikkan) tambahkan pendengar acara:

document.addEventListener('yourCustomEvent', function (e) {
  var data = e.detail;
  console.log('received', data);
});

Di sisi inisiator (skrip konten atau skrip halaman yang disuntikkan) kirim acara:

var data = {
  allowedTypes: 'those supported by structured cloning, see the list below',
  inShort: 'no DOM elements or classes/functions',
};

document.dispatchEvent(new CustomEvent('yourCustomEvent', { detail: data }));

Catatan:

• Olahpesan DOM menggunakan algoritma kloning terstruktur, yang dapat mentransfer hanya beberapa jenis data selain nilai-nilai primitif. Itu tidak bisa mengirim instance kelas atau fungsi atau elemen DOM.

• Di Firefox, untuk mengirim objek (yaitu bukan nilai primitif) dari skrip konten ke konteks halaman Anda harus mengkloningnya secara eksplisit ke dalam target menggunakan cloneInto(fungsi bawaan), jika tidak maka akan gagal dengan kesalahan pelanggaran keamanan .

  document.dispatchEvent(new CustomEvent('yourCustomEvent', {
    detail: cloneInto(data, document.defaultView),
  }));

Saya juga menghadapi masalah pemesanan skrip yang dimuat, yang diselesaikan melalui pemuatan skrip berurutan. Loading didasarkan pada jawaban Rob W .

function scriptFromFile(file) {
    var script = document.createElement("script");
    script.src = chrome.extension.getURL(file);
    return script;
}

function scriptFromSource(source) {
    var script = document.createElement("script");
    script.textContent = source;
    return script;
}

function inject(scripts) {
    if (scripts.length === 0)
        return;
    var otherScripts = scripts.slice(1);
    var script = scripts[0];
    var onload = function() {
        script.parentNode.removeChild(script);
        inject(otherScripts);
    };
    if (script.src != "") {
        script.onload = onload;
        document.head.appendChild(script);
    } else {
        document.head.appendChild(script);
        onload();
    }
}

Contoh penggunaannya adalah:

var formulaImageUrl = chrome.extension.getURL("formula.png");
var codeImageUrl = chrome.extension.getURL("code.png");

inject([
    scriptFromSource("var formulaImageUrl = '" + formulaImageUrl + "';"),
    scriptFromSource("var codeImageUrl = '" + codeImageUrl + "';"),
    scriptFromFile("EqEditor/eq_editor-lite-17.js"),
    scriptFromFile("EqEditor/eq_config.js"),
    scriptFromFile("highlight/highlight.pack.js"),
    scriptFromFile("injected.js")
]);

Sebenarnya, saya agak baru di JS, jadi silakan ping saya ke cara yang lebih baik.

dalam skrip Konten, saya menambahkan tag skrip ke kepala yang mengikat penangan 'onmessage', di dalam penangan yang saya gunakan, eval untuk mengeksekusi kode. Dalam skrip konten stan saya menggunakan onmessage handler juga, jadi saya mendapatkan komunikasi dua arah. Chrome Documents

//Content Script

var pmsgUrl = chrome.extension.getURL('pmListener.js');
$("head").first().append("<script src='"+pmsgUrl+"' type='text/javascript'></script>");


//Listening to messages from DOM
window.addEventListener("message", function(event) {
  console.log('CS :: message in from DOM', event);
  if(event.data.hasOwnProperty('cmdClient')) {
    var obj = JSON.parse(event.data.cmdClient);
    DoSomthingInContentScript(obj);
 }
});

pmListener.js adalah pendengar url pesan posting

//pmListener.js

//Listen to messages from Content Script and Execute Them
window.addEventListener("message", function (msg) {
  console.log("im in REAL DOM");
  if (msg.data.cmnd) {
    eval(msg.data.cmnd);
  }
});

console.log("injected To Real Dom");

Dengan cara ini, saya dapat memiliki komunikasi 2 arah antara CS ke Real Dom. Ini sangat berguna misalnya jika Anda perlu mendengarkan acara webscoket, atau variabel memori atau acara.

Anda dapat menggunakan fungsi utilitas yang saya buat untuk menjalankan kode dalam konteks halaman dan mendapatkan kembali nilai yang dikembalikan.

Ini dilakukan dengan membuat serial suatu fungsi ke string dan menyuntikkannya ke halaman web.

Utilitas tersedia di sini di GitHub .

Contoh penggunaan -

// Some code that exists only in the page context -
window.someProperty = 'property';
function someFunction(name = 'test') {
    return new Promise(res => setTimeout(()=>res('resolved ' + name), 1200));
}
/////////////////

// Content script examples -

await runInPageContext(() => someProperty); // returns 'property'

await runInPageContext(() => someFunction()); // returns 'resolved test'

await runInPageContext(async (name) => someFunction(name), 'with name' ); // 'resolved with name'

await runInPageContext(async (...args) => someFunction(...args), 'with spread operator and rest parameters' ); // returns 'resolved with spread operator and rest parameters'

await runInPageContext({
    func: (name) => someFunction(name),
    args: ['with params object'],
    doc: document,
    timeout: 10000
} ); // returns 'resolved with params object'

Jika Anda ingin menyuntikkan fungsi murni, alih-alih teks, Anda dapat menggunakan metode ini:

function inject(){
    document.body.style.backgroundColor = 'blue';
}

// this includes the function as text and the barentheses make it run itself.
var actualCode = "("+inject+")()"; 

document.documentElement.setAttribute('onreset', actualCode);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');

Dan Anda dapat melewatkan parameter (sayangnya tidak ada objek dan array yang dapat dikompresi) ke fungsi. Tambahkan ke dalam baretese, seperti:

function inject(color){
    document.body.style.backgroundColor = color;
}

// this includes the function as text and the barentheses make it run itself.
var color = 'yellow';
var actualCode = "("+inject+")("+color+")";