Estou aprendendo a criar extensões do Chrome. Comecei a desenvolver um para capturar eventos do YouTube. Quero usá-lo com o YouTube Flash Player (mais tarde tentarei torná-lo compatível com 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!");

O problema é que o console me dá o "Iniciado!" , mas não há "Estado alterado!" quando reproduzo / pausa vídeos do YouTube.

Quando esse código é colocado no console, ele funcionou. O que estou fazendo errado?

Os scripts de conteúdo são executados em um ambiente de "mundo isolado" . Você precisa injetar seu state()método na própria página.

Quando você deseja usar uma das chrome.*APIs no script, precisa implementar um manipulador de eventos especial, conforme descrito nesta resposta: Extensão do Chrome - recuperando a mensagem original do Gmail .

Caso contrário, se você não precisar usar chrome.*APIs, recomendo injetar todo o seu código JS na página adicionando uma <script>tag:

Índice

• Método 1: Injetar outro arquivo
• Método 2: injetar código incorporado
• Método 2b: usando uma função
• Método 3: usando um evento embutido
• Valores dinâmicos no código injetado

Método 1: Injetar outro arquivo

Este é o método mais fácil / melhor quando você tem muito código. Inclua seu código JS real em um arquivo na sua extensão, digamos script.js. Em seguida, deixe o seu script de conteúdo da seguinte maneira (explicado aqui: Javascript personalizado do "Google Shortcut" do Google Chome ):

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

Nota: Se você usar esse método, o script.jsarquivo injetado deverá ser adicionado à "web_accessible_resources"seção ( exemplo ). Caso contrário, o Chrome se recusará a carregar seu script e exibirá o seguinte erro no console:

Negando a carga da extensão chrome: // [EXTENSIONID] /script.js. Os recursos devem ser listados na chave do manifesto web_accessible_resources para serem carregados por páginas fora da extensão.

Método 2: injetar código incorporado

Esse método é útil quando você deseja executar rapidamente um pequeno pedaço de código. (Veja também: Como desativar as teclas de atalho do facebook com a extensão do 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();

Nota: os literais de modelo são suportados apenas no Chrome 41 e superior. Se você deseja que a extensão funcione no Chrome 40-, use:

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

Método 2b: usando uma função

Para um grande pedaço de código, não é possível citar a string. Em vez de usar uma matriz, uma função pode ser usada e stringificada:

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

Este método funciona, porque o +operador em cadeias e uma função converte todos os objetos em uma cadeia. Se você pretende usar o código mais de uma vez, é aconselhável criar uma função para evitar a repetição do código. Uma implementação pode se parecer com:

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

Nota: Como a função é serializada, o escopo original e todas as propriedades associadas são perdidas!

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

Método 3: usando um evento embutido

Às vezes, você deseja executar algum código imediatamente, por exemplo, para executar um código antes que o <head>elemento seja criado. Isso pode ser feito inserindo uma <script>etiqueta com textContent(consulte o método 2 / 2b).

Uma alternativa, mas não recomendada, é usar eventos embutidos. Não é recomendado porque, se a página definir uma política de Segurança de Conteúdo que proíba scripts embutidos, os ouvintes de eventos embutidos serão bloqueados. Os scripts embutidos injetados pela extensão, por outro lado, ainda são executados. Se você ainda deseja usar eventos embutidos, é assim:

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

Nota: Este método assume que não há outros ouvintes de eventos globais que manipulam o resetevento. Se houver, você também pode escolher um dos outros eventos globais. Basta abrir o console do JavaScript (F12), digitar document.documentElement.one escolher os eventos disponíveis.

Valores dinâmicos no código injetado

Ocasionalmente, você precisa passar uma variável arbitrária para a função injetada. Por exemplo:

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

Para injetar esse código, você precisa passar as variáveis ​​como argumentos para a função anônima. Certifique-se de implementá-lo corretamente! O seguinte não funcionará:

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!

A solução é usar JSON.stringifyantes de passar o argumento. Exemplo:

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

Se você tiver muitas variáveis, vale a pena usar JSON.stringifyuma vez, para melhorar a legibilidade, da seguinte maneira:

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

A única coisa ausência de Oculto da excelente resposta de Rob W é como se comunicar entre o script da página injetado e o script de conteúdo.

No lado do recebimento (seu script de conteúdo ou o script da página injetada), adicione um ouvinte de evento:

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

No lado do iniciador (script de conteúdo ou script de página injetado), envie o evento:

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

Notas:

• O sistema de mensagens DOM usa o algoritmo de clonagem estruturado, que pode transferir apenas alguns tipos de dados , além dos valores primitivos. Ele não pode enviar instâncias de classe, funções ou elementos DOM.

• No Firefox, para enviar um objeto (ou seja, não um valor primitivo) do script de conteúdo para o contexto da página, é necessário cloná-lo explicitamente no destino usando cloneInto(uma função interna), caso contrário, ocorrerá um erro de violação de segurança .

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

Também enfrentei o problema de ordenar scripts carregados, que foi resolvido através do carregamento sequencial de scripts. O carregamento é baseada na resposta de 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();
    }
}

O exemplo de uso seria:

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")
]);

Na verdade, sou um pouco iniciante no JS, então fique à vontade para me dar um ping nas melhores maneiras.

no script de conteúdo, adiciono uma tag de script à cabeça que liga um manipulador 'onmessage', dentro do manipulador que eu uso, eval para executar o código. No script de conteúdo do estande, também uso o manipulador onmessage, para obter uma comunicação bidirecional. Documentos do Chrome

//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 é um ouvinte de URL de postagem

//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");

Dessa forma, posso ter uma comunicação bidirecional entre o CS e o Real Dom. É muito útil, por exemplo, se você precisar ouvir eventos do webscoket ou qualquer variável ou evento da memória.

Você pode usar uma função de utilitário que eu criei com a finalidade de executar código no contexto da página e recuperar o valor retornado.

Isso é feito serializando uma função em uma string e injetando-a na página da web.

O utilitário está disponível aqui no GitHub .

Exemplos de uso -

// 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'

Se você deseja injetar função pura, em vez de texto, você pode usar este método:

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

E você pode passar parâmetros (infelizmente, nenhum objeto e matriz pode ser especificado) para as funções. Adicione-o nos baretheses, assim:

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+")";