How to write a simple Chrome extension to search Reddit for the article you’re reading
Sometimes Reddit or Hacker News discussions about an article can be just as interesting as the article itself. Here is how to write a simple Chrome extension that will search Reddit for existing discussions about any webpage you’re currently reading. If the link has been posted to any subreddit before, you’ll be able to jump into the discussion.
1 — Create your extension directory
Chrome extensions can be very basic—at the very least you need one directory like this:
find-on-reddit-chrome-extension/
├── manifest.json
└── find_on_reddit.js
2 — manifest.json
This file tells Chrome what kind of extension you’re making, what permissions you’ll need to request from the user, and some aditional metadata like which icons to display.
{
"name": "Find on Reddit",
"description": "Search for a link on Reddit",
"version": "1.0.0",
"permissions": [
"contextMenus",
"tabs"
],
"background": {
"scripts": ["find_on_reddit.js"]
},
"manifest_version": 2,
"icons": {
"48": "icons/reddit-96.png",
"128": "icons/reddit-144.png"
},
"browser_action": {
"default_icon": "icons/reddit-96.png"
}
}
We use the permissions
list to declare that we’ll need access to the user’s context menu (when they right-click a link) and to get information about the user’s current tab (when they click the menu bar button).
The background
block is where we point to the JavaScript file that contains our logic.
3 — Write the extension logic in JavaScript
There will be two ways to use the extension:
- When right-clicking a link there will be an item in the context menu
- There will be a button in Chrome’s menu bar to search for the tab’s current page
We register these in two different ways:
Add a button to the right-click context menu
In find_on_reddit.js
, add the following code:
function searchRedditForUrl(url) {
const searchQuery = 'url:' + url;
const redditSearchUrl = 'https://www.reddit.com/search?q=' + encodeURIComponent(searchQuery);
console.log("Opening Reddit search URL: " + redditSearchUrl);
chrome.tabs.create({ url: redditSearchUrl });
}
function handleContextMenuClick(info, tab) {
const linkUrl = info["linkUrl"];
console.log("User used context menu on link with URL: " + linkUrl);
searchRedditForUrl(linkUrl);
}
chrome.contextMenus.create({
"title": "Find on Reddit",
"contexts": ["link"],
"onclick": handleContextMenuClick
});
The first function searches Reddit for a given URL in a new tab. The q
query parameter is expecting a string in the format url:https://...
, but we need to encode the special characters by passing it through encodeURIComponent()
.
We then have a function that handles the click event after a user clicks the context menu item. Chrome passes in the info
argument which contains details about the link that the user right-clicked.
Lastly, we register the click handling function by calling the Chrome extension API’s chrome.contextMenus.create()
function. The contexts: ["link"]
entry just tells Chrome that we want our button to appear when the user has right clicked on links on the page.
Add a button to the menu bar
Now we want add a button to the menu bar in Chrome that, when clicked, will search Reddit for the tab’s current URL. For this, add the following code to find_on_reddit.js
:
function handleBrowserButtonClick(tab) {
console.log("User clicked browser button on tab: " + JSON.stringify(tab));
searchRedditForUrl(tab["url"]);
}
chrome.browserAction.onClicked.addListener(handleBrowserButtonClick);
We’re using the same searchRedditForUrl
function as before, we’re just registering it with a different Chrome extension API called browserAction
.
4 — Add the extension to Chrome
Now to actually load the extension into Chrome.
- Open chrome://extensions/
- Click “Load Unpacked” and select the directory where your
manifest.json
and JavaScript file are located.
Now when you should have a context menu item when you right-click on links:
…and a new button in your menu bar:
Get all the code and icons on GitHub
You can find the full extension, plus the Reddit icons, at mshafer/chrome-find-on-reddit on GitHub.