Build Your Own Chrome Extension: Google Docs Word Count Tool

This tutorial guides you through creating a Chrome extension that adds a persistent word count to Google Docs. It enhances the Google Docs user experience by providing a constantly updated word count in a status bar.

Key Features:

• Persistent Word Count: A status bar displays the word count in real-time.
• Comprehensive Counting: Accurately counts words in the main text, headers, footers, and footnotes.
• Character Count: Also provides a character count, useful for character-limited content.
• Easy Installation: Follow the step-by-step instructions to build and install the extension.

This project requires HTML, CSS, and jQuery knowledge. Ensure you have the latest Chrome browser in Developer Mode (accessible through Tools > Extensions).

Step 1: Create the Manifest File (manifest.json)

This file tells Chrome about your extension. Create a file named manifest.json with the following content:

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

Step 2: The Background Script (background.js)

Create background.js with this code:

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

This script shows the extension's icon in the address bar.

Step 3: The Status Bar HTML (statusbar.html)

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

This creates the visual status bar. Remember to include the CSS from the original input.

Step 4: The Main JavaScript (main.js)

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

This script injects the status bar HTML and implements the word counting logic. You'll need to include jq.js (a minified version of jQuery) in your project.

Step 5: Installation

1. Create the necessary icons (icon.png, icon48.png, icon128.png).
2. Place all files in a folder (e.g., "GDWC").
3. In Chrome, go to Tools > Extensions, enable Developer mode, and click "Load unpacked".
4. Select the "GDWC" folder.

Now, open a Google Doc, and your word count extension should be active! Remember this is a basic version; optimizations are discussed in the original article. The original article also provides links to download the necessary jQuery file and sample icons.

The above is the detailed content of Build Your Own Chrome Extension: Google Docs Word Count Tool. For more information, please follow other related articles on the PHP Chinese website!