YouTube Pop-Up Comments Chrome Extension

Fetch comments from the YouTube API and deliver through your Google Chrome Extension for a better video experience.

An Object Is A
3 min readJul 23, 2020

If you want to know the basics of Google Chrome Extensions…

Check out my write-up here:

Or the video tutorial here:

We’re going to create a Chrome Extension that fetches comments from a specific YouTube video using the YouTube Data API.

We’re going to search the comments we get back for timestamps. Strings like “05:40”…”:03"…”1:43".

We’re going to then display these comments on the screen while the video plays back.

Let’s begin…

Our manifest file…

Note:
1.
in the “background”,”scripts” I’ve added the “jquery” library, we’ll need this for an AJAX call

2.
in the “permissions”, I’ve added the domain,
“https://www.youtube.com/…”
we’ll need this so we can inject our foreground script into the YouTube video page later.

On to the foreground script!

We’ll need…
2 arrays: one for the all of the comments from the YouTube API and one for queuing comments that are about to be shown to the user and the video id of the YouTube video — taken from the URL

When our foreground script is first injected, we’ll send that video id to the background script using the ‘chrome.runtime.sendMessage’ function…

Let’s take a look at that background script!

When we get that message from the foreground giving us the video id…

…we’ll then run a search using the YouTube Data API…

Once we’ve received the comments, we’ll sort them by timestamps — in ascending order of course…

Then we just send those comments back to the foreground script!

If you want to check out a more in-depth guide, including how to make those comments float upward, check out my full video tutorial on YouTube,
An Object Is A.

Build a YouTube Comments Chrome Extension | Expand your full-stack portfolio! (2020 Web Development)

--

--