Insert Scripts

The Insert Scripts Rule allows you to inject JavaScript/CSS into web pages before/after they load. This means you can modify the DOM, change styles, or even add new functionality without altering the source code directly. It’s important for testing hypotheses or debugging during development and quality assurance processes.

To see how the Insert Script Rule can be configured and applied in different scenarios, watch the video below, where we demonstrate its usage and potential

Why Use the Insert Script Rule?

Inject popular libraries or hosted scripts or execute custom code snippets on or after page load using a simple rule builder.
Test & demonstrate SaaS applications like website widgets and monitoring scripts on target websites.

How to Configure the Rule

Open HTTP Rules and Create a New Rule

Navigate to the HTTP Rules tab in the web or desktop app. Click on + New Rule and select Insert Script from the options.

Name and Describe Your Rule

Provide a descriptive name for the rule to keep your setup organized. Optionally, add a brief description explaining its purpose for easier identification later.

Define the Source Condition

Define where the rule should be applied by specifying criteria such as URL, Host, or Path. You can choose from options like Regex, Contains, Wildcard, or Equals, or use a Filter for more precise conditions.

For more details on source conditions, read this guide.

Example:

To apply a rule on our demo website, use the following configuration:

Condition Type: URL
Operator: Contains
Value: requestly-playground.com

This example targets any requests made to the Requestly Playground, ensuring the script is applied wherever the URL contains requestly-playground.com.

Select the Code Source

You have two options for the code source:

Custom Code: Directly paste your script or CSS into the editor (used in the examples below).
URL: Provide a link to an external file containing the script or CSS.

In the URL option, you can also pick the response from the Requestly Mock Server using the Pick from Mock Server feature. This allows you to inject scripts hosted on the Mock Server directly into your rule.

For this example, we are using Custom Code as it allows you to easily add and test your code directly.

Choose whether to inject CSS styles or JavaScript code

You can add either CSS styles or JavaScript code:

To Add CSS Styles: Insert the following code to modify the web page's styling:

<style type="text/css">
  .product-card {
    background-color: #e0ffe5;
  }
  .product-image {
    mix-blend-mode: darken;
  }
</style>

This code changes the background colour of product cards to a light green (#e0ffe5) and adjusts the product images' blend mode.

You can also import this rule and apply it directly by using this shared list.

OR

Add JavaScript Code: Insert the following script to display an alert message:

<script type="text/javascript">
  alert("Script injected successfully!");
</script>

This JavaScript code triggers an alert with the message Script injected successfully! to confirm the rule is active.

You can also import this rule and apply it directly by using this shared list.

Decide whether to insert the script before or after the page load.

This option is available only when injecting JavaScript

As Soon As Possible: The script will be injected as soon as the page starts loading.
After Page Load: The script will be injected after all page content has fully loaded

If you are injecting CSS, it is applied automatically as soon as the rule is executed.

Save and Activate the Rule

Once you are satisfied with your configuration, click Save to store the rule. After saving, make sure to toggle the rule ON to activate it. This will apply the rule.

Test the Rule

To ensure the rule is working correctly, click the Test button and enter the URL of the page where you want to apply this rule.

A confirmation widget will appear to indicate if the rule has been successfully applied.

Here, you can see that the rule has been applied, and an alert displays the message Script Injected Successfully.

OR

Here, you can see that the rule has been applied, and the styles defined in the CSS are applied to the page.