Как поймать отправить действие из расширения 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;
     }
});

**** Edited. ****

Вы также можете выполнить 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

Полный API расширений Google Chrome находится здесь:

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