I didn't like the way the Twitter UI looked on my smaller screen, so I made a quick extension to fix that

Today we'll learn one of the most basic, but most powerful feature of a chrome extension... the content script. Code along with me or clone my repo to add it to your chrome.

If you'd like to further with your extension, here are some helpful docs.

Extensions: https://developer.chrome.com/docs/extensions/
Manifest: https://developer.chrome.com/docs/extensions/mv3/manifest/
API reference: https://developer.chrome.com/docs/extensions/reference/
Service workers: https://developer.chrome.com/docs/workbox/service-worker-overview/

In a new directory, create a manifest.json file, it's the most important file of any extension and ties the whole thing together.
It's fairly self explanatory defines a content script that will run any twitter twitter path, after the page loads (as defined by "matches": ["https://twitter.com/*"])

{
  "manifest_version": 3,
  "name": "Twitter Blue hider",
  "version": "1.0.0",
  "description": "Simply hides the Twitter Blue button on twitter, makes the UI nicer on a smaller screens.",
  "icons": {
    "16": "twitter.png",
    "48": "twitter.png",
    "128": "twitter.png"
  },
  "action": {
    "default_icons": {
      "16": "twitter.png",
      "48": "twitter.png",
      "128": "twitter.png"
    },
    "default_title": "Twitter Blue hider"
  },
  "content_scripts": [
    {
      "matches": ["https://twitter.com/*"],
      "css": ["twitter.css"]
    }
  ]
}

The script simply runs the CSS in twitter.css and targets an a tag inside the nav with an aria-label attribute of "Twitter Blue" and sets the display to none.

nav [aria-label='Twitter Blue'] {
  display: none;
}

The extension is so simple in terms of function, now lets add it to our browser. Go to chrome://extensions/ in Chrome, Toggle on Developer Mode, click load unpacked and select the directory of your project.