Removing duplicate links in Feedly with own Chrome extension

As an info junkie, I am interested in a broad range of topics, able to go through hundreds of links each day. Feedly is allowing me to do it via my cell phone and computer easily.

But when you are following a bigger number of RSS channels, you start to notice duplicate links, pointing to the same articles:

And this can be sometimes pretty annoying.

So, I decided, as a software developer, to get rid of such duplications. I decided to implement a Chrome extension for that because it looks like the most straightforward approach. I also wanted to try it, because I never implemented such an extension before. So, this article can serve as a short tutorial on how to make it.

Basic extension structure

The main file here is manifest.json. It contains metadata related to an extension, like name, description, the extension icon (representing the extension in Chrome's extensions panel), or permissions it needs.

Content and background scripts

There is a possibility to display HTML popup in case a user clicks on the extension icon, but we are not going to need it here. We just need to trigger action that detects duplicate links and removes them.

For this purpose, two separate types of scripts are needed. The first one - background script in Chrome extension development terms - handles the icon click event. Background scripts (defined in background.scripts property of manifest.json file) have access to Chrome API (and thus access to the click event), but cannot access the content of a page.

The second type of scripts - content scripts - have access to page content. These are defined in content_scripts property of the manifest. They are injected into the code of every visited page (if you do not specify any restrictions) and interact with the content.

We want to have a script injected to the Feedly page only in our case. This restriction is defined in content_scripts property - in matches array.

These two types of scripts are separating extension logic from access to page content. But to make it work together another piece of functionality is needed - message passing.

We can see how this works on the example of two scripts from Feedly Unique extension. The first one represents background script - handles Feedly Unique icon click event - sends clicked_feedly_unique message:

The message is then handled by event listener on the content script side:


This script also contains the algorithm for duplicates removal.

Loading the extension into your browser

And now, how to use it in your Chrome browser?

The first thing you need to do is to turn on developer mode in your Chrome - just enter Extensions page (chrome://extensions/) and toggle Developer mode switch in the upper-right corner.

Then click the Load unpacked button (upper-left corner) and select your extension code folder on your local machine.

The plugin is then displayed on Extensions page together with other installed plugins:

For each change, you do to your extension code a reload button highlighted above must be clicked.

Background page link enables you to access the Chrome developer tools window of background scripts. So, you can spot errors or see debug logs of the scripts there. This information is not visible in the developer tools window of a page where a plugin functionality should be applied.

Content scripts stuff only should be visible in the developer tools window of a particular page.

You should see and access the plugin in Google Chrome's extensions panel after load into Chrome:

Feedly Unique and future improvements

The Code of extension that I developed is available on GitHub here.

There are some additional features that could be included in the extension, like automatic scrolling down to load all available links, triggering title-only view and sorting from the oldest to newest (both needed for the proper working of the extension).

Now you need to do all these changes manually before you run the extension.