5 Minutes Tutorial: Making a Word Count Google Chrome Extension

If you’re a freelance writer who regularly creates articles for various websites, you’ve probably found yourself frequently checking the word count of your content.

The issue

This task is easily accomplished using text editors like Sublime Text or even the built-in editor on WordPress. However, there may be instances where your client requires you to break down articles into sections and insert code snippets, images, or ads between them.

Whether for these specific purposes or any other reason, if you need a quick and convenient way to determine the word count of a paragraph or a set of paragraphs without the hassle of opening the article in your editor (be it online with WordPress or offline with your preferred code editor), and you prefer to avoid the inconvenience of copying and pasting text into online word counters like WordCounter.net (which, although useful, can be a bit distracting with all the tab switching), then you’ll want to explore this effortless solution that takes just 5 minutes to set up.

Here’s what I aimed to achieve:

1. Highlight any text on a web page.
2. Click a designated button to instantly obtain the word count.
3. This functionality had to be integrated at the Chrome browser level, eliminating the need for a separate web page for counting words (as you would find with tools like WordCounter.net).

The Solution

Creating a Google Chrome extension to highlight text on a web page and count the words is a feasible and practical idea. Here’s a basic guideline on how you can do this:

Step 1: Set Up the Extension Folder

1. Create a New Folder: This will contain all the files for your extension.
2. Create a Manifest File: Name it manifest.json. This file defines basic information about your extension.

Step 2: Write the Manifest File

In manifest.json, include the following:

{
    "manifest_version": 2,
    "name": "Word Count",
    "version": "1.0",
    "description": "Count the number of words in highlighted text.",
    "permissions": ["activeTab"],
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "icon.png"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]         }
    ] }

This sets up a basic extension with a popup and a content script that can interact with web pages.

Step 3: Create the Popup HTML

Create a file named popup.html. This will be the interface for your extension.

<!DOCTYPE html>
<html>
<head><title>Word Count</title></head>
<body>
    <div>
        <button id="countButton">Count Words</button>
        <div id="wordCount">0 words</div>
    </div>
    <script src="popup.js"></script>
</body>
</html>

Step 4: Create the JavaScript for Popup

Create a file popup.js. This will handle the button click in your popup.

document.getElementById('countButton').addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {action: "countWords"}, function(response) {
            document.getElementById('wordCount').textContent = response.wordCount + " words";
        });
    });
});

Step 5: Create the Content Script

Create a file content.js. This will handle the word counting on the web page.

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action === "countWords") {
        let selectedText = window.getSelection().toString();
        let wordCount = selectedText.trim().split(/\s+/).length;
        sendResponse({wordCount: wordCount});
    }
});

Step 6: Add an Icon

1. Create an Icon: Name it icon.png and place it in your extension folder. It will be the icon for your extension in the Chrome toolbar.

Step 7: Load Your Extension

1. Open Chrome and go to chrome://extensions/.
2. Enable “Developer mode”.
3. Click “Load unpacked” and select your extension folder.

Now, you can select text on any webpage, click the extension icon, and then click the “Count Words” button to see the number of words in your selection.

Concluding

In conclusion, we hope you find this quick and efficient solution for counting words in web content to be a valuable addition to your freelance writing toolkit. We understand the importance of streamlining your workflow and saving time, and that’s exactly what this method offers.

We appreciate your time spent reading this article, and we encourage you to share your thoughts, opinions, and any valuable insights or experiences you may have with this word-counting technique on our Facebook page. Visit us at https://www.facebook.com/digitalprintphuket and join the discussion. Your feedback is highly valuable to us, and we look forward to hearing from you!

Thank you for being a part of our community, and happy writing!