The Chrome extension documentation is pretty extensive; there is a lot you can do with extensions. It is possible to run background scripts via web workers, interact with the Chrome API directly and call your own API's if that's what you want.
That's not what I wanted. I wanted:
- Update the styles of a specific website
- Read and modify the DOM
In this article I will use an extension I wrote that inserts a search link on a movie's IMDb page, so you can figure where it is possible to buy or stream it.
The Chrome Extension manifest#
The manifest describes what the extension is about and what permission are needed. It also includes metadata such as name, description, screenshots and icons. We won't be focusing on the metadata. To get the basics of the manifest, see this part of Chrome Extension documentation.
The goal here is to insert our own script and our own CSS file into a webpage - this case being a n IMDb movie page. For this we are going to use content scripts, that the Chrome Extension documentation names in a very jargonny way as "inject with static declarations".
We want to inject the files in the same directory as our manifest called contentScript.js and style.css.
{
"name": "Where to watch - Playpilot/IMDb",
...
"content_scripts": [
{
"matches": ["https://www.imdb.com/title/*"],
"js": ["contentScript.js"],
"css": ["styles.css"]
}
],
...
}This is an excerpt from my extension manifest.
This just tells us what CSS and Javascript files we want to load into what sites, matches. Notice that all of these are arrays, which means you can load multiple scripts and stylesheets onto multiplite sites.
The key here, which was my point of failure, is the matches URLs. If you files don't load it is most likely due to that. In my case I didn't add the www for the URL. The wildcard * just tells us to match all URLs that begins with everything to the left.
1,2,3, we're done! Now you just need to write an awesome script and some beautiful styles!
Have a good one! -Tobias