August 4, 2018

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.

Clicking the 'Find on Reddit' extension button in the Chrome menu bar will search for existing discussions on Reddit

Existing Reddit posts for the original article

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:

1. When right-clicking a link there will be an item in the context menu
2. 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.

1. Open chrome://extensions/
2. 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:

Find on Reddit in the Chrome context menu

…and a new button in your menu bar:

Find on Reddit in the Chrome 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.

Google Chrome

---

Previous post

Create global Quip shortcuts using Alfred and AppleScript

Next post

Create an RSS feed from any website using Apify