Creating a Chrome Extension That Will Open in a New Tab
According to the Google Chrome Extension documentation, an extension is a zipped bundle of files-HTML, CSS, JavaScript, images, and anything else you need- that adds functionality to the Google Chrome browser. Essentially, they are web pages that can function as any normal web page does.
To keep things basic, each extension (at minimum) will have something similar to the following files:
Manifest File
HTML file
JavaScript file
Etc (images)
In the extension I created, I wanted to mimic Momentum, which adds beauty and functionality every time you open up a new tab. Here, I will explain how I was able to get my (not so beautiful) extension to work whenever I opened a new tab. I will do this by walking you through the manifest.json file.
The manifest.json file contains the extensions structure and acts as the glue between all other files in your extension. Below is a picture of what my manifest file looks like.
The first hash is self-explanatory, so I won’t spend much time here. This is where you name and describe your extension.
The second hash contains the “chrome_url_overrides” function. “Override pages are a way to substitute an HTML file from your extension for a page that Google Chrome normally provides. In addition to HTML, an override page usually has CSS and JavaScript code.” The options you have for this hash are ‘bookmarks,’ ‘history,’ and ‘newtab.’ As I stated earlier, I am looking to override a new tab, so I linked to my HTML file (shown below).
One of the more important things in the manifest file is the distinction between browser action and page action. Typically, when creating an extension you will want to use Browser action as I have in the third hash. The only reason that I am using browser action is in order to make my icon (york.png) clickable at all times. This will allow your extension to function on every page. However, there are some times you may want to use page action. When using page action, your extension icon will be grayed out if it is unavailable. For example, I use an extension called YouTube Playback Speed Control that allows me to speed up YouTube videos. Since it is only applicable when I am on YouTube, it is grayed out when I am surfing the web otherwise.
The permissions hash is related directly to the use of API’s. “To use most chrome.* APIs, your extension or app must declare its intent in the “permissions” field of the manifest. Each permission can be either one of a list of known strings (such as “geolocation”) or a match pattern that gives access to one or more hosts. Permissions help to limit damage if your extension or app is compromised by malware.” At this time, I am not using an API (so I technically do not need it in my manifest), but am planning on utilizing one in my extension as I add to it.
Finally, we come to the background hash. “The background page is an HTML page that runs in the extension process. It exists for the lifetime of your extension, and only one instance of it at a time is active.” Here, I linked it to the JavaScript file (shown below) where I added functionality to the icon. This step was unnecessary as I could have gotten away without icon functionality. Having said that, I was set on the user being able to click the icon to open a new tab (as Momentum functions) in conjunction with opening one regularly. Notice here that I set the url to “chrome://newtab”. This will open up a new tab in Google Chrome and display the function of your HTML page.
Currently, my extension opens up to an embedded YouTube video and autoplays the music that helps me focus (as I spend my entire day studying). This is a helpful reminder, but for obvious reasons, can be somewhat annoying. Unfortunately, I do not have a published version of this extension for you to use as it lacks dynamic function and will be a work in progress (probably a completely different extension idea #ComingSoon). However, you now know how to get your extension running in a new tab and THE WORLD IS YOUR OYSTER!!!
Lastly, if (for some reason) you want to create a version of my extension for your own or just an extension that opens in a new tab as I have, feel free to copy my code. Then, you can head over to “chrome://extensions/” and check “developer mode” box at the top right, allowing you to play with your extension before making it available to the public.