如何捕获来自Chrome扩展的提交动作

Question

我必须编写一个扩展名，以便将用户凭证保存到我的数据库服务器（就像在LastPass中一样）。如何从活动选项卡上的身份验证表单抓取提交操作，以获取输入的登录名和密码，以便使用我的扩展名保存并向用户显示对话框（如果他想保存凭证）？

Answer 1

添加内容脚本在您的清单，并将其设置在一些网页上运行：

"content_scripts": [{ 
    "matches": ["http://*.example.com/*"], 
    "js": ["form_submits.js"], 
    "run_at": "document_start" 
}] 

还添加权限：

"permissions": [ 
    "tabs", "http://*.example.com/*" 
], 

在这个内容脚本监听事件的形式“的onsubmit” ，然后使用chrome.extension.sendRequest（）与您的分机联系：

for (var i = 0; i < document.forms.length; i++) { 
    document.forms[i].addEventListener("submit", function(){ 
     var form = this.form; 
     var data = [form.elements["user"], form.elements["password"]]; 
     // contact with your background page and send the form data. 
     chrome.extension.sendRequest({'name':'form_submit', 'data':data}, function(){ /* my callback if needed */ }, false); 
} 

在您的背景脚本添加监听器，这些调用：

chrome.runtime.onMessage.addListener(function(request, sender, callback) { 
    switch (request.name) { 
     case 'form_submit': 
      var data = request.data; 
      // do something with your form credentials. 
      break; 
    } 
}); 

**** ****编辑

你可以还就当前的活动选项卡直接执行JavaScript和添加表单提交监听器：

第一让当前窗口和活动标签：

chrome.windows.getCurrent(function callback) 
chrome.tabs.getSelected(integer windowId, function callback) 

http://code.google.com/chrome/extensions/windows.html#method-getCurrent

http://code.google.com/chrome/extensions/tabs.html#method-getSelected

然后在它执行JavaScript：

chrome.tabs.executeScript(integer tabId, object details, function callback) 

http://code.google.com/chrome/extensions/tabs.html#method-executeScript

全面的谷歌Chrome扩展API是在这里：

http://code.google.com/chrome/extensions/getstarted.html