悩み事

google chromの拡張機能を開発しているのですが、
拡張機能をオンにすると、ページのレイアウトが崩れます。

拡張機能をオフにしてリロードすると元に戻ります。

このようになります。

これの解決策はありませんか？
検索しても似たような現象を見つけられません。

拡張機能

拡張機能はまだhtmlとcssでしかコーディングしていません。
まだまだ最初の段階です。
アイコンがgmailのアイコンなのでものすごくややこしいですが・・・。

コード

一応問題解決の参考になるかと思いまして、コードを載せます。

manifest.json
1{
2  "manifest_version": 2,
3  "name": "Hello Extensions",
4  "description": "This extension detect broken link and blank link.",
5  "version": "1.0",
6  "icons": {
7  },
8  "background": {
9    "scripts": [
10      "js/background.js"
11    ],
12    "persistent": false
13  },
14  "browser_action": {
15    "default_icon": "gmail.png",
16    "default_title": "hello!!",
17    "default_popup": "hello.html"
18  },
19  "content_scripts": [
20    {
21      "matches": [
22        "http://*/*",
23        "https://*/*"
24      ],
25      "css": ["css/style.css"],
26      "js": ["js/common.js"]
27    }
28  ],
29  "permissions": [
30    "tabs",
31    "https://*/*",
32    "http://*/*",
33    "storage"
34  ],
35  "commands":{
36    "_execute_browser_action": {
37      "suggested_key": {
38        "default": "Ctrl+K",
39        "windows": "Ctrl+K",
40        "mac": "Ctrl+K",
41        "chromeos":  "Ctrl+K"
42      }
43    }  
44  }
45}

hello.html
1<html>
2  <head>
3      <link rel="stylesheet" type="text/css" href="./css/style.css">
4      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5  </head>
6  <body>
7    <h1>todo</h1>
8    <!-- todo1つ目開始 -->
9    <img class ="badge" width="50px" height="50px" src="./img/badge.png">
10    <div class="todo"><span class="badgeNumber">5</span><span class="title">プロジェクト1</span></div>
11    <!-- todo1つ目終了 -->
12
13    <!-- todo2つ目開始 -->
14    <img class ="badge" width="50px" height="50px" src="./img/badge.png">
15    <div class="todo"><span class="badgeNumber">2</span><span class="title">プロジェクト2</span></div>
16    <!-- todo2つ目終了 -->
17      
18    <button id="plus"><img width="25px" height="25px" src="./img/plus.png"></button>
19  </body>
20</html>

style.css
1html {
2    width: 400px;
3    height: 100%;
4}
5body {
6    width: 400px;
7    height: 100%;
8}
9.todo {
10    background-color: aqua;
11    padding-top: 15px;
12    padding-bottom:15px;
13    padding-left:5px;
14    font-size:14px;
15    font-weight: bold;
16    color: rgb(92, 88, 88);
17    
18    margin-bottom: 2px;
19}
20.badge {
21    float: left;
22    margin-left:5px;
23}
24.badgeNumber {
25    position: relative;
26    top: -10px;
27    left: -20px;
28    font-size: 15px;
29    color:red;
30    font-weight: bold;
31}
32.title{
33    margin-left:20px;
34}
35
36#plus {
37    display: block;
38    width: 250px;
39    margin-left: auto;
40    margin-right: auto;
41    border-radius: 50%;
42    border-style: none;
43    margin-top: 5px;
44}