Créez votre propre extension chrome: Google Docs Word Count Tool

Ce tutoriel vous guide en créant une extension chromée qui ajoute un nombre de mots persistant aux documents Google. Il améliore l'expérience utilisateur de Google Docs en fournissant un nombre de mots constamment mis à jour dans une barre d'état.

Caractéristiques de clé:

• Nombre de mots persistants: Une barre d'état affiche le nombre de mots en temps réel.
• Compte complet: compte avec précision les mots dans le texte principal, les en-têtes, les pieds de page et les notes de bas de page.
• Nombre de caractères: fournit également un nombre de caractères, utile pour le contenu limité des caractères.
• Installation facile: Suivez les instructions étape par étape pour construire et installer l'extension.

Ce projet nécessite des connaissances HTML, CSS et JQuery. Assurez-vous d'avoir le dernier navigateur Chrome en mode développeur (accessible à Tools > Extensions).

Étape 1: Créez le fichier manifeste (manifest.json)

Ce fichier raconte à Chrome votre extension. Créez un fichier nommé manifest.json avec le contenu suivant:

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

Étape 2: Le script de fond (background.js)

Créer background.js avec ce code:

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

Ce script montre l'icône de l'extension dans la barre d'adresse.

Étape 3: La barre d'état HTML (statusbar.html)

Créer statusbar.html:

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

Cela crée la barre d'état visuelle. N'oubliez pas d'inclure le CSS à partir de l'entrée d'origine.

Étape 4: le principal javascript (main.js)

Créer main.js:

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

Ce script injecte la barre d'état HTML et implémente la logique de comptage des mots. Vous devrez inclure jq.js (une version minifiée de jQuery) dans votre projet.

Étape 5: Installation

1. Créez les icônes nécessaires (icon.png, icon48.png, icon128.png).
2. Placez tous les fichiers dans un dossier (par exemple, "gdwc").
3. Dans Chrome, allez à Tools > Extensions, activez le mode développeur et cliquez sur "Chargement déballé".
4. Sélectionnez le dossier "GDWC".

Maintenant, ouvrez un Google Doc, et votre extension de nombre de mots doit être active! N'oubliez pas qu'il s'agit d'une version de base; Les optimisations sont discutées dans l'article original. L'article d'origine fournit également des liens pour télécharger le fichier jQuery nécessaire et les exemples d'icônes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!