How to inject a script before page load on a website?

Using Requestly’s Insert Scripts Rule, you can make on-the-fly changes to a webpage content. It allows you to automate, scrape & change webpages behaviour without needed to access the page source code.

Use Cases

  • Inject popular libraries or hosted scripts or execute custom code-snippet before or after page load using a simple rule builder.
  • Give custom theme to Twitter or any other website. Remove/hide unwanted sections from the page.
  • Debugging CSS (see example below).

Use Requestly browser extension to insert script before page load

To insert script before page load you can use Requestly’s Insert script rule.

  1. Install Requestly’s browser extension.
  2. Click Create your first rule and go to Insert Script and click Create Rule.
  3. Enter the source URL condition.
  1. Source Condition: Source condition is where you set criteria for the rules. You can use URLHost, or Path with RegexContainsWildcard, or Equals to match the source request. Learn more about source conditions here.
  2. Script Language: The specific script language (JS/CSS) that needs to be inserted.
  3. Script Source: Source Code or URL of the script that needs to be inserted.
  4. Script Load Time: When is the script loaded in the webpage. (Before Page Load/After Page Load)

See below example for inserting custom CSS before page load:

Output:

This article was written by:

Sagar Soni

Sagar Soni

Sagar, the co-founder and CTO of Requestly, has been pivotal in shaping the company's vision and product trajectory. With over a decade of professional experience, he has been affiliated with renowned companies like Google, Adobe, and Grofers.

Share this article:

You may also like