How can I run content script before loading of webpage?

Question

I want to change some dom content such that all input fields value is "" of a web page before the user can see it .How can I do that? Is there any way to do that? Thanks.

Answer 1

You need a content script that runs on document_start, and either of the two methods:

1. MutationObserver (the docs) but it'll slow down page loading:
   • How to change the HTML content as it's loading on the page
   • Modify page element as soon as it's loaded

2. Add a CSS style override to make INPUT text transparent, and when the page is loaded clear the elements and remove the style:

   manifest.json:

   "content_scripts": [{
       "matches": ["<all_urls>"],
       "run_at": "document_start",
       "all_frames": true,
       "js": ["content.js"]
   }],
   

   content.js:

   // document is empty now so we'll only add the style
   var style = document.documentElement.appendChild(document.createElement('style'));
   style.textContent = 'input {color: transparent !important;}';
   
   // once DOM is ready clear the inputs
   document.addEventListener('DOMContentLoaded', function() {
       var inputs = document.getElementsByTagName('input');
       for (var i = inputs.length; --i >= 0; ) {
           var input = inputs[i];
           if (input.value) {
               input.value = '';
           }
       }
       style.remove();
   });