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.
Ändern Sie den HTML-Code geladener Seiten mithilfe von Chrome-Erweiterungen
Antworten:
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
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
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
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: