【Chrome拡張機能開発】ChromeのWebサイトの表示が崩れる

Last updated at 2025-03-24Posted at 2025-03-20

はじめに

私は最近、作ってみたい拡張機能があり拡張機能の開発をしています。
昨日まで正常に表示されていた Google Chrome の Web ページが、今朝 PC を開くと、↓のように崩れて表示されていました。

最初に見つけた解決法は、アカウントをログアウトするというものでした。すると、Webサイトのレイアウトが崩れることなく表示されました。

つまり、私のアカウントに問題があることが分かりました。
同時に開発していた拡張機能が悪さしているのではないかと気づき、拡張機能を外した所、正常なページが表示されました。

拡張機能のmanifestファイルとcssファイルが原因でした。

manifest.json

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
    "css": ["styles.css"]
  }
]

styles.css

body {
    font-family: sans-serif;
    width: 400px;
}

manifestのcontent_scriptsでcssファイルを設定している為、全てのWebページにcssの設定(bodyの幅が400pxに固定される)が反映されています。

manifest.jsonのcontent_scripts内のcssに関する記述を削除

manifest.json

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["popup.js"]
  }
]

popup.html でのみ cssの設定を有効にしたいので、以下のコードを popup.html に追加

<link rel="stylesheet" href="styles.css">

popup.html

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="stylesheet" href="styles.css">
    ...
  </head>
...  
</html>

同じような問題に遭遇している人がいるかもしれないと思い、この記事を作成しました！
役立っていれば幸いです！いいねしてくれると喜びます。

ここまで読んでいただきありがとうございました！