何時間もの調査の結果、同様のことを行う方法が複数見つかりました。しかし、これに間違った方法でアプローチすることに自分自身を分類したくないので、次のことを達成する方法についてアドバイスをいただければ幸いです。
拡張機能のアイコンをクリックすると、現在のページにツールバーをロードしたいと考えています。このツールバーには、次のことができる多数のリンクとフォームがあります。
- 元のページと対話する (DOM リスナー、DOM の変更)
- 元のページに追加の拡張ポップアップを作成する
- 外部リソースへのリクエストを行う
JS の観点からは、すべての独自の HTML をページに直接挿入し、1 つのコンテンツ スクリプトで機能を処理するのが最も簡単だと思います。ポップアップ内のすべての CSS 競合を説明することは決してできないことに気付いた後、私はそのアプローチを放棄しました。
代わりに、これは私がこれまでに持っているものです。拡張機能のアイコンをクリックすると、現在のページに div が挿入され、popup.htmlvia をソースとする iframe が読み込まれchrome.extension.getURL('popup1.html')ます。これは私が立ち往生するところです。コンテンツを iframe に読み込むことで、CSS の問題を特定しました。しかし、親ページでテキストが選択されていて、 のボタンをクリックするとしますpopup1.html。選択したテキストを に戻す方法、popup1.htmlまたは選択したテキストを新しい に表示する方法はありpopup2.htmlますか?
この種のインタラクションを行う方法についてワークフローを理解したら、開発に移れることを願っています。ご協力いただきありがとうございます！