Enhancing Medium with a Chrome Extension: A Step-by-Step Guide
Written on
Chapter 1: Introduction to Chrome Extensions
In this guide, we will explore the fundamentals of Chrome extensions and demonstrate how to enhance an open-source extension specifically for Medium.
Photo by Daniel Josef on Unsplash
What Exactly is a Chrome Extension?
Chrome extensions are small software programs that can be added to the Google Chrome browser to modify its functionality. These extensions can introduce new capabilities or adjust existing features to improve user convenience. (Source)
Medium Enhanced Stats Overview
The Medium Enhanced Stats extension, created by Tomas Trajan, is an essential tool for writers. It provides vital statistics such as views, reads, read ratios, fans, claps, and the total number of published stories. You can find the code for this extension here.
How to Install a Chrome Extension
To install a Chrome extension, follow these steps:
- Visit the Chrome Web Store.
- Search for and select the desired extension.
- Click "Add to Chrome." Some extensions may request specific permissions; click "Add extension" to approve.
For further details, refer to the official documentation.
How Do Chrome Extensions Operate?
A Chrome extension consists of several key files that work together:
- manifest.json: This crucial file contains metadata about the extension, such as its name, version, and permissions.
- background.js: Serving as the data layer, this file handles API calls to retrieve data.
- stats-total.js: This is the view layer where we send messages to background.js to trigger API calls and display responses.
- stats-total.css: This file manages the styling for the extension.
For more details, check out our video below.
Chapter 2: Installing a Custom Chrome Extension
To set up the custom Chrome extension, download the initial code from here, and follow these steps:
- Navigate to chrome://extensions in your Chrome browser and enable "Developer mode" with the toggle in the top right corner.
- Click “Load unpacked extension…” and select the folder containing your extension’s code.
Before diving into the coding aspect, let’s examine what we currently have and what needs to be added.
Understanding the Original Medium Stats
The image above illustrates the Medium Enhanced Stats for a user. Our goal is to add the capability to track today's statistics, including views, reads, fans, and claps.
Chapter 3: Adding New Features to the Extension
I have introduced a new feature that is invaluable for any Medium writer who tracks their statistics.
Adding the New Feature
The entire process is detailed in this informative video.
Our aim is to retrieve the view and read counts for today across all articles. Here’s how we can achieve that:
- Step 1: Send a message from stats-total.js to background.js to request today's post data.
- Step 2: In background.js, add a listener that responds to the message GET_POST_STATS_TODAY by invoking the handleGetPostStatsToday method.
- Step 3: In the handleGetPostStatsToday function, call the backend API to retrieve post statistics based on time.
- Step 4: In the calculatePostStats function, use the date as a key to return a result object containing views, reads, fans, and claps.
- Step 5: Update the summary table in the updateTableSummary function with the new data.
- Step 6: In the loadPostStatsToday method, gather today's statistics and update the UI accordingly.
Congratulations! You’ve successfully added a new feature to the Medium Enhanced Stats Chrome extension. Feel free to experiment with the code and create additional exciting features. You can download the complete code and install the Chrome extension from here.
The code repository is available at:
tomastrajan/medium-enhanced-stats
Google Chrome Extension for enhanced Medium stats! Gain insights into total view counts with an updated summary table.
github.com
For more information, visit plainenglish.io.