[Feature] 拡張機能のオーバレイを iframe に入れ込む

[itsu-dev]

概要

現状は #resta-root として拡張機能の GUI となる要素を既存 Web ページの body 要素の最後に追加するような実装になっているが、これでは以下のような問題がある。

• 既存 Web ページの CSS が ReSta 画面側にも適用されてしまうため、意図しないスタイルの崩れが発生する可能性がある
• 要素選択で意図しない要素が選択される問題が発生しうる
• 既存 Web ページに ant-design が使用されていた場合、要素が選択できなくなる可能性がある

懸念点

• Cross-Origin 制約により外側のコンテンツにアクセスできない可能性
  • 今回の場合拡張機能による iframe インジェクションであり、同一オリジンが保証されるためこの問題については解決できると見込まれる
• iframe による既存サイトと ReSta 側の通信
• Chrome 側のボタンを押下した際のイベントを捕捉できるかどうか
• 既存コードベースの大幅な変更が見込まれるため、コンフリクトを最小限に抑えたい

目的

ReSta の動作安定化

提案内容

現状 div で実装されている #resta-root を iframe に置き換え、既存コードベースの要素選択部分などのコードを修正する。

参考

• iframe に動的に html を挿入する方法
  • https://stackoverflow.com/questions/18044073/iframe-without-src-but-still-has-content