orchard
mirrorEvery site I host, in one repo, along with the Cloudflare Tunnel and Caddy that front them. It's all Go, Vite, and SQLite, and it runs on a desktop at home with nothing listening on an inbound port.
blogbuncaddycloudflare-tunneldockergogolanghomelabhtml-templatemonorepoself-hostedseosqlitestatic-sitetypstuptime-monitoringviteweb-analytics
1---
2title: Make your own new tab browser extension in 50 lines of code
3slug: make-your-own-new-tab-browser-extension-in-50-lines-of-code
4date: 2022-07-09
5publish_date: 2022-07-09
6tags: coding
7description: There are plenty of home page and new tab replacement extensions on the Chrome Web Store that you could use, but why not make your own if it's easy?
8cover_image: new-tab-cover-rev.webp
9---
10
11A benefit of making your own Chrome extension is that you also avoid all the excess tracking and bloat with a bonus of unlimited customizability. In my review of new tab extensions on the Chrome Web Store the majority of them had some form of tracking, usually in the form of Google Analytics, so I decided to just make a quick one myself!
12
13To get started making a Chrome extension you need to create a folder and in that folder create a file called `manifest.json` with the following:
14
15```javascript
16{
17 "name": "New Tab",
18 "version": "1.0",
19 "manifest_version": 3,
20 "chrome_url_overrides": {"newtab": "newtab.html"}
21}
22```
23
24In that same folder add a new file called `newtab.html`.
25
26```html
27<!DOCTYPE html>
28<html>
29 <head>
30 <title>New Tab</title>
31 <link rel="stylesheet" href="newtab.css">
32 </head>
33 <body>
34 <div id="currentTime"></div>
35 <div id="currentDate"></div>
36 <script src="newtab.js"></script>
37 </body>
38</html>
39```
40
41From here we need two more files, one for our JavaScript and one for our CSS as we defined in our HTML above. The JavaScript file is named `newtab.js` and the CSS file is named `newtab.css`.
42
43```javascript
44const updateTime = () => {
45 const currentTimeElement = document.getElementById('currentTime');
46 currentTimeElement.innerHTML = new Date().toTimeString().split(' ')[0].split(':').slice(0, 2).join(':');
47}
48updateTime();
49setInterval(updateTime, 1000);
50
51const updateDate = () => {
52 const currentDateElement = document.getElementById('currentDate');
53 currentDateElement.innerHTML = new Date().toDateString().split(' ').slice(0, 3).join(' ');
54}
55updateDate();
56setInterval(updateDate, 1000);
57```
58
59```css
60body {
61 background-color: #000000;
62 display: flex;
63 flex-direction: column;
64 align-items: center;
65 justify-content: center;
66 height: 100vh;
67 margin: 0;
68 font-weight: lighter;
69}
70
71#currentTime {
72 font-size: 20em;
73 color: #ffffff;
74}
75
76#currentDate {
77 font-size: 5em;
78 color: #a8a8a8;
79}
80```
81
82And we are good to add it to Chrome!
83
841. Open up the `chrome://extensions` page by navigating to the URL or clicking through the menus.
852. Enable "Developer mode" in the top right corner by clicking the switch.
863. Click "Load unpacked" under the Extensions navbar, appears after you enable "Developer mode".
874. Select the folder you put all the above code in.
88
89If you did all that correctly you'll see a block show up that looks like this.
90
91
92
93Now if you open a new tab you'll be able to see all your work.
94
95
96
97You now have a working New Tab extension with zero trackers and you can customize it with whatever you want! In the cover photo of this post you can see my New Tab extension which you can find the [source code for on GitHub](https://github.com/overshard/newtab).
98
99I've added a few extras to mine like:
100
101* Bookmarks bar + bookmark edit button
102* Weather icon + temperature
103* Full weekday and month names
104* A 12 hour clock instead of 24 hour
105* Custom image background
106
107All of which you can copy and paste out of my source code and use on your own New Tab extension if you like.
108
109For more information on developing Chrome extensions I've found [Google's official documentation](https://developer.chrome.com/docs/extensions/) to be very helpful.
110
111I hope to have helped you along your way to creating more custom browser extensions. It's not as hard as I originally thought and I've found I can accomplish quite a bit with just a few lines of code. I'm probably going to try making some other browser extensions in the near future.