Javascript 如何创建一个Google Chrome扩展，当我点击图标时自动填充用户名/密码？

到目前为止，我很难找出我的代码出了什么问题，因为当我单击图标时，它说我同时运行background.js和autofill.js。但不会自动填充gmail站点。这是我第一个使用javascript的chrome扩展。我的最终目标是，它可以自动填充所有站点（不仅仅是gmail），并且能够在一个.txt文件中存储/读取所有密码。另一件事是，当我试图运行这段代码时，它说我的autofill.js文件有问题，并给了我错误“uncaughttypeerror:无法将属性'value'设置为null。这是针对autofill.js的，就在注释的下方//填写您的用户名和密码。 谢谢你花时间来帮助我，任何输入都会帮助我，因为我被卡住了，撞到了墙

manifest.json：

   {
  "name": "Test",
  "manifest_version": 2,    
  "version": "1.0",
  "description": "This is a Chrome extension that will autofill passwords",
  "browser_action": {
    "default_icon": "icon.png",     
    "default_popup":"popup.html",
    "default_title": "PasswordFill" 
  },


//********************************************************************* 
//declaring the permissions that will be used in this extension

 "permissions": ["*://*.google.com/", "tabs", "activeTab", "*://*.yahoo.com/"],

  "background": {
    "scripts": ["background.js", "autofill.js"] 
  },


//********************************************************************* 
/* Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them */

"content_scripts": [
    {

//Specifies which pages this content script will be injected into
    "matches": ["https://accounts.google.com/ServiceLoginAuth"], 

//The list of JavaScript files to be injected into matching pages
    "js": ["autofill.js"], //was background.js

//Controls when the files at "js" are being injected
    "run_at": "document_end",

    "all_frames": true
    }
]


}

background.js：

     console.log("Background.js Started .. "); //for debug purpose so i can see it in the console log

    chrome.browserAction.onClicked.addListener(function (tab) { //Starts when User Clicks on ICON



      chrome.tabs.executeScript(tab.id, {file: 'autofill.js'});

      console.log("Script Executed .. "); // Notification on Completion
    });

autofill.js：

console.log("Autofill.js Started .. "); //for debug purpose so i can see it in the console log

//define username and password

var myUsername = 'McAfee.sdp';

var myPassword = 'baskin310';





//finds the fields in your login form

var loginField = document.getElementById('Email');

var passwordField = document.getElementById('Passwd');





//fills in your username and password

loginField.value = myUsername;

passwordField.value = myPassword;





//automatically submits the login form

var loginForm = document.getElementById ('signIn');

loginForm.submit();

---

你应该先花些时间阅读开发内容。确保你了解扩展是如何工作的

此外，作为一般规则，如果脚本在某行代码中崩溃，执行将停止，扩展很可能会在您希望它做的任何事情上失败（取决于崩溃发生的位置），就像在任何其他应用程序中一样

未捕获的TypeError:无法将属性“value”设置为null

该错误告诉您正在尝试“访问”（设置）一个“缺少”（null）对象的属性

loginField.value=myUsername

尝试访问

loginField

的

value

，因此您可以轻松推断

loginField

为空，这反过来意味着

var loginField=document.getElementById（'Email'）没有真正起作用。但不要相信我的话，要学会自己调试它

失败的原因是另一回事：扩展是“沙盒式”的，不能在任何时候随意改变页面内容——你有“内容脚本”。返回文档并阅读和

在您的具体情况下：


唯一的后台脚本文件应该是background.js；删除autofill.js
尽可能使用事件页面而不是后台页面
autofill.js是一个内容脚本，您已将其添加到清单中。无需使用chrome.tabs.executeScript使用程序注入
了解如何在背景/工具栏和内容脚本之间进行通信-您将需要它
您的扩展需要访问'chrome.tabs.*的权限，因此在扩展清单的权限列表中添加“tabs”
你解决问题了吗@用户3409109