I’m building my first extension that suppose to get username & password from the user, save it in storage and use the saved info to login automatically to a couple of specific sites.

I want that when the user is entering the login pages in said sites, the extension will fill up the form and send it automaticlly but I’m struggling with implementing it.
What I wrote so far:

manifest.json

"background": {
        "service_worker": "background.js"
    },
"content_scripts": [
            {
                "matches": ["*//www.site.com/*"],
                "js": ["fill_form.js"]
            }
        ]

background.js

chrome.tabs.onUpdated.addListener((tabID, tab) => {
     
  // Auto login to www.site.com
  if (tab.url && tab.url.includes('www.site.com/login')) {

    (async () => {
      const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
      const response = await chrome.tabs.sendMessage(tab.id, {action: "fill_login"});

    })();
  }
});

fill_form.js

function loginToSite(login, id, code) {
  if (login == true){
    var form = document.getElementById("login_form");
    var form_id = document.getElementById("login");
    var form_code = document.getElementById("password");
  
    form_id.value = id
    form_code.value = huji_code;
    form.submit();
  }
}

chrome.runtime.onMessage.addListener(function(obj, sender, sendResponse) {
    if (obj.action == "fill_form") {
    // values that the user provided and were saved previously
      var login = chrome.storage.sync.get("login_checkbox");
      var id = chrome.storage.sync.get("id");  
      var code = chrome.storage.sync.get("code");  
      loginToSite(login, id, code);
    }
    return true;
  });

I guess I’m not understanding throughly the relationship between service workers and content scripts and how to properly submit a form in an external website.

Would love to get some help,

Thanks!