CSSがHTMLに適用されない(拡張機能ポップアップ)

実現したいこと

popup.cssをpopup.htmlに適用する

前提

htmlの<head>内に、<link rel="stylesheet" type="text/css" href="popup.css">を記述しているのですが、popup.cssの内容が反映されません。

該当のソースコード

json
1{
2  "name": "Extensions1",
3  "description": "test",
4  "version": "25.03.4.10",
5  "permissions": ["activeTab","storage","bookmarks","cookies","history","notifications","privacy","tabs"],
6  "manifest_version": 3,
7  "action": {
8    "default_popup": "popup.html",
9    "default_title": "hovering text"
10  }
11 
12}
13

html
1<!DOCTYPE html>
2
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <link rel="stylesheet" type="text/css" href="popup.css">
7</head>
8<body>
9   <p class="hello">Hello, world</p>
10　<script src="popup.js" defer></script>
11</body>
12</html>
13

css
1body{
2    width: 400px;
3}
4.hello{
5    color: #FF0000;
6    font-size: 300px;
7}

JavaScript
1setTimeout(() => {
2    alert("Hello, world! (from js)");
3}, 700);

試したこと

スペルミスの確認、文法の確認

補足情報（FW/ツールのバージョンなど）

拡張機能のポップアップとして作成しています。
動作させると、cssの適用されていない、ただの文字列(Hello, world)が出てきます。
コピペしたコードなのにうまく動きません

meg_

2025/03/04 14:09

> コピペしたコードなのにうまく動きません元のコードは参考書か何かですか？

utm.

2025/03/04 16:31 編集

manifest.jsonに記載しないと適用されません。質問(回答)に必要な情報を省略するのはやめましょう。ちなみに、拡張機能にCSSを含むと既存のページに適用されます。

taka18

2025/03/05 03:32

コメントありがとうございます。元のコードは２年ほど前のqiitaの記事(https://qiita.com/FrogApp/items/dbbd0c37ac37d0583108)からとってきました。 manifest.jsonを追加しました。 manifest.jsonのどこにcssに関する記述をすればいいですか？ポップアップのhtmlにcssを適用したいです。