---
title: 'Chrome Shortcuts'
excerpt: "Frustrated by Chrome's new shortcut layout? I built an extension to fix it."
date: 2024-08-25
categories: open-source, web
featureImage: '/images/chrome-new-shortcuts.webp'

prev:
  text: 'Undici Issues on Appwrite'
  link: '/blog/undici-issues-on-appwrite'

next:
  text: 'Appwrite Blog x Pagination'
  link: '/blog/appwrite-blog-pagination'
---

**Update**: I recently stumbled upon an alternative solution, which you can
find [here](https://www.reddit.com/r/chrome/comments/1ey6ji4/comment/ljd9wee/). Funny enough, I discovered this after
I'd already published the extension!

---

Imagine this: It's a typical morning, you're all set to dive into work, you open Chrome, and there it is — a new layout
where all your shortcuts are crammed into a **single line**! Seriously, what were they thinking?

I've said it before, and I'll say it again:

> I don't know what these PMs smoke before approving shit like this!

I've wondered before, and I'm wondering again — do these folks even use Chrome? Because if they do, how could they
possibly think this was a good idea?

---

Frustrated by the change and finding no option in `chrome://flags` or on Reddit to revert it, I got grumpy! After
wasting a good chunk of time on this, I decided to take matters into my own hands and build an extension to fix it.

<BlogPostImage src="https://media1.tenor.com/m/N_IM5wlIUgIAAAAC/i%27ll-do-it-myself-homelander.gif" alt="Homelander saying I'll do it myself" />

---

### Issues Faced While Working on the Extension

* **Restricted Access**: By default, Chrome extensions can't modify pages with the `chrome://` protocol. However, you
  can enable this via `chrome://flags/#extensions-on-chrome-urls`.

* **Loading Issues**: The elements on the start page don't load all at once. They're added
  using [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), which made
  `MutationObserver` unreliable. In the end, I settled for a simple `sleep` logic to handle it.

And here's the final result with the extension:

<BlogPostImage src="/images/chrome-legacy-shortcuts.webp" alt="Chrome new tab with shortcuts in two rows" />

---

### How the Extension Works

At its core, the extension just changes the values for column and row like this:

```js
function applyStyles(container, shortcutsPerLine) {
    const totalShortcuts = 10; // max supported by Chrome.
    const rowCount = Math.ceil(totalShortcuts / shortcutsPerLine);

     container.style.setProperty('--row-count', `${rowCount}`);
     container.style.setProperty('--column-count', shortcutsPerLine);
}
```

---

You can grab the extension on GitHub: [ChromeLegacyShortcuts](https://github.com/ItzNotABug/ChromeLegacyShortcuts).