8

そのため、クリックするとポップアップが開き、ユーザーが現在のタブをスクリーンショットとして保存するためのクロム拡張機能を作成しました。

スクリーンショット:

ここに画像の説明を入力

問題は、他のタブに移動して、拡張ウィンドウが開いていたタブに戻ると、ウィンドウがなくなっていることです (ただし、スクリーンショットの作成は引き続き実行されます)。このため、拡張機能が実際にスクリーンショットを作成したかどうかを知ることができず、この場合、他のタブに切り替えて戻ってきた後にウィンドウが非表示になったため、デスクトップ通知でさえ表示されません。

ユーザーが他のタブに移動して拡張機能が使用されたタブに戻った場合でも、スクリーンショットが作成されたことをユーザーが知ることができるように、このポップアップモーダルまたはその他のソリューションを作成する方法はありますか?

4

2 に答える 2

26

モーダルウィンドウコードを探している場合は、これを参照して、要件に合わせてカスタマイズできます。

出力

拡大画像をクリックしてください

ここに画像の説明を入力してください

アイデアは、モーダルダイアログの処理テキスト模倣を取り入れることです。

デモンストレーション

マニフェスト.json

画像付きのコンテンツスクリプトを介してシンプルなモーダルウィンドウを追加しましたgif。

{
    "name": "Add Model Window",
    "description": "http://stackoverflow.com/questions/14423923/chrome-extension-modal-dialog-or-other-solution-to-notify-users",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "modal.js"
            ]
        }
    ],
    "web_accessible_resources": [
        "spinner_progress.gif"
    ]
}

modal.js

形成されるターゲットHTML

アイデアは<iframe>、ページに貼り付けて、カスタマイズされたテキスト用の化粧パネルを追加することです。

<div style="position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); opacity: 0.5; z-index: 2000; height: 1083px; width: 100%;">
    <iframe style="width: 100%; height: 100%;"></iframe>
</div>
<div style="position: absolute; width: 350px; border: 1px solid rgb(51, 102, 153); padding: 10px; background-color: rgb(255, 255, 255); z-index: 2001; overflow: auto; text-align: center; top: 149px; left: 497px;">
    <div>
        <div style="text-align:center"><span><strong>Processing...  Please Wait.</strong></span>

            <br>
            <br>
            <img src="/img/spinner_progress.gif">
        </div>
    </div>
</div>

基本的なDOM操作を使用したHTMLのコード。

wrapperDiv = document.createElement("div");
wrapperDiv.setAttribute("style","position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); opacity: 0.5; z-index: 2000; height: 1083px; width: 100%;");

iframeElement = document.createElement("iframe");
iframeElement.setAttribute("style","width: 100%; height: 100%;");

wrapperDiv.appendChild(iframeElement);

modalDialogParentDiv = document.createElement("div");
modalDialogParentDiv.setAttribute("style","position: absolute; width: 350px; border: 1px solid rgb(51, 102, 153); padding: 10px; background-color: rgb(255, 255, 255); z-index: 2001; overflow: auto; text-align: center; top: 149px; left: 497px;");

modalDialogSiblingDiv = document.createElement("div");

modalDialogTextDiv = document.createElement("div"); 
modalDialogTextDiv.setAttribute("style" , "text-align:center");

modalDialogTextSpan = document.createElement("span"); 
modalDialogText = document.createElement("strong"); 
modalDialogText.innerHTML = "Processing...  Please Wait.";

breakElement = document.createElement("br"); 
imageElement = document.createElement("img"); 
imageElement.src = chrome.extension.getURL("spinner_progress.gif");

modalDialogTextSpan.appendChild(modalDialogText);
modalDialogTextDiv.appendChild(modalDialogTextSpan);
modalDialogTextDiv.appendChild(breakElement);
modalDialogTextDiv.appendChild(breakElement);
modalDialogTextDiv.appendChild(imageElement);

modalDialogSiblingDiv.appendChild(modalDialogTextDiv);
modalDialogParentDiv.appendChild(modalDialogSiblingDiv);

document.body.appendChild(wrapperDiv);
document.body.appendChild(modalDialogParentDiv);
于 2013-01-20T17:43:32.540 に答える
3

ポップアップ領域の外側をクリックすると、Chrome のポップアップは意図的に閉じます (問題が原因であるだけでなく、OT です)。開いたままにしておく方法はありません。

別の方法は次のとおりです。

  • デスクトップ通知を介してユーザーに通知する
  • 別のタブを開き（拡張機能がそのジョブを完了したら）、成功メッセージを表示します
  • アラートを表示します
  • スクリーンショットのページにモーダルを表示します。
  • 試験的な情報バー

もちろん他にも方法はあると思いますが、これらが一番​​使いやすいと思います。

于 2013-01-20T15:13:12.693 に答える