CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Sindre Stephansen
Sindre Stephansen

Reputation: 65

How to get elements from a webpage DOM into my background.js?

I`m trying to make an extension for Chrome that automatically logs in to this web page. It does this by detecting when I enter the page, then it redirects the browser to the login page, where it fills in the username and password and clicks the login button.

manifest.json:

{
    "manifest_version": 2,

    "name": "Login",
    "description": "Automaticly logs in to a page",
    "version": "1.0",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    "permissions": [
        "tabs",
        "http://*/"
    ]
}

background.js:

window.onload = function() {
    chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
        if (tab.url == "https://www.itslearning.com/Index.aspx?customerid=&username=&redirectlogin=itslearning.com&MustUseSsl=true&") {
            chrome.tabs.update(tabId, {"url": "https://vaf.itslearning.com/elogin/"}, function(){});
        } else if(tab.url == "https://vaf.itslearning.com/elogin/") {
            var username = document.getElementById("ctl00_Username"); //doesn't work
            var password = document.getElementById("ctl00_Password"); //doesn't work
            var button = document.getElementById("ctl00_ButtonLogin"); //doesn't work
            if (username && password && button) {
                username.value = "####";
                password.value = "######";
                button.click();
            }
        }
    });
};

I got the id for the fields by right clicking -> inspect element in chrome. When I first ran it, it redirected the browser to the correct page, but it didn't fill in the password and username, so I did some quick debugging, and seems like it's never able to find any of the fields. I searched around the forum, and found out that the page had to be fully loaded first, so I added window.onload=function(){} but it still doesn't work. Why?

I'm have programmed a little in javascript before, but I'm new to chrome extension development, so if anyone has some additional tips or suggestions, please share them with me.

Upvotes: 0

Views: 2784

Answers (1)

rsanchez
rsanchez

Reputation: 14657

Background scripts can't interact directly with the DOM of regular pages. When you use document in a background script, you are referring to the DOM of the background page that Google Chrome creates for your extension.

To access the DOM of web pages you need a content script. You can specify it in the manifest or inject it programmatically using chrome.tabs.executeScript. As in your case you want to always run it in a specific URL the easiest way is via the manifest:

"content_scripts": [
  {
    "matches": ["https://vaf.itslearning.com/elogin/"],
    "js": ["content.js"]
  }
],

And in your content.js you can put:

var username = document.getElementById("ctl00_Username");
var password = document.getElementById("ctl00_Password");
var button = document.getElementById("ctl00_ButtonLogin");
if (username && password && button) {
   username.value = "####";
   password.value = "######";
   button.click();
}

So in your background.js you only need to leave the redirect code:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (tab.url == "https://www.itslearning.com/Index.aspx?customerid=&username=&redirectlogin=itslearning.com&MustUseSsl=true&")
        chrome.tabs.update(tabId, {"url": "https://vaf.itslearning.com/elogin/"});
}

(BTW, there are more efficient ways to cause a redirect using chrome.webRequest)

Upvotes: 2

Related Questions