- What does it do?
- What are quicklinks?
- Why vanilla Javascript, and why not publish it as a "real" extension?
- Installing
- Tweaking
- Safari?
- Image credits
- Attribution
A customizable new tab extension for Chrome.
This is inspired by something I use somewhere else, but way easier to customize and tweak. It lets you:
- Have large named timezones anywhere,
- Rotates backgrounds from a list on new tab,
- Add lists of iframes,
- Offers quicklinks,
- Can be edited and customized by changing its code (see Tweaking.
In short, they are just URLs in the middle of the new tab (or anywhere you put them). But they can have optionally shortcuts, which makes them way faster to open.
In the basic examples of the screenshot below, there are a bunch of quicklinks for Google stuff.
If you want to open Google, you can press g (it will highlight all links that match) and
then o to go to Google. To access this functionality after creating a new tab with Cmd-Tab
(or whatever creates a new tab in your computer), press ESC to switch focus to the page. So,
the flow would be Cmd-Tab ESC g o
Shortcuts are optional, you can find more about how to set links up in general in the linkUtils.js file.
Shortcuts can be more than one letter as long as they do not overlap. So, don't use gg for one link
and gga for another: gg will capture your keys first. If you want to have a lot of links, you can
optionally add columns, separators and tweak the font size and any other properties of the container div
without needing to modify the CSS (even if it is available to edit, it is always a hassle).
The whole point I had in writing this was having access to everything in the extension without needing to rebuild it.
By using vanilla, run-of-the-mill JS not only I can avoid a build toolchain, but adding any new functionality is
as easy as opening any text editor and adding it to some Utils.js file. Changing styles? Just change style.css. Adding
backgrounds? Same, you get the idea.
As such, packaging this as an extension makes no sense: once packed it is not customizable, it has no settings, no
background worker, no ObjectStorage (well, almost no storage). Configuration is code. Or text, because links and tasks can be configured by writing a semi-structured form of Markdown.
- Clone or download (remember then to unzip) this repository somewhere.
- In Chrome, More tools > Extensions…
- In Chrome > Extensions, Enable developer mode.
- Click Load unpacked, then browse to where you downloaded the repository
When you enable it, the first time you create a new tab it will ask for confirmation that you are happy.
Just edit the source you have downloaded, and in the Chrome Extensions manager, click update (many times this is not even needed, just a refresh or recreate the new tab).
This is thrown together in one folder on purpose, to make it easier to edit without wondering where anything is. Everything is in this folder (except for backgrounds).
I will add some more documentation of the functions you can use at some point, but they should be pretty descriptive.
Note that index.html points to local_main.js, which is gitignored. This is because I pass my local basepath
so I can edit tasks with VS Code. Other than that, it is exactly the same as main.js.
Extension auto-porting, as I tried for bestBefore works, although it is not as convenient as direct-edit when using Chrome.
After cloning, run (I did it in another folder at the same level):
xcrun safari-web-extension-converter ../nt
It will automatically open the generated Xcode project: the project references the assets in the original, cloned folder: any changes you make to the Chrome extension source can then propagate to the Safari extension by rebuilding the project in Xcode.
You might need to set up signing (in theory for local running it is not needed), but that is free with an Apple account, just a bit annoying to do the first time. If you don't want the iOS extension (I'm interested, but installing extensions on iOS is annoying, and requires the 7+ GB of the iOS toolchain) remove the references to the iOS "apps" from the project hierarchy in Xcode. Finally, follow the instructions in the autoporting documentation.
To avoid creating the iOS version, run instead:
xcrun safari-web-extension-converter --macos-only --force PATH
All images are algorithmic art pieces I have created, see mostlymaths.net/sketches
- The task parser has some unit tests here
- The task renderer has some unit tests here, it depends on the parser working.
- Both together here
- Uses the luxon.js datetime library.
- Uses the charts.js plotting library.
- Uses the free and awesome OpenMeteo API.
- Many thanks to Google Gemini for the help.
- Added the following open source fonts:
- Roboto Mono
- Reforma 1969 (or from FontSquirrel to see the license)
- Inter
- Monoid