SoledJSでGoogleの拡張を作ったらReactでできたページにもHTMLが表示されてしまう

はじめに

ReactでGoogleの拡張が作れることを最近知ったので試しに作ろうとしたところ問題が起きて解決にすこし手間取ってしまったのでまとめていきます。

この機会にSolidJSで拡張機能を作成したので、何が問題なのかつかみづらかったので時間がかかりました

問題

以下のリポジトリを利用して拡張機能を追加しました
特に手などは加えずにデフォルトのまま実行しました

するとReactで以前作成したページ(デプロイしたもの)を表示すると下に以下のような文字が表示されるようになりました

拡張機能を削除すると消えるので、拡張機能のどこかが悪さしているようでした

解決方法

/src/pages/content/components/Demo/index.tsxに問題がありました

/src/pages/content/components/Demo/index.tsx

import App from "@src/pages/content/components/Demo/app";
import { render } from "solid-js/web";

const root = document.createElement("div");
root.id = "extension-root";
document.body.append(root);

render(App, root);

ポイントはdocument.createElement("div")のところです。これはページのdiv属性に対して拡張機能でかかれたものを子要素として追加しています。

今回はポップアップに子要素を追加すればよいので(ブラウザのポップアップ属性)、以下のように変更しました

/src/pages/content/components/Demo/index.tsx

import App from "@src/pages/content/components/Demo/app";
import { render } from "solid-js/web";

const root = document.createElement("popup");
root.id = "extension-root";
document.body.append(root);

render(App, root);

無事消えました！ちなみにあの文字は/src/pages/content/components/Demo/app.tsxの文字が表示されていました

おわりに

やっと拡張機能の開発がスムーズにできそうで色々わくわくしています。
SolidJSもこの機会に試して記事にできたらと思っています

参考