Customize your favorite websites with Greasemonkey

Hi~ This is Ding from the Software Engineer team of Progate.

Do you have some websites that you frequently visit but are not fully satisfied with the UI? Then this article is for you.

What is Greasemonkey?

Greasemonkey is a userscript manager made available as a Mozilla Firefox extension. It enables users to install scripts that make on-the-fly changes to web page content after or before the page is loaded in the browser.

- Wikipedia

But don't worry if you're not using Firefox, you can find other extensions that support userscript in here.

I prefer Violentmonkey if you are using Chrome, since Violentmonkey is an open source project.

What you need to know before reading

  • Basic knowledge of HTML & CSS
  • JavaScript (optional)

[PR] Progate allows beginners to learn practical programming by practicing writing code while actually creating products on the browser!

Let's try to modify Twitter!

Goal

I don't want to know what’s happening from Twitter so let's get rid of the right sidebar!

Investigation

f:id:dacer:20210201175636p:plain
1. First we right-click on the right sidebar and select Inspect to use Chrome's DevTools to see how the Twitter page is constructed.

f:id:dacer:20210201175930p:plain
2. Find the root element of the right sidebar.

f:id:dacer:20210201180047p:plain
3. Right-click on this element and select delete element. Boom! The sidebar is gone!

f:id:dacer:20210201180326p:plain
The sidebar is gone.

Start writing userscript

In this step you can use any editor you like, first let's write the metadata block of our userscript.

// ==UserScript==
// @name Sgtts
// @namespace https://prog-8.com/
// @version 0.1
// @description Say goodbye to Twitter's sidebar (aka Sgtts)
// @author Dacer
// @grant none
// @match https://twitter.com/*
// ==/UserScript==

@namespace: The combination of namespace and name is the unique identifier for a Greasemonkey script. So it's recommended to use your domain name as the @namespace.

@match: @match is used to specify what website this @match is used to specify what website the userscript runs on, for rules see the documentation on Match Patterns for Google Chrome, we only need this script to be run on Twitter, so we set it to https://twitter.com/* .

You can find the documentation of other syntaxes in https://wiki.greasespot.net/Metadata_Block

Then we need to hide the sidebar element we just found, and here we use document.head.appendChild to do that

const s = document.createElement('style');
s.textContent = `
.css-1dbjc4n .r-aqfbo4 .r-zso239 .r-1hycxz {
  display: none !important;
}
`;
document.head.appendChild(s);

The full code is as follows

// ==UserScript==
// @name Sgtts
// @namespace https://prog-8.com/
// @version 0.1
// @description Say goodbye to Twitter's sidebar (aka Sgtts)
// @author Dacer
// @grant none
// @match https://twitter.com/*
// ==/UserScript==

const s = document.createElement('style');
s.textContent = `
.css-1dbjc4n .r-aqfbo4 .r-zso239 .r-1hycxz {
  display: none !important;
}
`;
document.head.appendChild(s);

Click the new button in your extension's dashboard, input the code and save.

Let's test it!

Open a new tab and navigate to Twitter, check whether the sidebar has disappeared.

Homework

The width of the timeline is a bit strange, try modifying this userscript to make it fit the width of the screen?

SPOILER ALERT:

|

|

|

|

|

|

|

|

| gist.github.com

One more thing

Userscript can do more than just modify the style of websites, but we will not talk about it in this article.

You can find a lot of useful userscripts written by other people in greasyfork, for example, you can try to search user scripts for google.com.

!!Caution!!

Installing userscript is dangerous, even if the author of the userscript is not malicious, it still can lead to some unexpected problems. So please make sure you understand exactly what the userscript does before installing it.

References