【ブラウザ拡張機能】CSSを使ったポップアップの表示
はじめに
前回簡単なブラウザ拡張機能を作りました。
今回はCSS(スタイルシート)を使って、少し格好良くポップアップを出します。
イメージは以下です。
今回はブラウザ拡張機能のポップアップをHTMLだけではなく、CSSも使って作ってみました。 HTMLだけのものと違い、見た目がWebで動くポップアップらしい見た目になっています。 少し動画で画面が見えていますが、JavaScriptでもポップアップを出せるようにしたので、こちらは後日公開します。 #ブラウザ拡張機能 #HTML #CSS
— 神経質やせ男 (@wwphilosophy.bsky.social) 2026-07-07T22:02:42.888Z
1.manifest.jsonは触らない
CSSを加えることでmanifest.jsonに何か手を入れるのかという疑問ですが、結果は前回の設定から変える必要はありません。
HTMLの中で完結するのであって、ここにmanifest.jsonが影響を及ぼすことはないからです。
2.popup.htmlの作成
次に、CSSを加えた画面となる「popup.html」の中身です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
width: 300px;
padding: 20px;
font-family: sans-serif;
background-color: #1a1a2e;
color: white;
text-align: center;
}
h1 {
font-size: 18px;
margin-bottom: 10px;
}
p {
font-size: 14px;
color: #aaaaaa;
}
</style>
</head>
<body>
<h1>こんにちは！</h1>
<p>ポップアップが開きました！</p>
</body>
</html>styleタグで括られた箇所がCSSです。
細かい説明は割愛します。
これはHTMLにCSSを載せたケースですが、CSSファイルを外出しすることも可能で、こちらもHTMLとCSSの知識があれば作れます。
当然外出ししようが、中にCSSを入れようがmanifest.jsonに影響を及ぼすことはありません。
ただ、ポップアップなので拡張機能のボタンを押したとき、真下にこのポップアップが表示されるだけです。
ではよく見るWebサイトのように、画面の真ん中にポップアップを表示するにはどうしたら良いかというと、JavaScriptを使います。
このJavaScriptについては、次回公開します。
まとめ
ブラウザ拡張機能にCSSを追加する場合は、manifest.jsonを書き換える必要はありません。
それはHTMLの中で完結するからです。
CSSはHTMLの中で書いても、外出してもmanifest.jsonを変更する必要はありません。
今回は簡単でしたが、次回からは難関JavaScriptについて公開します。
JavaScriptについては、ソースの解説も行う予定です。
📚 著書・ツールのラインナップ
人生の突発的なカオスをシステムでサバイブするための、実戦から生まれた武器たちです。
【時間捻出のための圧倒的バイブル】
『会社公認・爆速仕事術：管理者権限なしでできるPC魔改造』
★読者より「星3つ」の評価を獲得しました！ 今回の拡張機能開発のように、自分の学習リソース（時間）を捻出するための、PC環境最適化ノウハウを凝縮した1冊。
管理者権限がない会社PCでも、今日からできる設定変更の知恵を詰め込みました。Kindle Unlimited（読み放題）対象です。
『手取り23万円のエンジニアが、Excel一枚で実家の破綻を防いだ話: 家族介護ファイナンスプログラム構築記』
実家の財務という「ブラックボックス」をExcelで細分化・可視化し、親の経済的破綻と突発的な無心を未然に防ぐためのリアルなプロジェクトマネジメント記録。
こちらもKindle Unlimited対象です。
最後に
本マガジンでは、プログラミング学習における「問題を細かく分解し、仕様化していくプロセス」を淡々と記録していきます。
「感情論に流されず、ファクトと仕組みでスマートに生き残りたい」と感じた方は、ぜひフォローをお願いいたします。ともに仕様をアップデートしていきましょう。
いいなと思ったら応援しよう！
いつも記事を読んでいただいて、ありがとうございます。もし気に入っていただけたなら応援お願いします！いただいたチップは創作活動と寄付に使わせていただきます。m(_ _)m