CODEWITHSUNDEEP
javascriptgoogle-chrome-extensioncode-injectionrequestly
deepak singh
deepak singh

Reputation: 31

chrome extension to inject javascripts (one or more) on a webpage

I am a beginner-level web developer and first time on Stackoverflow. I need help with a Chrome extension to inject javascript on a web page. This helps me test my company's product on potential customer's websites.

I am facing one problem. I am not able to find a good Chrome extension to inject the scripts on a webpage.

This is how my company's javascript code looks like, which goes into the customer website.

// First Script Block
<script type="text/javascript" 
    src="https://my-staging-website.com/main.js" 
    data-key="{{key}}" 
    data-id="{{some_Id}}> // not able to add these properties in requestly
</script>

// Second Script Block (Should run after the script is loaded from URL)
const app = new AppSDK();
app.init({ ... });
app.identify({ ... });

I have removed some details for privacy reasons.

I tried out a couple of Chrome extensions and finally settled on the Requestly Chrome extension to inject the scripts. It solves the problem partly. I was able to add two script blocks in Requestly, and it runs them one by one, which is what I want, but I am not able to add attributes/properties data-key, data-id to the first script block that is loaded from URL.

Here is my Requestly configuration

enter image description here

Is there any way to solve this problem? I am a beginner, so I might be using tools incorrectly. I also tried to copy and paste the code directly into the Chrome dev tool console, but it didn't work. Requestly is able to inject and run the scripts but not able to add the attributes without which I get errors

Upvotes: 3

Views: 415

Answers (1)

Sachin Jain
Sachin Jain

Reputation: 21842

Update 12/03/2024

It is now possible to define/update the attributes of the script block that eventually gets injected via the rule.

enter image description here enter image description here

Original Answer

The capability to add properties/attributes to the script URL doesn't exist as of now. Here is a feature request in the github repo.

As a workaround in the interim, You can use the Custom Code option instead of the URL option in the Insert Script feature in Requestly and create the script block to load the script with attributes.

Here's an example code that you can try

const script = document.createElement('script');
script.type="text/javascript"
script.src = <script_url>;
script.setAttribute("data-id", "{{your_data_id}}");
script.setAttribute("data-key", "")
(document.head || document.documentElement).appendChild(script);

You can keep your second script block as is, and it should work fine. Yes, there is some manual work, but this approach should also work when you paste this into Chrome Devtools.

Upvotes: 1

Related Questions