Der gesamte Prozess der Entwicklung eines Google-Plug-Ins mit vue+element

Einfache Funktion: Klicken Sie auf das Plug-In-Symbol in der oberen rechten Ecke des Browsers, um ein kleines Popup-Fenster zu öffnen. Klicken Sie auf „Einstellungen“, um die Einstellungsseite zu öffnen und das Hintergrundbild oder die Farbe zu ersetzen.

Start

1. Erstellen Sie lokal einen Ordner testPlugin und erstellen Sie eine neue manifest.json-Datei

{
    "Name": "Test-Plugin",
    "description": "Dies ist ein Testfall",
    "version": "0.0.1",
    "manifest_version": 2
}

2. Fügen Sie ein kleines Symbol für das Plugin hinzu

Erstellen Sie unter testPlugin einen Ordner mit Symbolen und legen Sie dort einige Symbole unterschiedlicher Größe ab. Zum Testen können Sie es sich bequem machen und nur Symbole einer Größe ablegen. Ändern Sie manifest.json wie folgt:

{
    "Name": "Test-Plugin",
    "description": "Dies ist ein Testfall",
    "version": "0.0.1",
    "manifest_version": 2,
    "Symbole": {
      "16": "icons/16.png",
      "48": "icons/16.png"
  }
}

Laden Sie jetzt das entpackte Programm (den Ordner, den wir erstellt haben) in die Erweiterung. Sie können den Prototyp sehen:

3. Fügen Sie das Feld, das in der oberen rechten Ecke des Browsers angezeigt wird, selektiv hinzu, indem Sie auf das Plug-In-Symbol klicken

"Browseraktion": {
  "default_title": "Test-Plugin",
  "default_icon": "icons/16.png",
  "default_popup": "index.html"
}

testPlugin erstellt eine index.html-Datei:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Plugin testen</title>
</Kopf>

<Text>
  <input id="name" Platzhalter="Bitte eingeben"/>
</body>
</html>

Aktualisieren Sie das Plug-In. Klicken Sie jetzt im Browser auf das Symbol des gerade hinzugefügten Plug-Ins. Ein Pop-up wird angezeigt:

4.js-Ereignisse (dasselbe gilt für Stile)

document.getElementById('Schaltfläche').onclick = Funktion() {
    Alarm (document.getElementById('Name').Wert)
}

In HTML:

<input id="name" Platzhalter="Bitte eingeben"/>
<input id="button" type="button" value="klicken"/>
<script src="js/index.js"></script>

Aktualisieren Sie das Plug-In. Klicken Sie im Browser auf das Symbol des Plug-Ins, das Sie gerade hinzugefügt haben. Der Wert im Eingabefeld wird angezeigt:

Eine schwebende Box, die in eine Webseite eingebettet ist

Das obige Beispiel ist ein kleines Popup-Fenster, das in der oberen rechten Ecke des Browsers angezeigt wird, wenn Sie auf das Symbol klicken.

Einführung von vue.js und element-ui

Laden Sie die entsprechenden Versionen der Plug-Ins vue.js und element-ui herunter und führen Sie sie auf die gleiche Weise wie index.js ein. Wenn Sie nicht über die Adresse zum Herunterladen einer separaten js-Datei verfügen, können Sie die CDN-Adresse öffnen und den komprimierten Code direkt kopieren.

Fügen Sie in manifest.json Folgendes hinzu:

"Inhaltsskripte": [
    {
      "Übereinstimmungen": [
        "<alle_URLs>"
      ],
      "css": [
        "css/index.css"
      ],
      "js": [
        "js/vue.js",
        "js/element.js",
        "js/index.js"
      ],
      "run_at": "Dokument im Leerlauf"
    }
  ],

In der Datei index.js:

Hier verwenden wir die Methode zum Einfügen eines Links in den Kopf, um das CSS von Element-UI einzuführen und so die Größe des Plug-In-Pakets zu verringern. Natürlich können Sie es auch in manifest.json einführen, wie Sie index.js einführen.

Schreiben Sie die Vue-Instanz direkt in die Datei index.js, erstellen Sie aber zuerst einen Knoten, um die Instanz einzubinden:

let-Element = Dokument.createElement('div')
let attr = Dokument.createAttribute('id')
attr.Wert = "AppPlugin"
element.setAttributeNode(attr)
document.getElementsByTagName('body')[0].appendChild(element)

let link = Dokument.createElement('Link')
let linkAttr = document.createAttribute('rel')
linkAttr.value = "Stilvorlage"
let linkHref = document.createAttribute('href')
linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
link.setAttributeNode(linkAttr)
link.setAttributeNode(linkHref)
document.getElementsByTagName('Kopf')[0].appendChild(Link)


const vue = neuer Vue({
    el: '#appPlugin',
    Vorlage:`
      <div class="app-plugin-content">{{text}}{{icon_post_message}}<el-button @click="Button">Schaltfläche</el-button></div>
    `,
    Daten: Funktion () {
        return { Text: 'hhhhhh', icon_post_message: '_icon_post_message', isOcContentPopShow: true }
    },
    montiert() {
        console.log(dieser.text)
    },
    Methoden: {
        Taste() {
            this.isOcContentPopShow = falsch
        }
    }
})

Schreiben wir ein einfaches Tool zum Ersetzen der Hintergrundfarbe einer Webseite

Die folgende Datei wird im folgenden Beispiel angezeigt:

let-Element = Dokument.createElement('div')
let attr = Dokument.createAttribute('id')
attr.Wert = "AppPlugin"
element.setAttributeNode(attr)
document.getElementsByTagName('body')[0].appendChild(element)

let link = Dokument.createElement('Link')
let linkAttr = document.createAttribute('rel')
linkAttr.value = "Stilvorlage"
let linkHref = document.createAttribute('href')
linkHref.value = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
link.setAttributeNode(linkAttr)
link.setAttributeNode(linkHref)
document.getElementsByTagName('Kopf')[0].appendChild(Link)


const vue = neuer Vue({
    el: '#appPlugin',
    Vorlage: `
        <div v-if="isOcContentPopShow" Klasse="oc-move-page" id="oc_content_page">
            <div class="oc-content-title" id="oc_content_title">Farbe<el-button type="text" icon="el-icon-close" @click="close"></el-button></div>
            <div class="app-plugin-content">Hintergrund: <el-color-picker v-model="color1"></el-color-picker></div>
            <div class="app-plugin-content">Schriftart: <el-color-picker v-model="color2"></el-color-picker></div>
        </div>
    `,
    Daten: Funktion () {
        return { color1: null, color2: null, documentArr: [], textArr: [], isOcContentPopShow: true }
    },
    betrachten:
        Farbe1(Wert) {
            rauslassen = document.getElementById('oc_content_page')
            let outC = document.getElementsByClassName('el-color-picker__panel')
            dies.documentArr.forEach(item => {
                    wenn(!out.enthält(Element) && !outC[0].enthält(Element) && !outC[1].enthält(Element)) {
                        item.style.cssText = `Hintergrundfarbe: ${val}!wichtig;Farbe: ${this.color2}!wichtig;`
                    }
            })
        },
        Farbe2(Wert) {
            rauslassen = document.getElementById('oc_content_page')
            Lassen Sie C = document.getElementsByClassName('el-color-picker__panel')[1]
            dies.textArr.forEach(item => {
                wenn(!out.contains(item) && !outC.contains(item)) {
                        item.style.cssText = `Farbe: ${val}!important;`
                    }
            })
        }
    },
    montiert() {
        chrome.runtime.onConnect.addListener((res) => {
            wenn (res.name === 'testPlugin') {
                res.onMessage.addListener(mess => {
                    this.isOcContentPopShow = mess.isShow
                })
            }
        })
        dies.$nextTick(() => {
            let bodys = [...document.getElementsByTagName('body')]
            let headers = [...document.getElementsByTagName('header')]
            let divs = [...document.getElementsByTagName('div')]
            let lis = [...document.getElementsByTagName('li')]
            let Artikel = [...document.getElementsByTagName('Artikel')]
            let nebenbei = [...document.getElementsByTagName('nebenbei')]
            let footers = [...document.getElementsByTagName('footer')]
            let navs = [...document.getElementsByTagName('nav')]
            this.documentArr = bodies.concat(Überschriften, Divs, Lis, Artikel, Anmerkungen, Fußzeilen, Navigationen)

            lass als = [...document.getElementsByTagName('a')]
            let ps = [...document.getElementsByTagName('p')]
            dies.textArr = as.concat(ps)

        })

    },
    Methoden: {
        schließen() {
            this.isOcContentPopShow = falsch
        }
    }
})

Datei:

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>mein Plugin</title>
  <link rel="stylesheet" href="css/index.css">
</Kopf>

<Text>
  <div Klasse="Plugin">
    <input id="plugin_button" type="button" value="Öffnen" />
  </div>
</body>
<script src="js/icon.js"></script>

</html>

Erstellen Sie icon.js:

plugin_button.onclick = Funktion () {
  Durcheinander()
}
asynchrone Funktion mess () {
  const tabId = warte auf getCurrentTabId()
  const connect = chrome.tabs.connect(tabId, {name: 'testPlugin'});
  verbinden.postMessage({isShow: true})
}
Funktion getCurrentTabId() {
  returniere neues Promise((lösen, ablehnen) => {
      chrome.tabs.query({ aktiv: true, aktuellesFenster: true }, Funktion (Tabs) {
          auflösen(tabs.length ? tabs[0].id : null)
      });
  })
}

Dieser kleine Versuch ist nun abgeschlossen. Bei weiteren Anforderungen können wir natürlich mit dem lokalen Speicher oder dem Server zusammenarbeiten.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Entwicklung eines Google-Plug-Ins mit Vue+Element. Weitere relevante Inhalte zur Entwicklung von Vue+Element-Plug-Ins finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Beispielcode von Vue mit dem Moment-Plugin zum Formatieren der Zeit
Beispiel für die Verwendung des Swiper-Plugins zur Implementierung eines Karussells in Vue
So führen Sie das Excel-Tabellen-Plugin in Vue ein
So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven
Umfassender Vergleich und Bewertung des Vue-Code-Hervorhebungs-Plugins
Basierend auf Vue-Simple-Uploader, kapselt die globale Upload-Plug-In-Funktion des Dateisegment-Uploads, des sofortigen Uploads und der Breakpoint-Fortsetzung
So verwenden Sie das Datums-Plugin vue-bootstrap-datetimepicker in vue-cli 3
Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst

<<: Installieren Sie ein CentOS-System basierend auf WindowsX Hyper-V

>>: Detaillierter Installationsprozess der MySQL 8.0 Windows-ZIP-Paketversion

Lernen Sie, wie Sie Portainer zur Verwaltung mehrerer Docker-Containerumgebungen verwenden.

Lösung für „Keine solche Datei oder kein solches Verzeichnis“ im Gebietsschema nach der Installation von glibc-2.14 in CentOS6.5

Inhaltsverzeichnis 1. In die Grube fallen 2. Verg...

Einführung in das Hinzufügen neuer Benutzer zu MySql, das Erstellen von Datenbanken für Benutzer und das Zuweisen von Berechtigungen an Benutzer

1. Neuen Benutzer hinzufügen Nur lokalen IP-Zugri...

Der gesamte Prozess der Entwicklung eines Google-Plug-Ins mit vue+element

Start

Eine schwebende Box, die in eine Webseite eingebettet ist

Schreiben wir ein einfaches Tool zum Ersetzen der Hintergrundfarbe einer Webseite

Zusammenfassen

Lernen Sie, wie Sie Portainer zur Verwaltung mehrerer Docker-Containerumgebungen verwenden.

Docker benennt den Imagenamen und die TAG-Operation um

Tutorial zur Installation von MySQL8 unter Linux CentOS7

CSS3 verwendet Transform-Origin, um Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen

Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306

Tutorial zur Installation und Konfiguration der dekomprimierten Version von mysql5.7.19 winx64

Detaillierte Erklärung zum Wiederherstellen von Datenbankdaten über das MySQL-Binärprotokoll

XHTML-Einführungstutorial: Verwendung von Listen-Tags

Was sind die Unterschiede zwischen var let const in JavaScript

So fragen Sie Bilder in einem privaten Register ab oder erhalten sie

Artikel empfehlen

So löschen und deinstallieren Sie MySQL in Windows 10 vollständig

Schreiben Sie Ihr HTML so, um Ihren Code kompatibler zu machen

Detaillierte Schritte zur Installation von MYSQL8.0 auf CentOS7.6

Vue implementiert Card-Flip-Karussellanzeige

Detaillierte Erklärung der Vue-Filter

Detaillierte Erklärung zur Verwendung der Click-to-Switch-Bildkomponente im Vue-Kartenstil

So finden Sie Informationen zu nicht festgeschriebenen Transaktionen in MySQL

HTML-Tabelle_Powernode Java Academy

Detaillierte Erklärung des Linux Namespace-Benutzers

Verschiedene Möglichkeiten der Ausführung im Hintergrund von Linux (Zusammenfassung)

Lösung für „Keine solche Datei oder kein solches Verzeichnis“ im Gebietsschema nach der Installation von glibc-2.14 in CentOS6.5

Einführung in das Hinzufügen neuer Benutzer zu MySql, das Erstellen von Datenbanken für Benutzer und das Zuweisen von Berechtigungen an Benutzer

Detaillierte Beschreibung des MySQL-Ersetzens in der Verwendung

Vue implementiert unregelmäßige Screenshots

Detaillierte Schritte zum Einrichten des Netzwerks für die mit Win10 gelieferte virtuelle Maschine (grafisches Tutorial)