İçerik komut dosyaları "yalıtılmış bir dünya" ortamında yürütülür . state()Yönteminizi sayfanın kendisine enjekte etmeniz gerekir .
chrome.*Koddaki API'lardan birini kullanmak istediğinizde , şu cevapta açıklandığı gibi özel bir olay işleyici uygulamanız gerekir: Chrome uzantısı - Gmail'in orijinal iletisini alma .
Aksi takdirde, chrome.*API'ları kullanmak zorunda değilseniz , bir JS ekleyerek sayfadaki tüm JS kodunuzu eklemenizi önemle tavsiye ederim <script>:
İçindekiler
- Yöntem 1: Başka bir dosya enjekte
- Yöntem 2: Gömülü kod enjekte
- Yöntem 2b: Bir işlev kullanma
- Yöntem 3: Satır içi bir olay kullanma
- Enjekte edilen koddaki dinamik değerler
Yöntem 1: Başka bir dosya enjekte
Bu, çok sayıda kodunuz olduğunda en kolay / en iyi yöntemdir. Örneğin, gerçek JS kodunuzu uzantınızdaki bir dosyaya ekleyin script.js. Ardından içerik komut dosyanızın aşağıdaki gibi olmasına izin verin (burada açıklanmıştır: Google Chome “Uygulama Kısayolu” Özel Javascript ):
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);
Not: Bu yöntemi kullanırsanız, enjekte edilen script.jsdosya "web_accessible_resources"bölüme eklenmelidir ( örnek ). Bunu yapmazsanız Chrome, komut dosyanızı yüklemeyi reddeder ve konsolda aşağıdaki hatayı görüntüler:
Krom uzantısının yüklenmesini reddetme: // [EXTENSIONID] /script.js. Uzantı dışındaki sayfalar tarafından yüklenebilmesi için kaynakların web_accessible_resources manifest anahtarında listelenmesi gerekir.
Yöntem 2: Gömülü kod enjekte
Bu yöntem, küçük bir kod parçasını hızlı bir şekilde çalıştırmak istediğinizde kullanışlıdır. (Ayrıca bkz: Chrome uzantısına sahip facebook kısayol tuşlarını nasıl devre dışı bırakabilirim? ).
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();
Not: şablon değişmez değerleri yalnızca Chrome 41 ve sonraki sürümlerinde desteklenir. Uzantının Chrome 40- ile çalışmasını istiyorsanız şunu kullanın:
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');
Yöntem 2b: Bir işlev kullanma
Büyük bir kod grubu için, dizeden alıntı yapmak mümkün değildir. Bir dizi kullanmak yerine, bir işlev kullanılabilir ve dizilebilir:
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();
Bu yöntem çalışır, çünkü +dizelerdeki işleç ve bir işlev tüm nesneleri bir dizeye dönüştürür. Kodu birden çok kez kullanmayı düşünüyorsanız, kod tekrarını önlemek için bir işlev oluşturmak akıllıca olacaktır. Bir uygulama şöyle görünebilir:
function injectScript(func) {
var actualCode = '(' + func + ')();'
...
}
injectScript(function() {
alert("Injected script");
});
Not: İşlev serileştirildiğinden, orijinal kapsam ve tüm bağlı özellikler kaybolur!
var scriptToInject = function() {
console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output: "undefined"
Yöntem 3: Satır içi bir olay kullanma
Bazen hemen bir kod çalıştırmak, örneğin <head>eleman oluşturulmadan önce bir kod çalıştırmak istersiniz . Bu, bir <script>etiket eklenerek yapılabilir textContent(bkz. Yöntem 2 / 2b).
Alternatif ancak önerilmeyen satır içi olayları kullanmaktır. Sayfa satır içi komut dosyalarını yasaklayan bir İçerik Güvenliği ilkesi tanımlarsa satır içi olay dinleyicileri engellenir. Öte yandan, uzantı tarafından enjekte edilen satır içi komut dosyaları hala çalışır. Hâlâ satır içi etkinlikleri kullanmak istiyorsanız, şu şekilde:
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, resetolayı işleyen başka küresel olay dinleyicisi olmadığını varsayar . Varsa, diğer küresel olaylardan birini de seçebilirsiniz. JavaScript konsolunu (F12) açın, yazın document.documentElement.onve mevcut etkinlikleri seçin.
Enjekte edilen koddaki dinamik değerler
Bazen, enjekte edilen işleve rasgele bir değişken iletmeniz gerekir. Örneğin:
var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
alert(GREETING + NAME);
};
Bu kodu enjekte etmek için değişkenleri anonim işleve bağımsız değişken olarak geçirmeniz gerekir. Doğru şekilde uyguladığınızdan emin olun! Aşağıdaki olacak değil çalışır:
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, JSON.stringifyargümanı geçmeden önce kullanmaktır . Misal:
var actualCode = '(' + function(greeting, name) { ...
} + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')';
Çok sayıda değişkeniniz varsa JSON.stringify, okunabilirliği artırmak için aşağıdaki gibi bir kez kullanılmaya değer :
...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';
player.addEventListener("onStateChange", state);