Understanding Insert/Inject Script Rule

Insert/Inject Script Rule allows you to inject JavaScript into web pages as 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.

Content Overview

Video Guide

Step-by-Step Guide

To fully utilize the feature, let’s walk through the setup process:

1. Setting Up: Begin by installing Requestly in your browser and navigating to the Rules section.
2. Creating Your First Rule: Select the Insert/Inject Script option and specify the conditions under which your script should run.
3. Insert Script: Write or paste the JavaScript you wish to inject. This could range from simple DOM manipulations to complex functionality enhancements.
4. Deployment and Testing: Apply the rule and see your script come to life on the target webpage. It’s that simple!

Options

Below are details related to each option present on the Insert Script Rule Screen:

• Source Condition — (default: empty) It’s a matching condition for identifying the HTTP Requests on which rule is to be applied. Source condition can be applied based on URL, Hostname, or Path by using different matching criteria like Contains, Equals, Regex match, and Wildcard Match.
• Source Filters — Source Condition can be further refined using Source Filters. You can manage Source Filters by clicking the filter icon next to the Source Condition field.
• Language — [CSS, JavaScript] — Select which type of script you want to insert, Requestly will insert your custom code accordingly.
• Code Source — [Custom Code, URL] — Code Source helps in defining the source of the custom code. URL will accept any publicly available URL and load that on the target web page. Custom Code will load the custom code you type (or paste) inside the Custom Script box below.
• Insert — [After page load, Before page load] — Defines how you want your script to load.
• Custom Script — A small code editor where you can enter custom code to be inserted if the Code Source is Custom Code.
• Source — If Code Source is URL then you can insert a URL of the script.
• Pick from Mock Server — In case you want to use a local script file, you can create a file mock and select its Mock URL using this option.

Use Cases

The Insert/Inject Script Rule opens up a lot of possibilities. Here are just a few scenarios where it shines:

1. Test Custom Widget Code on Customer’s Web Pages

If you create widgets like Live Chat, Music widget, ads, monitoring, etc. that are deployed on customer websites, you can test or demonstrate how your widget would work on their website. Insert Script can help in locally inserting such code snippets on live websites. Here are the steps for the same:

1. Create a new Insert Script rule.
2. Use the target website’s hostname as the source condition.
3. Select options as given below:
   1. Language — JS (or CSS if you want to insert CSS, you can create 2 rules if you want to insert CSS & JS both)
   2. Code Source — Customer Code(Select URL if your script is hosted publicly)
   3. Insert — After Page Load (Select Before page load if your script is expected to run before page load)
4. Insert the code in the code block section.
5. Save the Rule
6. Test by entering the website address.

2. Test a Bug Fix

Fixing production bugs is always a rush. Testing those patches on the production environment, before actually patching, can significantly reduce the time spent on reverting it later or rushing another patch to fix the previous patch. Similar steps can be followed in this case:

1. Create a new Insert Script rule.
2. Use the target website’s hostname as the source condition.
3. Insert the code in the code block section.
4. Save the Rule
5. Test by entering the website address.

3. Feature Prototyping

Prototyping a feature directly on production websites can be done using the Insert Script rule. Early detection of any issue can reduce the number of last-minute issues.

The Insert/Inject Script Rule is one of the most used features of Requestly; it significantly improves how we approach web development and testing. By allowing immediate, on-the-fly modifications, Requestly speeds up the development cycle and fosters a culture of experimentation and continuous improvement.

Troubleshooting

There are some cases where rules might not work as expected, visit our troubleshooting guide for more details.