Chromeのようにユーザー名/パスワードを保存するかどうかをユーザーに尋ねるにはどうすればよいですか？

Question

Chromeと同じような機能を持つパスワードマネージャの役割を果たすChrome拡張機能を作成しています。

ユーザーがフォームでログを送信すると、私の拡張子が提出し、ユーザー名とパスワードをつかむを傍受することができます。パスワードを保存するかどうかをユーザーに尋ねるポップアップを表示したいと思います。それが何であれ、ページの上部に独自のカスタムHTMLを表示することが可能です存在する場合は、ページがリロードされているので、それが消えてしまう

。だから私はセッション変数にデータを格納し、ページが読み込まれるたびに何かがあるかどうかを確認する必要がありますか？

私はちょうど別のウィンドウを開く避けたいのですが、それがずさんになります。フォームデータを取得し、送信後にページが読み込まれた後に使用するより良い方法はありますか？トリッキーだ

Answer 1

これは、イベントスクリプトとコンテンツスクリプトの組み合わせを使用して実行できます。

コンテンツスクリプトをマニフェストに登録します。JSON

"content_scripts": [ { 
    "js": [ "/util/jquery.js", "main.js"], 
    "matches": [ "http://*/*", "https://*/*"], 
    "run_at": "document_start",  
}], 

コンテンツスクリプトは、（バックグラウンドスクリプト「イベント」スクリプトを作成する場合はfalse =永続を使用）マニフェストでバックグラウンドスクリプトを登録作成

$("form").submit(function(e) { 
    var $this = $(this); 
    console.log('submit'); 
    var formData = findFormData($this); //function searches form for username/password 

    //Send message to background page with user/pass data 
    chrome.runtime.sendMessage({greeting:'form_submit', data:formData}, function(){ /*if needed */ }); 

}); 

を提出するフォームを待ち受けます。我々はまた、次の権限が必要です

"background": { 
    "scripts": ["/background/background.js"], 
    "persistent" : false 
}, 
"permissions": [ 
    "activeTab", 
    "storage", 
    "webNavigation" 
] 

最後に、我々は背景ページにメッセージリスナを追加

chrome.runtime.onMessage.addListener(function(request, sender,  sendResponse) { 
switch (request.greeting) { 
    case 'form_submit': 
    var data = request.data; 
    console.log('We Have Data!', request.data); 

    //We want to display the prompt when this page loads, so add listener 
    chrome.webNavigation.onCompleted.addListener(function askUser(details) { 

     //Create prompt here! 

     //remove the onCompleted listener so it doesn't appear when navigating again 
     chrome.webNavigation.onCompleted.removeListener(askUser); 
    }); 

    sendResponse({farewell: "success"}); 

    break; 
    } 
}); 

Answer 2

...

私はChromeの拡張機能自体を使用していないが、私は似ているのGreaseMonkeyエクステンションを書きません。

まず、私はこれは悪い考えであるとしましょう...非常に重要であり、ここでいくつかのセキュリティ上の懸念があるが、私はあなたがそれに入る方法をお答えします。

最初のステップは、ページのロードが（ブックマークやリンクまたは新しいタブで開い経由で開かれているとは反対に）提出従うだけで、それほど発生したときに語っています。

これを行うには、私が知っている唯一の方法は、ページのロードの間持続するwindow.nameプロパティへリンクすることです。

これはハッキーだと言っても当てはまります。その脆弱性はさらに真実だと言っています。一部のブラウザでは突然動作を停止することさえあります。

しかし、私が知っている唯一の方法です。

あなたのステップは次のとおりです。

1. これは保存する形であるかどうかを判断します。
2. フックでform.submitにリンクし、URL、ユーザー名とパスワードをオフにします。ページがajaxを使用するか、form.submitにフックすると、すべてのベットはオフになります。
3. window.name
4. にフラグを設定するページがログインしている場合、ページのリロード
5. を参照してください。ページ上passwordフィールドがある場合、見ることによってほとんどの場合してみましょう。
6. window.nameにあなたのフラグがあるかどうかを確認してください。このページはログインからロードされました。
7. window.nameフラグをクリアする
8. パスワードフィールドがない場合は、情報を保存するよう求めるフローティングディビジョンをポップアップ表示します。
9. 保存してください。