web-dev-qa-db-ja.com

Chrome拡張機能のポップアップウィンドウ

私はChrome拡張機能を作成しています。ユーザーがコンテキストメニューをクリックすると、ユーザーがユーザー名とパスワードを入力できるように、ログインウィンドウがポップアップされるようにします。 Chrome拡張機能では、chrome.pageAction.setPopupとchrome.browserAction.setPopupのみがポップアップウィンドウの表示に使用できますが、ページアクションのアイコンまたはブラウザアクションのアイコンがクリックされたときにのみポップアップが表示されます。コンテキストメニュー。もちろん、JavaScriptプロンプトボックスを使用してこれを行うことができますが、問題はパスワードがプロンプトボックスでマスクできないことです。したがって、Chrome拡張機能でポップアップウィンドウを作成する他の方法があるかどうか疑問に思っています。

ありがとう！

javascriptgoogle-chrome-extensionpopup
32
chaohuang

選んで決める：

これらのすべてのメソッドを使用すると、拡張機能で新しいウィンドウ/ダイアログを開き、そのページのロジックを処理できます。このページは、拡張機能とともにパッケージ化する必要があります。
入力したデータを拡張機能に渡すには、 メッセージの受け渡し を参照してください。

デモ

拡張機能内のタブは、 _chrome.runtime.getBackgroundPage_ を使用してバックグラウンドページに直接アクセスできます。このデモでは、この機能と、従来のメッセージパッシングの方法を示します。

_manifest.json_

_{
  "name": "Dialog tester",
  "version": "1.0",
  "manifest_version": 2,
  "background": {
      "scripts": ["background.js"],
      "persistent": false
  },
  "content_scripts": [{
      "matches": ["<all_urls>"],
      "js": ["open-dialog.js"]
  }]
}
_

_background.js_

_// Handle requests for passwords
chrome.runtime.onMessage.addListener(function(request) {
    if (request.type === 'request_password') {
        chrome.tabs.create({
            url: chrome.extension.getURL('dialog.html'),
            active: false
        }, function(tab) {
            // After the tab has been created, open a window to inject the tab
            chrome.windows.create({
                tabId: tab.id,
                type: 'popup',
                focused: true
                // incognito, top, left, ...
            });
        });
    }
});
function setPassword(password) {
    // Do something, eg..:
    console.log(password);
};
_

_open-dialog.js_

_if (confirm('Open dialog for testing?'))
    chrome.runtime.sendMessage({type:'request_password'});
_

_dialog.html_

_<!DOCTYPE html><html><head><title>Dialog test</title></head><body>
<form>
    <input id="pass" type="password">
    <input type="submit" value="OK">
</form>
<script src="dialog.js"></script>
</body></html>
_

_dialog.js_

_document.forms[0].onsubmit = function(e) {
    e.preventDefault(); // Prevent submission
    var password = document.getElementById('pass').value;
    chrome.runtime.getBackgroundPage(function(bgWindow) {
        bgWindow.setPassword(password);
        window.close();     // Close dialog
    });
};
_

使用したメソッドのドキュメント

91
Rob W