Ändern Sie den HTML-Code geladener Seiten mithilfe von Chrome-Erweiterungen

77

Wie kann ich der geladenen Seite HTML-Code hinzufügen, wenn der Seitentitel bestimmten Text enthält?

Chrome-Erweiterungen sind für mich neue Gründe und Ihre Hilfe wäre sehr dankbar.

javascript google-chrome google-chrome-extension Luke G.
quelle

Antworten:

140

Verweise:

Sie können den folgenden Code als Referenz für das Hinzufügen von HTML-Code verwenden.

manifest.json

Diese Datei registriert das Inhaltsskript für die Erweiterung.

{
"name":"Inject DOM",
"description":"http://stackoverflow.com/questions/14068879",
"version":"1",
"manifest_version":2,
"content_scripts": [
    {
      "matches": ["http://www.google.co.in/*","https://www.google.co.in/*"],
      "js": ["myscript.js"]
    }
  ]
}

myscript.js

Ein einfaches Skript zum Hinzufügen einer Schaltfläche zur GoogleSeite

// Checking page title
if (document.title.indexOf("Google") != -1) {
    //Creating Elements
    var btn = document.createElement("BUTTON")
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    //Appending to DOM 
    document.body.appendChild(btn);
}

Output

Sie sehen eine Schaltfläche, die einer gewünschten Seite hinzugefügt wurde

Geben Sie hier die Bildbeschreibung ein

Sudarshan
quelle
Könnte jemand erläutern, wie von diesen beiden Dateien -> zu einer lokalen Erweiterungsdatei -> zu einer installierten Erweiterung gewechselt werden kann?
Luke
@ Luke verwenden eine Vorlage wie diese: github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template
Sucrenoir
4
Für die Entwicklung stellte ich fest, dass die Lösung darin bestand, zu chrome: // extensions zu wechseln, das Kontrollkästchen für den Entwicklermodus zu aktivieren, dann die entpackte Erweiterung zu laden und das Verzeichnis auszuwählen, das die Dateien enthält.
Luke
Zu Ihrer Information, DOM ist kein HTML, wenn Sie beabsichtigen, HTML vom Webserver abzurufen, und kurz bevor es in DOM analysiert und im Browser angezeigt wird, um es zu bearbeiten, ist dies die falsche Antwort für Sie Googeln herum ...
Wie würden wir vorhandene Inhalte auf einer HTML-Seite ändern?
Stevoisiak
3

Die Antwort von @Sudarshan erklärt die Seitenspezifität. Großartig, aber was ist mit den hinzugefügten Kommentaren? Hier erfahren Sie, wie Sie das, was er verpasst hat, auf einfachere und praktischere Weise tun können, um vorhandene Inhalte zu ändern oder Inhalte auf einer Seite zu erstellen. Die einfachste Methode wäre:

Ändern

Einzelartikeländerung:

document.getElementById("Id").innerHtml = this.innerHtml + "<some code here>";

oder um Attribute zu ändern:

document.getElementById("Id").class = "classname";

//or ->

document.getElementById("Id").style.color = "#a1b2c3";

Gehen Sie wie folgt vor, um mehrere Codezeilen hinzuzufügen:

document.getElementById("Id").innerHtml = this.innerHtml + `
 <some code here>                                                            <!-- Line 1 -->
 and we're on multiple lines!` + "variables can be inserted too!" + `        <!-- Line 2 -->
 <this code will be inserted directly **AS IS** into the DOM                 <!-- Line 3 -->
`
;
  • Aber was ist nun mit dem einfachen Einfügen von Elementen?

Erstellen

Große Code-Injection (Beispiel aus einem vor einiger Zeit durchgeführten Codierungsprojekt) siehe insertAdjacentHtml-API :

var bod = document.getElementsByTagName('body')[0];

bod.insertAdjacentHTML('afterbegin', `
    <div class="Boingy" id="Boingy">
        <div class="Boihead" id="BoiHead">
            <div class="deXBox" id="deXBox">
                <div class="Tr-Bl_Button" style="height: 25px;width: 2px;margin-left: 11.65px;background-color: gray;transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);Z-index: 1;">
                    <div class="Tl-Br_Button" style="height: 25px;width: 2px;background-color: gray;transform: rotate(90deg);-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);Z-index: 2;">
                        </div>
                    </div>
                </div>
            </div>
            <embed id="IframeThingyA" src="` + "url" + `" type="text/html">
            </embed>
        </div>
    `);

Verweise:

255.tar.xz
quelle