Cool Browser Tricks

When you browse the internet, sometimes you will encounter websites that annoy you in a certain way. It could be that they distract you from your initial goal or reaching your goal is harder than it should be. I am going to show you a few browser tricks that allow you to customize certain websites or improve unpleasant experiences. Most of the tricks are very easy, some of the tricks require that you learn a bit about how the internet works and the more advanced ones require that you write a few lines of CSS or JavaScript code.

Let's get more concrete with some examples:

You can change the texts on websites to make better screenshots or remove user interface elements that take up too much space.
With a browser extension and a single line of CSS code (display: none;) you can remove sidebars or ads that distracting and annoy you on sites you visit frequently.
You can increase the font size of hard to read text
Other websites hide their content behind a paywall, but sometimes this can be easily side-stepped by deleting an HTML element or applying display: none; on that element. I'll show you how.
On Instagram the video player shows no download button. But of course the browser downloads a video when playing it.

As an example, here is a short video explaining how to open the Developer Tools of a Browser and download an Instagram video as a file to your PC. The rest of the article covers similar topics.

Browser development tools

Did you know that pretty much every browser has a calculator built-in? Also, you can see the code of any website and make changes to your liking. You just need to open the development tools (dev tools) by pressing F12 on your keyboard. Alternatively, you can right click anywhere on a page and select 'inspect element' (or 'view page source'). This might be called slightly different depending on the browser you use.

Inspecting elements: Revealing The Webpage's Secrets

'Inspect element' opens the dev tools with the 'Elements' tab active. There you can see all the code of the currently open page. On the left side, are all the HTML elements the page consists of and on the right side the CSS styles of the currently selected HTML element. Sometimes there is information 'hidden' in the HTML or JavaScript code that the browser doesn't display.

This allows you to cheat in badly built quiz like a child did in this tweet. On another occasion the journalist Josh Renaud found the Social Security numbers of 100,000 teachers in the HTML code. Missouri’s Republican Governor Mike Parson described the action of the journalist as hacking which showed is lack of knowledge about how the internet works and that he didn't know about the trick I am showing here. This created a huge backlash as any web developer or cyber security expert criticized this kind of defamation, instead of owning up to the data leak. You can read the full story on techcrunch.

The essential take away here and a rule that every web developer should follow is that you can never trust the client. A client can always change and alter data in malicious ways before sending it to the server. Therefore, a server must first validate any data that comes from a client. More about client server interaction: 'How Does The Internet Work?'

You can double click HTML elements and change the code or delete it either via a right click 'delete' or selecting an element and pressing the del key.

You can also change the appearance of the website by changing the CSS code. On the right side you should be able to see an area with curly braces that looks something like this:

  {
  
  }

First select the HTML element you want to remove. There you can add a CSS property and value pair. E.g. the property display and the value none. And don't forget the semicolon (;). So, after you make changes this should look like this:

  {
      display: none;
  }

Just for fun you can also try some other commands, e.g. background-color: rgb(255, 0, 0);. The three numbers have to be between 0 and 255. They stand for red, green and blue. Here are some more commands you can try out: font-size: 30px; or filter: hue-rotate(90deg);. CSS is quite powerful. It's a bit like digital photo editing with Photoshop.

Secret Calculator (JavaScript Console)

After you open the development tools, you can go to the 'Console' tab. There should be a text field where you can type in a mathematical expression like 1+2 to let the browser calculated it for you. Calling this feature a calculator is actually quite an understatement. The 'Console' actually executes JavaScript code. Such mathematical expressions are also valid JavaScript code. Therefore, they are evaluated without problem.

Sometimes you first need to allow copy and pasting into the text field it by typing something like 'allow pasting'. This is for security reasons because it would be dangerous if you copy and paste code into it that you don't understand. If you open the console on https://www.facebook.com/ there is actually a big warning about this. Seems like many people got scammed by evil people on facebook. Such bad actors try to convince you to run code they send you. If you run this code, they could be able to steal your account session and use your account for their purposes, even without knowing your mail or password. So don't blindly copy code from people you don't know. If you are still adventurous, open a new incognito or private window. There it should be pretty save to run any code.

See the section below about Fake Screenshots for some more JavaScript examples.

Make Fake Pretty Screenshots

Ever wanted to fake Donald Trump tweets? Ever wanted to add a few more numbers to your online bank account? Well, now you can. The following JavaScript command activates a design mode which allows you to edit any text on the website you are currently visiting.

  document.designMode = "on";

Some more JavaScript examples

These commands start a party on the website! Try it out! 🥳

  setInterval(function(){
    for(let i=0; i<document.all.length; i++){
      let redValue = Math.round(Math.random() * 255); // 0-255
      let greenValue = Math.round(Math.random() * 255); // 0-255
      let blueValue = Math.round(Math.random() * 255); // 0-255
      document.all[i].style.backgroundColor = `rgb(${redValue}, ${greenValue}, ${blueValue})`
    }
  }, 650)

Here is another cool thing that you should try!

  location.href = atob("aHR0cHM6Ly9iaXQubHkvSXFUNnp0")

If you have a problem with it, refer to the above-mentioned security advice.

Shoutout to JLarky for this.

Avoiding Distracting YouTube Recommendations

In the past, when I wanted to research a topic on YouTube I oftentimes would get distracted by some video recommendations on the main page. There are two tricks to side-step this:

The first on is to install a browser extension for exactly this use case. The extension Unhook: Remove YouTube Recommended Videos (link to extensions: chrome, firefox) allows you to hide the videos on the YouTube main page (Home Feed), recommended videos in the sidebar etc.

The second approach is to open a new tab and directly go to the search page by appending /results at the end of the https://youtube.com URL. So, in its entirety: https://youtube.com/results. This can also be a bit faster because the main page doesn't need to load. You can even save another page load by directly entering your search terms at the end of the URL.

Here is an example for such a search: let's say we are fascinated by the intelligence and cognition of animals. So we want to learn more about the ability of the African grey parrot to reproduce human language. So, we end up searching for 'beatboxing bird'. The corresponding URL looks like this:

https://youtube.com/results?search_query=beatboxing bird

If you look carefully, there is a plus sign (+) between our search term which is automatically added by the browser (it also works without typing the plus sign). You might wonder about the question mark (?) and the equal sign (=). ~~These details are explained in TODO~~ .

More examples of URL Shenanigans

Searching directly via the URL does not only work on YouTube but also on google:

https://www.google.com/search?q=bird beatboxing

Oftentimes you can also see something like ?page=2 or a shorter version ?p=2. You can access a specific page by replacing the 2 with a 10 for example.

At the time of writing this, you cannot skip forward in YouTube Shorts. But you can watch a Short in the regular video player by changing the URL. The video id stays the same while you need to replace shorts/VIDEO_ID with watch?v=VIDEO_ID. Here an example:

https://www.youtube.com/shorts/B1t4Fjlomi8

https://www.youtube.com/watch?v=B1t4Fjlomi8

Another noteworthy thing about URLs is that oftentimes parts after the question mark are used to track data for marketing reasons. So, anything that has utm in its name is used for tracking and can be safely omitted. An example URL for an online shop could look like this:

https://www.somefashionsite.com/products/shoes?utm_source=Instagram&utm_medium=Social&utm_content=link

and can be shortened to this:

https://www.somefashionsite.com/products/shoes

~~Once gain more details about the question mark and accessing things via URLs are explained in TODO~~ .

Customizing websites with CSS

On some non-English Wikipedia articles the text is very wide (they already improved this design flaw for some languages). So, after each line break the eye has to jump from the far right of the screen to the far left as you can see below.

The many words without a line-break make reading difficult on the Spanish Version of Wikipedia.

It would be better if the text wraps earlier into a new line. We can achieve this by applying a width of 80 text characters on the content HTML element with the CSS command width: 80ch;. You can see the result in the image below.

After applying the CSS style the text wraps already after 80 characters which is easier to the eyes.

You can manually select the HTML element and apply the CSS, but then you would need do to this every time you visit Wikipedia. So, instead you can install a browser extension to override the CSS style for this website. Below are a few extensions listed. Just keep in mind that you also need to use a CSS selector to select the HTML for which you want to apply the styles. At the time of writing #content does work. So the whole CSS code you would write for Wikipedia would look like this:

  #content {
    width: 80ch;
  }

If you think you are consuming too much social media, you might want to make it less appealing by removing all the color from the website. You can do this with this command: filter: grayscale(100%); Values between 0% and 100% are allowed, so you could also only use social media in gray, which might be less appealing.

Browser extensions that allow you to change the style of websites

With or without CSS code: Stylebot
Extensions that allow overriding with CSS code: CSS Override for Firefox, User CSS or Styler

Automated Clicking Hundreds of Times

Writing small JavaScript programs. For example, there is a website that has many collapsible headings. I want to search something on the site with (Ctrl+F or Cmd+F on Mac), but the seach doesn't find anything because the text is hidden. To search I would need to open every heading manually. So, if I have to do this oftentimes I could instead automate it with a short JavaScript program.

e.g. on this website are many collapsible headings in the sidebar: https://affinity.help/designer/en-US.lproj/index.html

This JavaScript code works as follows: On the current website document we are on, it selects all elements that are tagged as books (a HTML class attribute or CSS selector). Then for each of these elements a click is performed.

  document.querySelectorAll('.book').forEach(element => element.click())`

Side-Stepping a Paywall

Bypassing a paywall is a bit more complicated to explain. Also, it depends on how the paywall is implemented. If you are lucky it is enough to delete the HTML element that is on top of the actual content. If the content is coming in a readable form from the server and is then made unreadable via JavaScript in the browser, then you can try to disable JavaScript in the dev tools and reload the page. Without JavaScript the code cannot be made unreadable. Checkmate. ♟ In case, there is some kind of login mechanism, you are out of luck. In that case, the content is only sent from the server if you logged in beforehand. Of course, you can also install some browser and hope it works.

Why learn Web Development?