Chrome uzantıları oluşturmak için nasıl öğreniyorum ve ben sadece youtube olayları yakalamak için bir geliştirmeye başladı. Youtube flash player (daha sonra html5 ile uyumlu hale getirmek için çalışacağız) ile kullanmak istiyorum.

apaçık.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!");

Sorun konsol bana verir"Başladı!"ama yok"Devlet Değişti!"ben oynarken/YouTube videoları duraklatma.

Bu kodu konsolda, işe yaradı. Neyi yanlış yapıyorum?

İçerik komut isolated environment bir gerçekleşiyor. Sayfa state yöntemi enjekte kendisi var.

Script chrome.* API kullanmak isteyen varsa, özel olay işleyicisi uygulamak için, bu cevap anlatıldığı gibi: Chrome extension - retrieving Gmail's original message.

Eğer chrome.* API kullanmak zorunda. Eğer yoksa, ben kesinlikle <script> dinamik etiketi ile sayfa içinde JS kodu enjekte etmek için tavsiye:

İçindekiler

• Yöntem 1: başka bir dosya Enjekte
• Yöntem 2: gömülü kod Enjekte
• Yöntem 2b: fonksiyon Kullanma
• Yöntem 3: satır içi Kullanarak bir olay
• Enjekte edilen kod dinamik bir değer

Yöntem 1: başka bir dosya Enjekte

Bu çok fazla kod varsa en kolay/en iyi yöntemdir.Bir dosya içinde gerçek JS kodu vardır, ki script.js. Sonra içerik komut dosyası (burada açıkladı: Google Chome “Application Shortcut” Custom Javascript) aşağıdaki gibi olsun:

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

Eğer bu yöntemi kullanırsanız, script.js enjekte edilen dosya "web_accessible_resources" bölümüne eklenmelidir . not: (example). Olmadan, Kromreddediyorumsenaryonu yük ve konsolda: aşağıdaki hata görüntüler

Krom-uzatma://yük[EXTENSİONID] inkar script.js/. Kaynaklar uzantısı dışında sayfaları ile dolu olmak için web_accessible_resources apaçık anahtarı girilmelidir.

Yöntem 2: gömülü kod Enjekte

Bu yöntem, hızlı bir şekilde kod küçük bir parça çalıştırmak istediğinizde kullanışlıdır. (Ayrıca bakınız: How to disable facebook hotkeys with Chrome extension?).

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

var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

Yöntem 2b: fonksiyon Kullanma

Kod büyük bir yığın için, dize alıntı mümkün değildir. Bir dizi kullanmak yerine, bir fonksiyon kullanılabilir, ve stringified:

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.parentNode.removeChild(script);

Bu yöntem dizeleri ve fonksiyonu operatörü bir dize için tüm nesneleri dönüştürür çünkü çalışır. Eğer bu kod birden çok kez kullanmayı planlıyorsanız, bilge kod tekrarını önlemek için bir işlevi oluşturmak için. Bir uygulama gibi görünebilir:

function injectScript(func) {
    var actualCode = '('   func   ')();'
    ...
}
injectScript(function() {
   alert("Injected script");
});

Not: bu işlev, orijinal kapsamı sıralanmış olduğundan ve bağlı özellikleri kaybolur.

var scriptToInject = function() {
    console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output:  "undefined"

Yöntem 3: satır içi Kullanarak bir olay

Bazen, bazı kod hemen çalıştırmak istediğiniz, örneğin, bazı kod çalıştırmak için <head> öğesi oluşturulur önce. "Eşzamanlı olarak" JavaScript satır içi olay dinleyici kullanarak yürütmek. Dizeleri önceki yöntem ile aynı şekilde oluşturulur, kısalık, kod dizesi zaten actualCode olarak verilen (yöntem 2/2b) varsayıyorum.

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

Not: Bu yöntem diğer küresel olay yok varsayar reset olayı ele dinleyiciler. Eğer varsa, aynı zamanda diğer küresel olaylardan birini seçebilirsiniz. Sadece JavaScript açın (F12) konsol document.documentElement.on yazın ve mevcut olayları almak.

Enjekte edilen kod dinamik bir değer

Bazılarının sadece enjekte fonksiyonu için rasgele bir değişken geçmek gerekir. Örneğin:

var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
    alert(GREETING   NAME);
};

Bu kod enjekte anonim işlev için bağımsız değişkenler geçirmek gerekir. Emin doğru bir şekilde uygulamak! Aşağıdaki olacaktırdeğilçalışma:

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!

Çözüm bağımsız değişkeni geçirmeden önce JSON.stringify kullanmaktır. Örnek:

var actualCode = '('   function(greeting, name) { ...
}   ')('   JSON.stringify(GREETING)   ','   JSON.stringify(NAME)   ')';

Eğer çok fazla değişken varsa, JSON.stringify kullanmak için değerli bir keresinde şöyle: okunabilirliği artırmak için

...
}   ')('   JSON.stringify([arg1, arg2, arg3, arg4])   ')';