70109

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

Question:

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.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.

Answer1:

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)

Recommend

  • 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?