如何将 CSS 正确加载到 Chrome 扩展 popup.html 中？

Question

内容：我正在创建一个 Chrome 扩展程序。

设置： 当我单击扩展图标时，它会将 popup.html 加载为一个窗口。我正在尝试使用此代码http://bootstrap-table.wenzhixin.net.cn/examples/将数据的 JSON 表加载到漂亮的 HTML 表中。

问题：表加载正常。javascript 似乎工作正常，但样式表似乎不起作用。我链接到 popup.html 头部的本地样式表，当我在 Chrome 中单击扩展程序的图标时加载它，就像这样......

<link rel="stylesheet" type="text/css" href="bootstrap-table.css">

问题：我需要将它添加到清单的某个地方吗？我只需要弹出 html 的样式表。我不需要将它注入到网页中。我只是想显示一个漂亮的 html 表。

清单文件

{
  "manifest_version": 2,

  "name": "Chrome Extension",
  "description": "Analyze page.",
  "version": "0.1",
  "icons": { "32": "icon32.png",
           "72": "icon72.png",
          "114": "icon114.png",
          "144": "icon144.png" },

  "browser_action": {
    "default_icon": "icon32.png",
    "default_popup": "popup.html"
  },
 "web_accessible_resources": [
    "bootstrap-table.css",
  ],
  "permissions": [
    "activeTab",
  ]
}

<link rel="stylesheet" type="text/css" href="bootstrap-table.css">

{
  "manifest_version": 2,

  "name": "Chrome Extension",
  "description": "Analyze page.",
  "version": "0.1",
  "icons": { "32": "icon32.png",
           "72": "icon72.png",
          "114": "icon114.png",
          "144": "icon144.png" },

  "browser_action": {
    "default_icon": "icon32.png",
    "default_popup": "popup.html"
  },
 "web_accessible_resources": [
    "bootstrap-table.css",
  ],
  "permissions": [
    "activeTab",
  ]
}

Answer 1

根据我的经验，从弹出窗口引用扩展中包含的 CSS 文件确实可以工作，而无需添加任何特定于清单的 CSS。

修改清单以使其加载后，您上面的示例确实对我有用，生成了一个格式良好的表。我使用的清单：

{
  "manifest_version": 2,

  "name": "Chrome Extension",
  "description": "Analyze page.",
  "version": "0.1",
  "browser_action": {
      "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}