Chrome拡張機能のブラウザアクションポップアップが表示されないのはなぜですか？
イグナシオポンセティ
これが私のmanifest.jsonファイルです：
{
"browser_action" :
{
"default_icon" : "Assets/Chromium logosu.png",
"default_popup" : "main.html"
},
"description" : "Bu eklenti, Chromium'un güncelleştirmelerini denetler ve yükler.",
"manifest_version" : 2,
"name" : "Chromium Güncelleştirici",
"version" : "1.0"
}
そしてここに私のmain.htmlファイルがあります：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - https://www.wysiwygwebbuilder.com">
<link href="Chromium_Güncelleştirici_Eklenti_Projesi.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="wb_Image1" style="position:absolute;left:0px;top:0px;width:320px;height:50px;z-index:0;">
<img src="Assets/Başlık.png" id="Image1" alt=""></div>
<div id="wb_Image7" style="position:absolute;left:0px;top:160px;width:320px;height:35px;z-index:1;">
<img src="Assets/Telif Hakkı Metni.png" id="Image7" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:50px;width:320px;height:37px;z-index:2;">
<img src="Assets/Güncelleştirmeleri Denetle (Pasif).png" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:0px;top:87px;width:320px;height:36px;z-index:3;">
<img src="Assets/Ayarlar (Pasif).png" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:0px;top:123px;width:320px;height:37px;z-index:4;">
<img src="Assets/Hakkında (Pasif).png" id="Image4" alt=""></div>
</body>
</html>
拡張機能のボタンをクリックすると、次のように表示されます。
実際、私のポップアップページは次のように表示されます。
では、この問題を修正するにはどうすればよいですか？
ジュナイドハムザ
ポップアップhtmlは、ロードされたhtmlのコンテンツから高さと幅を取得します。
あなたの場合、body内のすべてのdiv要素はposition：absoluteであり、bodyタグの高さと幅がゼロになるため、ポップアップUIは、ブラウザーアクションポップアップとして読み込まれると小さなボックスとして表示されます。
cssのタグに固定の高さまたは幅を指定することで、この動作を確認できます。
main.htmlをブラウザに直接ロードしたときに正常に表示されるのはなぜですか？実際には問題なく表示されますが、ここでもボディの高さはゼロになりますが、ビューポートはボディのコンテンツに依存しないため、以下のサンプルスクリーンショットに示すようにボディの外側のコンテンツが表示されます。
直し方？表示する必要のある実際のコンテンツの全体の高さが本体になるようにCSSを修正します。ここですべての要素を絶対位置として配置した理由はわかりませんが、そのアプローチを回避しても、期待どおりのUIを取得できると思います。最悪の場合、実際のポップアップHTMLサイズに必要な高さと幅を固定して本文をハードコーディングできます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
TOP 一覧
- 1
Unity：未知のスクリプトをGameObject（カスタムエディター）に動的にアタッチする方法
- 2
セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか？
- 3
Ansibleで複数行のシェルスクリプトを実行する方法
- 4
tkinterウィンドウを閉じてもPythonプログラムが終了しない
- 5
Crashlytics：コンパイラー生成とはどういう意味ですか？
- 6
GoDaddyでのCKEditorとKCfinderの画像プレビュー
- 7
Windows 10 Pro 1709を1803、1809、または1903に更新しますか？
- 8
Chromeウェブアプリのウェブビューの高さの問題
- 9
モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます
- 10
Windows 10の起動時間：以前は20秒でしたが、現在は6〜8倍になっています
- 11
Reactでclsxを使用する方法
- 12
ファイル内の2つのマーカー間のテキストを、別のファイルのテキストのセクションに置き換えるにはどうすればよいですか？
- 13
MLでのデータ前処理の背後にある直感
- 14
グラフからテーブルに条件付き書式を適用するにはどうすればよいですか？
- 15
Pythonを使用して同じ列の同じ値の間の時差を取得する方法
- 16
mutate_allとifelseを組み合わせるにはどうすればよいですか
- 17
ネットワークグラフで、ネットワークコンポーネントにカーソルを合わせたときに、それらを強調表示するにはどうすればよいですか？
- 18
テキストフィールドの値に基づいて UIslider を移動します
- 19
BLOBストレージからデータを読み取り、Azure関数アプリを使用してデータにアクセスする方法
- 20
PowerShellの分割ファイルへのヘッダーの追加
- 21
ソートされた検索、ターゲット値未満の数をカウント
コメントを追加