Javascript 如何将网页DOM中的元素导入my background.js？

我正在尝试为Chrome做一个自动登录网页的扩展。它通过检测我何时进入页面来实现这一点，然后将浏览器重定向到登录页面，在该页面中填写用户名和密码并单击登录按钮

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();
            }
        }
    });
};

我通过在chrome中右键单击->inspect element获得了字段的id。当我第一次运行它时，它将浏览器重定向到正确的页面，但它没有填写密码和用户名，所以我进行了一些快速调试，似乎它永远找不到任何字段。我在论坛里搜索了一下，发现页面必须先完全加载，所以我添加了

window.onload=function（）{}

，但仍然不起作用。为什么?

---

我以前用javascript编写过一些程序，但我对chrome扩展开发还不熟悉，所以如果有人有其他的提示或建议，请与我分享。

后台脚本无法直接与常规页面的DOM交互。在后台脚本中使用

document

时，您指的是Google 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();
}

因此，在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

）

有更有效的方法引起重定向，因此当您在

document.getElementById（“ctl00\u用户名”）

-它返回

null

？另外，您可以尝试

Sys.Application.add\u load（function（）{…}而不是
window.onload=function（）{…}

？@YuriyGalanter如果我删除if语句

if（username&&password&&button）

它会给我这个错误：

不能调用null的方法'value'，如果这回答了您的问题。我尝试添加
Sys.Application.add\u load（function（）{…}）
但是它在allI上不起作用，我想你可能会把jquery调用和标准JS混淆了。而不是
username.val（“######”）；password.val（“#######””尝试
username.value=“#####”；password.value=“######”@YuriyGalanter是的，我注意到了，但我试着改变了它，但仍然不起作用