Hack the frontend of a website in the browser

When you browse a website, the website frontend code (HTML, CSS, JS, etc) is sent to your browser so you can see it. This means that you can also change the code on your computer so you can see a custom version of the website, such as changing the colors and even how you interact with the web pages (auto clicking).

This can be done by running a script in your browser, with the help of an extension, such as Greasemonkey (Firefox) or Tampermonkey (support multiple browsers). The extension can manage which script to run on which website.

Install TamperMonkey (browser extension)

Warning: the script runned in TamperMonkey could read anything (password, credit card numbers) on the website and could do anything for you. Be extremely careful if you decide to run a script written by others.

Hint: to be safe, use a new profile in your browser (or use simply another browser) to isolate the script from accessing websites like email and social media.

Install Tampermonkey for your browser. After installation, you need to:

  • Go to Extension page of your browser, turn on Developer mode
  • Go into the settings (details) of Tampermonkey extension, toggle on Allow User Scripts
  • When you install the extension, nothing will run if you do not add any script.

Script examples

  • Change the Google search button on homepage
  • Modify the tabs on Google search results into a vertical menu
    • Hide the original tabs (Image, Videos, Shopping, News…)
    • Add new CSS to these links, including the translation using on hovering :hover
    • Loop through the links and create new HTML elements for the menu
    • Download script (.zip)
  • Use head to control Google logo (Python + TamperMonkey script)
    • This example uses WebSockets to communicate between Python and JavaScript in TamperMonkey. The data is sent in JSON format.
    • Download script (.zip)
  • Using JavaSript, you can emulate other interactions such as:
    • click a button .click()
    • focus on a button .focus()
  • You can also change how cursor looks like
  • You can combine your system with PyAutoGUI to control the cursor in Python

Debugging

  • Use browser console to find out the element (right click > Inspect)
  • Use console to debug: console.log("hello world");

Learn more