How to Inject JavaScript Code in Browser?

You may notice websites with several pop-ups when you use the internet. The pop-ups contain messages on the screen, like subscriptions and notifications. Besides, they also provide you with those annoying advertisements if you are on the free website.

At times, they can get really frustrating because you have to use those websites on a regular basis. They could be a new website, a work website, or just about anything that you prefer using daily. However, viewing these websites does not become old, as you can see them every day.

Can you do something about it? Yes, the good news is that you can do something about it to ensure that they don’t keep popping up regularly. Instead, you can go to the console website and then try and manipulate the document object model (DOM) using JavaScript or CSS.

How do you inject JavaScript code in Browser?

Today, with the help of Google Chrome and its extension store, you can inject JavaScript code into the Browser automatically. You just need to know how to do it. We will take you through the process in this post.

1) Install the extension to inject the code

The below code can be used only if you are using Google Chrome. You would want to install the extension custom JavaScript for your websites. The small extension lets you to be able to run JavaScript on any of the websites you wish to automatically.

Moreover, it helps you to save the code for future use on your web browser.

2) Locate DOM elements and create the injection code

You have to open the Chrome developer tools by making use of the F12 and then identifying the element using the pop-up. Using this example, you can use the iframe element using the ID wall frame containing the pop-up with a blurring rear.

We can use a small JavaScript snippet to add custom CSS. You can check if you can hide the pop-up from appearing.

/* DOM Manipulation
* If you want to update/add single style in the DOM Element style attribute, you can use this function:
* inject javascript after page reloads.
*/
function setCssStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
      style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
    idx;
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el. style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";
  }
}
var element = document.getElementById("wallIframe");
setCssStyle(element, "display","none !important");

The above code helps us to highlight the element wall frame and also hide it by adding the inline CSS.

3) Test the injection code

You can test the injection code using the Chrome developer console for making sure that the code is working. Now, you can add the extension and custom JavaScript for your websites and then check whether it works.

It helps you analyze whether the JavaScript works the next time if you visit that particular website. If you want to add it, then you need to make use of the left-click button found at the extension icon on the address bar. You can add the custom snippet and save it.

4) Did the injection code work?

Sadly, the iframe may or may not appear depending on the console you are using it. It could probably be because the iframe is loading only after a certain period of time of the page loading.

If it does not load in a few seconds, then you could always try adding a timeout function to the original snippet and then see if that helps.

setTimeout(
     function() {
       function setCssStyle(el, style, value) {
         var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
             style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
           idx;
         if (result) {
           idx = result.index + result[0].indexOf(result[1]);
           el.style.cssText = el.style.cssText.substring(0, idx) +
             style + ": " + value + ";" +
             el.style.cssText.substring(idx + result[1].length);
         } else {
           el.style.cssText += " " + style + ": " + value + ";";
         }
       }
       
       var element = document.getElementById("wallIframe");
       setCssStyle(element, "display", "none !important");
     }, 10000);

The code waits for a few seconds before you can execute it. In case you were wondering, it can work well this time. If you want, you can also add the event listener to wait for the webpage to load fully.

5) Final thoughts

document.addEventListener("DOMContentLoaded", function() { 
    // Your function goes here
}

When you add the pop-up code after some time, then the function that is written above may not work correctly as it should. You might want to stick to the timeout function. Besides, you can also make use of the extension for adding other snippets.

A few of them include block pop-ups and block ads to help enhance the website’s standard font. Moreover, it also helps in increasing the responsiveness of the website. Besides, if you want, you can update its appearance and do a whole lot more with it.

When the JavaScript snippets are added, then they can run on future visits that are found on the websites. Once the JavaScript snippets are added, then they will work on the next visit that you make to the websites.

FAQs

Conclusion

This is it. We have come to the end of our discussion on how to inject JavaScript code in Browser. We hope that you found this post helpful and were able to understand the nuances of using JavaScript.

Probably, you are a beginner or a hobbyist wanting to learn how to use JavaScript. Well, you are on the right track because it is a universal programing language that finds its use in almost all sectors of today’s market.

DISCLAIMER: The post is entirely based on the author and does not represent any company or have an association with other authors. The code is merely for citing examples of how they are used on websites you plan to inject JavaScript code in Browser.