How to easily create an RSS Feed’s Chrome Extension for your website

How to easily create an RSS Feed’s Chrome Extension for your websiteAntoine LechenaultBlockedUnblockFollowFollowingMar 4Photo by Green Cameleon on UnsplashEven after a lot of years learning new technologies and creating a lot of websites and apps, I realized that I’ve never created a Chrome extension and I could use one for a project I was working on.

I wanted to inform my users of new content on my website without them needing to go back to it every minute.

When it comes to building something I’ve never done, I always start with a simple approach to help me understand the basis of how it works and how I can improve it.

That’s why I’ve first done this project in VanillaJS and made my final product with React.

Both will lead to the same graphics aspect, but the difficulty levels will vary with your comfort level with the technical aspects.

Today we will focus on the VanillaJS version.

Why an RSS Feed’s extension?On a purely technical aspect, you don’t need a lot of knowledge in development to be able to produce this Chrome Extension.

You can make an extension without any dependencies and publish it in a day.

Furthermore, if you’re already using a platform like WordPress or Magento, you already had an RSS feed included in your website.

So, after this tutorial, if you decide to publish your extension, you can offer it to your customers or use it for yourself right away.

And let’s face it, we all love a tutorial that can make something concrete and useful.

Useful Links and noticesFor the purpose of this article, I’ll summarize a lot of content so we can keep it simple for everyone, and we’ll use the medium RSS feed.

Chrome extension documentationChrome web storeChrome extension boilerplateIf you don’t want to read this tutorial and you’re only interested in the code result, here we go.

Building it with Vanilla JSStart by creating a folder with some files :root-directory/ |_____img/ |_____logo-16.

png |_____logo-48.

png |_____logo.

png |_____manifest.

json |_____background.

js |_____popup.

js |_____popup.

html |_____main.

cssStep 1.

Declaring the manifestThe manifest is a file to declare all the information needed for your extension.

You set the name, the description, images, and a bunch of information about how the extension should behave when installed.

Please refer to the documentation for the complete information you can provide, but for now, let’s keep it simple :browser_action is to define the actions triggered with the click on your extension icon in the browser.

background is to define for the script(s) which is executed while you’re navigating.

permissionsis to define the permissions asked by the extension to the users.

For our RSS extension, we need to create a popup interface that will show the last RSS feed results.

For that, we need to declare a default_popup interface.

We also want to inform the user if there is new content available.

So we need to add a background script which will be executed every [X] min.

This will pull the RSS feed and check for a new build date.

Step 2.

 Popup.

jsWe need to pull the medium RSS feed to show it into our extension.

We added the medium website to our manifest in the previous step to allow cross-origin access.

We can now access to the feed, and we’ll define it in our constructor :Now, we need to do a function to get the XML content of the feed, parse it and create a basic display for every item.

We’ll use domParser for this.

And finally add the init call :new InitPopup().

populatePopup();Now let’s make sure it works with this simple HTML code:Let’s add some CSS to have a better view of our content:You should now see something like this :Step 3.

Background.

jsThat’s already pretty cool.

But now we need to add the badge feature in our extension.

This is the little overlay that appears when we want the user to click.

We want them to be notified when there is new content available on the website.

As you may have noticed, we have put a second parameter which was the persistentto false.

This means that we don’t want the script to be constantly active, because we don’t need to know about it every second.

So we will start by defining an alarm, to know the frequency that we will execute our script.

We’ll define a 5 minutes alarm and then attach a listener to it :And that’s it for the alarm.

Our alarm is now set and will be executed every 5 minutes.

Now, let’s create a function to check if new content is available.

We will parse the data pretty much the same way we did before and check if the last build date as changed.

For that, we’ll use chrome storage and store on the local machine the last build date.

Then, we’ll compare every 5 minutes, if there is a new build of the RSS feed.

And now we have a badge!But now, the badge never disappears.

The most simple way to fix that is to reset the badge each time we open the popup.

Just add this simple line at the end of the popup.

js file :chrome.

browserAction.

setBadgeText({ text: '' });Step 4.

Testing our chrome extensionNow we have all our files, we need to test it as a real extension!.For that, launch Chrome and type in your URL : chrome://extensions.

Click on the developer mode on the right of your screen.

Then, click on “load unpacked” and select your extension folder.

You should now see your Chrome extension appears in the Chrome toolbar.

But we have a problem.

When you click on your links, nothing change.

In fact, when you build a chrome app, a simple HREF doesn’t work.

You need to tell chrome how to handle the click on a link.

So we’ll add this little adjustment to our popup.

js file :This tells Chrome what to do when the user clicks on a link.

Reload the extension, and your link should be working now.

Congratulations, you did your first chrome extension!Step 5.

Publish the extensionNote: Google is now asking a 5$ fee to the all new chrome web developer to ensure they are real.

If you want to publish your extension to the public, you’ll have to pay.

But if you want to publish it for test purposes and share it with your friend, that’s still free.

Simply go to the chrome web store developer dashboard here.

Log inClick on “Add a new element”.

Zip your extension folder and upload it.

Add the images required for your store pageClick on publishHurray!ConclusionAs previously said, if you want to download the folder, it’s available here.

For me, it was a total discovery, and I had a lot of fun learning about this new possibility as a web dev!I hope this will be useful and please if you have any recommendation or advice on how to do it, feel free to share them in the comment section.

If you need help to set it up, feel free to ask me in the comments.

And thank you for reading.

????.

. More details

Leave a Reply