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

【问题标题】：How Do I Create a Google Chrome Extension that autofills username/password when I Click the icon?当我点击图标时，如何创建一个自动填充用户名/密码的 Google Chrome 扩展程序？
【发布时间】：2014-04-16 04:48:29
【问题描述】：

到目前为止，我在弄清楚我的代码出了什么问题时遇到了问题，因为当我单击该图标时，它说我同时运行了 background.js 和 autofill.js。但不会自动填充 gmail 站点。这是我的第一个 chrome 扩展以及使用 javascript。我的最终目标是它可以自动填充所有网站（不仅仅是 gmail）并能够存储/读取 .txt 文件中的所有密码。另一件事是，当我尝试运行此代码时，说我的 autofill.js 文件有问题，并给我错误“未捕获的 TypeError：无法设置属性‘值’为 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
    });

自动填充.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();

【问题讨论】：

你发现问题了吗？ @user3409109

标签： javascript google-chrome google-chrome-extension autofill password-encryption

【解决方案1】：

你应该先花点时间阅读开发guides。确保您了解 debugging 扩展的工作原理。

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

“未捕获的类型错误：无法将属性“值”设置为空。

该错误告诉您您正在尝试“访问”（设置）“缺失”（null）对象的属性。 loginField.value = myUsername; 尝试访问 value 的 loginField，因此您可以轻松推断出 loginField 为空，这反过来意味着 var loginField = document.getElementById('Email'); 并没有真正起作用。但是不要相信我的话，学会自己调试。

失败的原因是另一回事：扩展程序是“沙盒”的，不能随心所欲地更改页面内容 - 你有“内容脚本”。返回文档并阅读 overview 和 content scripts sections。

在您的具体情况下：

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

【讨论】：