Creating a Personalized New Tab Chrome Extension
Written on
Creating a New Tab Chrome Extension provides the opportunity to enhance your browser experience with a personalized homepage. With several browser extensions available, such as Infinity New Tab, Homey, and daily.dev, users can transform an ordinary tab into something visually appealing and functional.
Instead of seeing a default tab:
You could have a customized tab that reflects your style:
Or something like this:
Although these extensions offer customization, they come with limitations. However, as a developer, you have the freedom to create your own extension. This guide will walk you through the steps to build a fully customizable New Tab Chrome Extension using just HTML and JavaScript.
Here's a preview of what your extension can look like:
You can find a demo of this page and access the GitHub repository for reference.
Getting Started — Setting Up Your Chrome Extension
Let’s begin the setup of your Chrome extension. The first step involves creating a manifest.json file, which serves as the foundation of your extension, detailing its metadata such as name and version, along with other functionalities.
Creating manifest.json
Start by creating a manifest.json file and inputting some basic metadata. The initial three entries, name, version, and manifest_version, are sufficient for your first extension.
Installing the Extension
Open your Chrome browser and head to chrome://extensions. Toggle on Developer Mode by clicking the switch next to it. Then, click on Load unpacked and select the directory containing your manifest.json.
Congratulations! You have successfully created your Chrome Extension!
Setting Up the New Tab Page
Now that the extension is created, it currently lacks functionality. Let’s configure it to display a simple HTML page whenever a new tab is opened.
This can be achieved by adding a chrome_url_overrides property to the manifest.json, specifying which HTML file should be displayed on a new tab.
Create an example index.html file and link it to your manifest.json.
Don’t forget to include the storage permission in order to access local storage for saving data.
Afterward, reload your extension.
Now, when a new tab is opened in Chrome, your custom New Tab page will appear:
Customizing Your Page
With the setup complete, you are free to unleash your creativity. Design your New Tab extension according to your preferences.
This extension includes two main features: - A clock that updates every second - A habit tracker to monitor up to five habits with customizable colors
Both components are developed using plain HTML, CSS, and JavaScript. I encapsulated each in their own Web Components to enhance organization and maintain a clean structure in index.html.
The custom elements <my-clock> and <five-habit-tracker> are registered by loading their scripts from the /src/* directory. Each component has its own shadow DOM for content isolation. If you're new to Web Components, I recommend checking out my beginner series for a solid foundation.
Clock Component
Let’s examine our clock Web Component. It is simple and functions as follows:
In the constructor, we call the superclass HTMLElement and establish an open Shadow DOM to ensure style encapsulation. In the connectedCallback() lifecycle method, we insert HTML into the shadowRoot, including a div element and some styles. We then set an interval to update the content with localeTimeString every second.
Habit Tracker Component
For the habit tracker, I sought inspiration from CodePen and found a fantastic Five-Habit tracker by Romina Martín. I loved it and integrated it into its own Web Component.
I made a few design tweaks to enhance its appearance against a background image, and ensured it functions correctly within a shadow DOM. The habit tracker operates seamlessly and saves its state to local storage, which is why we included the storage permission in the manifest.json. Huge thanks to Romina Martín for providing such a useful tool!
Background Image
No New Tab extension is complete without a captivating background image. I sourced an excellent photo from Jaime Reimer on Pexels. To ensure it covers the entire page beautifully, I added CSS styles in the index.css file.
I also included a dark shadow layer to the body to enhance contrast between the background image and the text on the page.
Final Thoughts
Building your own Chrome Extension is more straightforward than it may seem. Creating a New Tab page in Chrome is equally simple. Once the basic setup is complete, you can develop a fully functioning website using HTML, CSS, and JavaScript.
Designing a personalized New Tab page can be an enjoyable endeavor as you explore your creativity.
Thank you for taking the time to read this article. I welcome any questions and am open to feedback. Feel free to connect with me anytime! You can find me on LinkedIn, follow me on Twitter, or subscribe for updates via email.
Here is the link for unlimited access to all Medium content. If you sign up through this link, I earn a small commission at no extra cost to you.
As a Medium member, a portion of your subscription supports the writers you read, and you gain full access to every story.
About the Author
I am a Software Engineering Analyst at Accenture Song. We are always on the lookout for talented developers, so please reach out if you're interested in joining our team!
My passion lies in creating solutions that are beneficial and transformative for others. If you often find yourself sifting through your browsing history to locate information, my Web Highlights Chrome Extension can streamline your research process by organizing highlights efficiently. You can highlight text on any webpage or PDF, and your highlights will sync directly to the web app at web-highlights.com, allowing easy access from anywhere.
Further Reading
Here are some additional resources for enhancing your skills:
- Build A Text Web-Highlighter as a Chrome Extension: Discover how to create a Chrome extension using Web Components.
- How To Build A Chrome Extension: Follow a step-by-step guide for creating a Chrome extension.
- Efficient Research with the Web Highlighter Chrome Extension: Learn to highlight text and organize your research effectively.
For more content, visit **PlainEnglish.io*. Sign up for our free weekly newsletter and follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.*