Utilizza l'estensione di Chrome per modificare la pagina dei risultati di ricerca di Google

Question

Voglio fare un'estensione di Chrome per modificare la pagina dei risultati di ricerca di Google. So che posso usare lo script di contenuto per farlo perché ha la capacità di farlo. Ma sfortunatamente fallisce. Ho scritto il codice

$('h3.r').append('<b>a</b>') 

o qualcos'altro relativo alle operazioni DOM hanno fallito tutti. Ma se ho appena scritto

alert('aa') 

o

document.body.style.backgroundColor='green' 

, funziona. Perché? A proposito, voglio avere un debug ma quando apro gli strumenti di sviluppo non riesco a trovare il mio script di contenuto di estensione. Riesco a vedere gli script dei contenuti di altre estensioni.

Answer 1

Hai aggiunto jQuery ai tuoi content_scripts in manifest?

Se si utilizza jQuery, è necessario scrivere manifest.json come questo:

"content_scripts":[ 
     { 
      "matches":["http://www.google.com/*"], 
      "js":["jquery-1.9.1.min.js", "contentscripts.js"] 
     } 
] 

OK, sorgente della pagina dopo la lettura della pagina dei risultati di ricerca di Google credo di sapere qual è il problema:

ricerca di Google carichi risultato con AJAX, quindi, quando si cambiano le parole di query e si esegue di nuovo la ricerca, la pagina NON si aggiorna, ecco perché non è possibile ottenere alcun elemento DOM nei risultati della ricerca.

Ciò significa che è necessario aggiungere un listener di eventi per DOMNodeInserted.

codice è come questo:

function fundH3(){ 
    $('h3.r').append('<b>a</b>') 

} 

searchResultArea.addEventListener('DOMNodeInserted', findH3); 

Answer 2

aggiungere le autorizzazioni dell'URL (S) si target per il file manifesto

{ 
--- 
    "permissions": [ 
     "https: //www.google.co.in/*" 
    ] 
--- 
} 

Riferimento

• Permissions