it-swarm.com.de

Ändern Sie den HTML-Code geladener Seiten mit Chrome-Erweiterungen

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

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

65
Luke G

Verweise:

Sie können den folgenden Code als Referenz zum 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 triviales Skript zum Hinzufügen einer Schaltfläche zur Seite Google

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

Auf einer gewünschten Seite wird eine Schaltfläche angezeigt

enter image description here

127
Sudarshan

Die Antwort von @Sudarshan erklärt die Spezifität der Seite, Großartig, aber was ist mit den hinzugefügten Kommentaren? So können Sie tun, was er auf eine einfachere, praktischere Weise vermisst hat. Um vorhandene Inhalte zu ändern oder Inhalte auf einer Seite zu erstellen, wäre die einfachste Methode: 

Ändern

Änderung einzelner Elemente:

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

um mehrere Codezeilen hinzuzufügen, gehen Sie folgendermaßen vor:

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 mit der einfachen Elementeinfügung?

Erstellen

große Code-Injection (Beispiel aus einem Codierungsprojekt, das vor einiger Zeit ausgeführt wurde) 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: