Verwenden der Chrome-Erweiterung zum Ändern der Google-Suchergebnisseite

Question

Ich möchte eine Chrome-Erweiterung erstellen, um die Google-Suchergebnisseite zu bearbeiten. Ich weiß, dass ich Inhaltsskript dazu verwenden kann, weil es dazu in der Lage ist. Aber leider scheitert es. Ich schrieb den Code

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

oder etwas anderes im Zusammenhang mit DOM-Operationen sie alle fehlgeschlagen. Aber wenn ich nur

schrieb

alert('aa') 

oder

document.body.style.backgroundColor='green' 

, es funktioniert. Warum? Übrigens, ich möchte ein Debug haben, aber wenn ich die Entwicklungswerkzeuge öffne, kann ich mein Erweiterungsinhaltsskript nicht finden. Ich kann die Inhaltsskripte anderer Erweiterungen sehen.

Answer 1

Haben Sie jQuery zu Ihren content_scripts im Manifest hinzugefügt?

Wenn Sie jQuery verwenden, müssen Sie manifest.json wie folgt schreiben:

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

OK, nach dem Lesen Seite Quelle der Google-Suchergebnisseite ich glaube, ich weiß, was das Problem ist:

Google lädt Suche Ergebnis mit AJAX, also, wenn Sie Suchbegriffe ändern und erneut suchen, wird die Seite nicht aktualisiert, deshalb können Sie keine DOM-Elemente im Suchergebnis erhalten.

Das bedeutet, dass Sie einen Ereignis-Listener für DOMNodeInserted hinzufügen müssen.

-Code ist wie folgt:

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

} 

searchResultArea.addEventListener('DOMNodeInserted', findH3); 

Answer 2

Berechtigungen hinzufügen der URL (S) Sie zielen auf die Manifest-Datei

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

Referenz

• Permissions