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 <a href="https://vaf.itslearning.com/elogin/" rel="nofollow">this</a> 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_version": 2, "name": "Login", "description": "Automaticly logs in to a page", "version": "1.0", "background": { "scripts": ["background.js"], "persistent": false }, "permissions": [ "tabs", "http://*/" ] }


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.


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 <a href="http://developer.chrome.com/extensions/content_scripts.html" rel="nofollow">content script</a>. 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)


  • Running an extension in background on page load/refresh
  • Inject chrome browser extension content script based on URL
  • Update chrome extension icon on tab switch/change
  • How to get content script run on page's update and url's change?
  • IIS 7.0 URL Rewrite Module - Root URL doesn't display
  • C# WebBrowserDocumentCompletedEventHandler inside of foreach loop
  • Dynamically deploying content scripts in Chrome extensions
  • Refresh after a timer of 5000 seconds and print the alert
  • How to implement collision detection on nodes which are in StackPane (in JavaFX)?
  • InfoWindow showing in wrong place
  • Chrome extension update notification
  • Pubnub subscribe stops receiving messages after some time
  • Applying SUPEE-6788, it removes static block on home page
  • How to check the permission whether a friend allow me to post on his wall or not using php sdk
  • How to do a pull request from my current state
  • Test-Path / System.IO.Directory::Exists not working as expected
  • Do stored procedures have the ability to delete a file from the OS?
  • What do getresuid() and setresuid() do?
  • Django RESTful API error “type object 'User' has no attribute '_meta'”
  • Gitlab - Google compute engine Continuous delivery
  • Can't access Facebook campaigns
  • How to upload files in php using html
  • How to add System.Windows dll to Visual Studio 2010 express?
  • css background images not always displayed
  • CloseOptionsMenu doesn't work?
  • Granting permissions to Azure Active Directory Web Application automatically
  • Outlines on links in IE9 remains when focus is changed
  • AppleScript : find open tab in safari by name and open it
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Cross-Platform Protobuf Serialization
  • How to get icons for entities from eclipse?
  • Revoking OAuth Access Token Results in 404 Not Found
  • AngularJs get employee from factory
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • Turn off referential integrity in Derby? is it possible?
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • How to push additional view controllers onto NavigationController but keep the TabBar?