If you're new to JavaScript programming or just want a much more in-depth course, we offer a full 3-hour course that teaches you how to build Chrome Extensions V2 from the ground up.
Complete with project-based learning, once you finish that course, you'll have the knowledge to create any Chrome Extension you can think of!
You can see all of our courses here.
If you're an experienced JavaScript Web Developer, then follow along...
There are 5 parts to a Chrome extension:
1. the manifest file 2. the background script 3. the foreground script 4. the popup page 5. the options page
1. Everything begins with the manifest file…
How, where, and when our extension interacts with the user’s browser, is all contained within the manifest.
The manifest establishes the name, version, and description of our chrome extension as well as the background script, popup and options pages.
It also establishes where we can inject foreground scripts (more on that later…).
2. The background script (background.js) is a JavaScript script that runs once our extension either gets installed or the user refreshes the extension manually.
THIS IS CRUCIAL TO NOTE
The background script doesn’t actually have access to any of the web pages your user is viewing, so your background script can’t manipulate the DOM.
So how do we get our chrome extension to do stuff on the user’s web page then?
That’s where the foreground script comes in.
Our background script has the ability to inject foreground scripts, as well as CSS if you want, into the page.
This is how we can manipulate the DOM of a web page with a chrome extension. How do we inject our foreground script into the foreground?
In the background.js script we have a listener watching what we do with our tabs, if the current tab we’re on is the Google homepage, we inject our script into that tab. The ‘null’ indicates the current tab we’re viewing.
From there, our foreground.js script acts like any other script influencing an index.html page. We have access to the window and document(DOM).
We can make the Google homepage’s logo spin if we wanted to.
3. From there, our foreground.js script acts like any other script influencing an index.html page.
In the foreground.js we could write something like:
document.querySelector('#hplogo').classList.add('spinspinspin');And in the mystyles.css we could write something like:
.spinspinspin {
animation-name: spin;
animation-duration:1.0s;
animation-iteration-count: infinite;
}
@keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(1440deg);
}
}4. The popup page is optional.
The popup page is what shows when the user clicks on our extension icon in the top right. It’s an html page with a script attached if you want.
5. The options page is just like the popup page.
It’s what the user sees when they navigate to their extensions tab and click for the options. It’s also an html page with a script attached if you want.
So, it’s this relationship between the background and foreground — just like a front-end and back-end — that ties a chrome extension together.