Chromeアドインで他人様のサイトに窓を「最前面」に表示

Question

前提

ChromeアドインをJavaScriptで作成しています。

実現したいこと

他人様のサイト上でテキストを選択したときにトリガーして、
アドインで、その選択したテキストのそばに
情報を表示するための小窓を開く、という動作をしたいと思っています。

(例)
これはグーグル翻訳のChromeアドインです。
こんな感じのことです。

発生している問題・エラーメッセージ

最前面に窓が表示されません。

サイトごとに最前面に表示されたり、されなかったり、
テキストの裏側にうっすら表示されたりします。

うっすら表示されるページ（Google翻訳アドオンの窓は表示される）
https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/

該当のソースコード

var cnt_ranges = window.getSelection().rangeCount;
var rects = window.getSelection().getRangeAt(cnt_ranges - 1).getClientRects();
var rect = rects[rects.length - 1];

var div_img= document.createElement("div");
div_img.style.position = "absolute";
div_img.style.zIndex = 2147483647;
div_img.style.top = document.documentElement.scrollTop + rect.bottom + "px";
div_img.style.left = document.documentElement.scrollLeft + rect.right + "px";

// アイコン表示
var elm_img = document.createElement("img");
div_img.appendChild(elm_img);
elm_img.setAttribute("src", chrome.extension.getURL("icons/001.png"));
elm_img.setAttribute("style", "margin:5px; width:20px; height:20px;");

document.body.appendChild(div_img);

試したこと

zorder関連は調べましたがダメでした。
JavaScriptで自サイトで最前面に表示する情報はたくさんありましたが、
アドインで他サイトで自分のウィンドウを最前面に表示する方法は見つけられませんでした。

Comments

[int32_t]

問題が現在の質問文のソース断片にあるとは限らないので、問題が再現できるすべての情報を出したほうがよいです。

今のままの情報だと「width / height がなく、background-color が初期値のままでは何も表示されなくて当然。style という変数が何なのか謎」という印象になります。

[int32_t]

最前面に表示されないページのURLや、テキストの裏側にうっすら表示されるページのURLを教えて下さい。

[HCL]

ご回答ありがとうございます。

テキストの裏にうっすらウィンドウが見えるページ。
（その画像を、メインの質問に追加しました。）
https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/

GooGle翻訳アドオンのアイコンはテキスト上に表示されます。

まったく表示されないページは今現在、見つけることができませんでした。
ときどき、表示されないことに気づきます。

Answer 1

https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/

ここに関しては、img:not([alt]) { filter: blur(10px); } というスタイルがページにあるためです。elm_img に alt 属性を足すか、elm_img に filter: none; を付けましょう。

Comments

[HCL]

ご回答ありがとうございます。解決しました。

以下のいずれかで窓がはっきり表示されるようになりました。
elm_img.style.filter = "none";
elm_img.alt = "";

alt属性の無いimgタグはぼかしを入れる、というCSS設定がされていた、ということですね。
img:not([alt]) { filter: blur(10px); }