My User Scripts
Tags: userscripts, gitlab, github, slack
Published: 2022-03-07 15:08:41

---
title: My User Scripts
published: true
date: 2022-03-06 01:40:00 UTC
tags: UserScripts,GitLab,GitHub,Slack
canonical_url: https://kevincox.ca/2022/03/05/user-scripts/
---

<main><p><a href="https://en.wikipedia.org/wiki/Userscript">User Scripts and Styles</a> are a way for users to improve the websites they visit. They can add features, fix bugs or just make a site more usable. I keep all of my scripts and styles at <a href="https://userscripts.kevincox.ca">https://userscripts.kevincox.ca</a>. However, since clicking on every script one-by-one to find out what it does isn’t the most convenient I’m going to highlight some of the ones that I think would be the most widely useful.</p>
<h2 id="global"><a href="https://kevincox.ca/2022/03/05/user-scripts/#global">Global</a></h2>
<h3 id="ctrlenter-submit"><a href="https://kevincox.ca/2022/03/05/user-scripts/#ctrlenter-submit">Ctrl+Enter Submit</a></h3>
<p><a href="https://userscripts.kevincox.ca/ctrl-enter-submit.user.js">Ctrl+Enter Submit</a> is a simple script that submits the current form when you hit <kbd>Ctrl+Enter</kbd> while in a <code><span>&lt;textarea&gt;</span></code>. This is a commonly used UX pattern but isn’t a default browser behaviour (at least on Firefox). This script just fixes that.</p>
<p>I have seen some rare incompatibilities when the site also tries to handle the shortcut themselves, but usually it just works gracefully. If you run into more sites with problems you are welcome to send me a patch with a new ignore entry.</p>
<h2 id="github"><a href="https://kevincox.ca/2022/03/05/user-scripts/#github">GitHub</a></h2>
<h3 id="native-emoji-on-linux"><a href="https://kevincox.ca/2022/03/05/user-scripts/#native-emoji-on-linux">Native Emoji on Linux</a></h3>
<p><a href="https://userscripts.kevincox.ca/github-emoji-linux.user.js">GitHub - Emoji on Linux</a> works around a <a href="https://github.com/github/g-emoji-element/issues/2">GitHub “bug”</a> where they assume that Linux users don’t have fonts with emoji and serve images instead. This just spoofs the <code>User-Agent</code> to the JavaScript so that it doesn’t contain the string “Linux” and therefore uses the user’s native emoji.</p>
<div>
<p>Before: <img src="https://cloudflare-ipfs.com/ipfs/QmVJo2AsJFSSkym2Fej3T6J89LhzLe9Ft6TNCYapCn9us7/github-emoji-before.png" alt="before" crossorigin=""></p>
<p>After: <img src="https://cloudflare-ipfs.com/ipfs/QmRE3LZuomq4vjgAmyBNYgiWJnEZMXSCxATrKJUYmpm1Qj/github-emoji-after.png" alt="after" crossorigin=""></p>
</div>
<p>Everyone has different tastes, but I like my emoji font (that is why I use it after all).</p>
<h3 id="expand-checks"><a href="https://kevincox.ca/2022/03/05/user-scripts/#expand-checks">Expand Checks</a></h3>
<p>At work, we have a lot of steps in our CI. But for some reason GitHub only shows 6 by default! Maybe we have too many but I find it a lot easier to have them all visible instead of having to manage nested scrolling to view them all.</p>
<p><a href="https://userscripts.kevincox.ca/github-expand-checks.user.css">GitHub - Expand Checks</a> fixes that by removing the scrolling from the checks list.</p>
<h3 id="expand-workflows"><a href="https://kevincox.ca/2022/03/05/user-scripts/#expand-workflows">Expand Workflows</a></h3>
<p>When you have a huge list of checks it can be nice to use the workflow graph view to help see the dependencies at a glance. But, for some reason the GitHub workflow window has a fixed size and leaves a bunch of whitespace at the bottom of the screen.</p>
<p><a href="https://userscripts.kevincox.ca/github-expand-workflow.user.css">GitHub - Expand Workflows</a> simply removes the max-size so that you can see as much as possible at a time.</p>
<h3 id="default-code-font"><a href="https://kevincox.ca/2022/03/05/user-scripts/#default-code-font">Default Code Font</a></h3>
<p>For some reason GitHub uses a font size that is much smaller than my default font size. They also override my default monospace font which I would rather keep when viewing code.</p>
<p><a href="https://userscripts.kevincox.ca/github-user-font.user.css">GitHub - Default Font</a> simply clears GitHub’s overrides so that my preferred font face and size are used. (<a href="https://typeof.net/Iosevka/">Iosevka</a> 👌)</p>
<div>
<p>Before: <img src="https://cloudflare-ipfs.com/ipfs/QmZPoafERM2iyiCTfsCCSmxJxZ5EHg7kcWf7F351Bi1taE/github-font-before.png" alt="before" crossorigin=""></p>
<p>After: <img src="https://cloudflare-ipfs.com/ipfs/QmaK863sna3bXq4mJwQZgZoH1ujpqA1WncdNFJ4hU23Ww6/github-font-after.png" alt="after" crossorigin=""></p>
</div>
<h2 id="gitlab"><a href="https://kevincox.ca/2022/03/05/user-scripts/#gitlab">GitLab</a></h2>
<h3 id="dropdown-size-fix"><a href="https://kevincox.ca/2022/03/05/user-scripts/#dropdown-size-fix">Dropdown Size Fix</a></h3>
<p><a href="https://userscripts.kevincox.ca/gitlab-dropdown-size.user.css">GitLab - Dropdown Size</a> makes it so that the label dropdown can show more than 1½ labels at a time. I have also <a href="https://gitlab.com/gitlab-org/gitlab/-/merge_requests/82255">submitted a patch upstream</a>, but they may not like the way this makes the dialog scroll. (It used to scroll just the label list, I like the new way better because I don’t need to see the fixed header, search bar and static actions all the time.)</p>
<div>
<p>Before: <img src="https://cloudflare-ipfs.com/ipfs/QmcdpReXjbKD59VqGu9SaegF4wE5TjuFvAhDk3biTdiytf/gitlab-dropdown-before.png" alt="before" crossorigin=""></p>
<p>After: <img src="https://cloudflare-ipfs.com/ipfs/QmPQfxS1xhaVxpZ1wTTzuMum6AcBGx6kQpjHV8kENHNMkT/gitlab-dropdown-after.png" alt="after" crossorigin=""></p>
</div>
<h3 id="native-emoji"><a href="https://kevincox.ca/2022/03/05/user-scripts/#native-emoji">Native Emoji</a></h3>
<p>GitLab isn’t quite as forceful as GitHub when it comes to emoji, but they do think they know what emoji I like more than I do and override my defaults.</p>
<p><a href="https://userscripts.kevincox.ca/gitlab-emoji.user.css">GitLab - Native Emoij</a> simply clears that override so that my default (and preferred) emoji are used.</p>
<div>
<p>Before: <img src="https://cloudflare-ipfs.com/ipfs/QmRoQitBSiR3GfeiEB3bEmsmdHbPVgacS6m9ipPXLdAEhr/gitlab-emoji-before.png" alt="before" crossorigin=""></p>
<p>After: <img src="https://cloudflare-ipfs.com/ipfs/QmbJG6EWJs1Zj5fQuFjDhSHFaN1S3HT7VASPpGZks5EPKP/gitlab-emoji-after.png" alt="after" crossorigin=""></p>
</div>
<h2 id="slack"><a href="https://kevincox.ca/2022/03/05/user-scripts/#slack">Slack</a></h2>
<h3 id="open-in-browser"><a href="https://kevincox.ca/2022/03/05/user-scripts/#open-in-browser">Open in Browser</a></h3>
<p>Slack <strong>really</strong> wants you to install the app. But I really don’t feel the need to run a second browser on my computer just so that they can bypass the sandbox, so I use it in-browser. Unfortunately they keep nagging me to open in-app.</p>
<p><a href="https://userscripts.kevincox.ca/slack-browser.user.js">Slack - Open in Browser</a> simply activates on this nag page and instantly redirects you to the in-browser Slack app.</p>