Erstellen Sie Ihre eigene Chrome -Erweiterung: Google Docs Word Count Tool

Dieses Tutorial führt Sie durch das Erstellen einer Chrome -Erweiterung, die Google Docs eine anhaltende Wortzahl hinzufügt. Es verbessert die Benutzererfahrung von Google Docs, indem eine ständig aktualisierte Wortzahl in einer Statusleiste bereitgestellt wird.

Schlüsselmerkmale:

• Persistente Wortzahl: Eine Statusleiste zeigt die Wortzahl in Echtzeit an.
• umfassende Zählung: zählt Wörter im Haupttext, Header, Fußzeilen und Fußnoten genau.
.
• Zeichenanzahl:
bietet auch eine Zeichenzahl, nützlich für den charakterbeschränkten Inhalt.
• Einfache Installation:
Befolgen Sie die Schritt-für-Schritt-Anweisungen, um die Erweiterung zu erstellen und zu installieren.

Tools > Extensions Dieses Projekt erfordert HTML-, CSS- und JQuery -Wissen. Stellen Sie sicher, dass Sie über den neuesten Chrombrowser im Entwicklermodus verfügen (zugänglich über

).

Schritt 1: Erstellen Sie die Manifest -Datei (Manifest.json)

manifest.json Diese Datei sagt Chrome über Ihre Erweiterung. Erstellen Sie eine Datei namens

mit dem folgenden Inhalt:

<code class="language-json">{
    "name": "GDWC",
    "version": "0.1",
    "description": "Word count statusbar for Google Docs!",
    "background" : { "scripts": ["background.js"] },
    "page_action" : {
        "default_icon" : "icon.png",
        "default_title" : "GDWC statusbar is active"
    },
    "content_scripts": [
    {
        "matches": ["https://docs.google.com/document/*"],
        "js": ["jq.js", "main.js"],
        "run_at": "document_idle"
    }
    ],
    "icons": {
        "48": "icon48.png",
        "128": "icon128.png"
    }
}</code>

Schritt 2: Das Hintergrundskript (Hintergrund.js)

background.js erstellen

mit diesem Code:

<code class="language-javascript">chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        chrome.pageAction.show(sender.tab.id);
        sendResponse({});
    }
);</code>

Dieses Skript zeigt das Symbol der Erweiterung in der Adressleiste.

Schritt 3: Die Statusleiste html (StatusBar.html)

statusbar.html erstellen

:

<code class="language-html"><div id="GDWC_statusBar">
  <a href="https://www.php.cn/link/1c09cec8e3fb5f6dd4fd22a5c644d3e5">GDWC</a>
  <span class="GDWC_statusBarSeparator"></span>
  <span id="GDWC_wordsTotal">Warming up...</span>
</div>
<style>
/* CSS styles for the status bar */
/* ... (same CSS as in original input) ... */
</style></code>

Dies erstellt die visuelle Statusleiste. Denken Sie daran, die CSS aus dem ursprünglichen Eingang einzuschließen.

Schritt 4: Das Haupt -JavaScript (main.js)

main.js erstellen

:

<code class="language-javascript">$.get(chrome.extension.getURL("statusbar.html"), {}, function(data) {$('body').append(data);}, 'html');
chrome.extension.sendRequest({}, function(response) {});

$(document).ready(function(){
    countWords();
});

function countWords() {
    var number = 0;
    $('span.kix-lineview-text-block').each(function(i, obj){
        number += $(obj).text().split(/s+/).length;
    });
    $('#GDWC_wordsTotal').text(number + ' total words');
    timeout = setTimeout('countWords()', 5000);
}</code>

jq.js Dieses Skript injiziert die Statusleiste HTML und implementiert die Wortzähllogik. Sie müssen

(eine abgebildete Version von JQuery) in Ihr Projekt aufnehmen.

Schritt 5: Installation

1. icon.png Erstellen Sie die erforderlichen Symbole (icon48.png, icon128.png,
).
Platzieren Sie alle Dateien in einem Ordner (z. B. "GDWC").
3. Tools > Extensions In Chrome gehen Sie zu
, aktivieren Sie den Entwicklermodus und klicken Sie auf "Auspacken".
Wählen Sie den Ordner "gdwc" aus.

Öffnen Sie jetzt ein Google -Dokument, und Ihre Word Count -Erweiterung sollte aktiv sein! Denken Sie daran, dass dies eine grundlegende Version ist. Optimierungen werden im ursprünglichen Artikel erörtert. Der ursprüngliche Artikel enthält auch Links zum Herunterladen der erforderlichen JQuery -Datei- und Beispiel -Symbole.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihre eigene Chrome -Erweiterung: Google Docs Word Count Tool. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!