如何从网页DOM中获取元素到我的background.js中？ [英] How to get elements from a webpage DOM into my background.js?

问题描述

我试图为Chrome自动登录到此网页的Chrome扩展程序。它通过检测我何时进入页面，然后将浏览器重定向到登录页面，填入用户名和密码并单击登录按钮来完成此操作。

manifest.json：

  {
manifest_version：2，
 
name ：登录，
description：自动登录到页面，
version：1.0，
background：{
scripts ：[background.js]，
持久性：false 
}，
 
权限：[
tabs，
 http：// * /

} 
  

background.js：

  window.onload = function（）{
 chrome.tabs.onUpdated.addListener（function（tabId，changeInfo，标签）{
 if（tab.url ==https://www.itslearning.com/Index.aspx?customerid=&username=&redirectlogin=itslearning.com&MustUseSsl=true&）{ 
 chrome.tabs.update（tabId，{url：https：//vaf.itslear ning.com/elogin/}，function（）{}）; 
} else if（tab.url ==https://vaf.itslearning.com/elogin/）{
 var username = document.getElementById（ctl00_Username）; //不起作用
 var password = document.getElementById（ctl00_Password）; //不起作用
 var button = document.getElementById（ctl00_ButtonLogin）;如果（用户名&&密码&&按钮）{
 username.value =####; //不工作
; 
 password.value =######; 
 button.click（）; 
} 
} 
}）; 
}; 
  

通过右击 - > chrome中的inspect元素，我得到了字段的id。当我第一次运行它时，它将浏览器重定向到正确的页面，但它没有填写密码和用户名，所以我做了一些快速调试，似乎无法找到任何字段。我搜索了论坛，发现页面必须先完全加载，所以我添加了 window.onload = function（）{} ，但它仍然没有工作。为什么？

我已经在javascript中编写了一些小程序，但我是铬扩展开发的新手，所以如果有人有一些额外的提示或建议，请分享他们与我。

解决方案

后台脚本不能直接与常规页面的DOM进行交互。当您在后台脚本中使用文档时，您指的是Chrome浏览器为您的扩展程序创建的后台页面的DOM。

要访问网页的DOM，您需要内容脚本。您可以在清单中指定它，或使用 chrome.tabs.executeScript 以编程方式注入它。在你的情况下，你想要一直运行它在一个特定的URL最简单的方式是通过清单：

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

而在content.js中，您可以输入：

  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（）; 
 
 
 
 
 
 $ b 
所以在你的background.js中，你只需要保留重定向代码：
  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/}）; 
} 
  
（顺便说一句，有更有效的方式来使用 chrome.webRequest ）重定向。
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.
解决方案
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)

                        
这篇关于如何从网页DOM中获取元素到我的background.js中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！