title: How to properly load CSS into a Chrome Extension popup.html?
body: <p><strong>What:</strong> I am creating a Chrome Extension. </p>
  
  <p><strong>Setup:</strong> 
  When I click the extension icon, it loads popup.html as a window. I am trying to load a JSON table of data using this code <a href="http://bootstrap-table.wenzhixin.net.cn/examples/" rel="noreferrer">http://bootstrap-table.wenzhixin.net.cn/examples/</a> into a pretty HTML table. </p>
  
  <p><strong>Problem:</strong> The table loads fine. The javascript appears to be working fine but the stylesheet does not appear to be working. I linked to the local stylesheet in the head of popup.html which loads when I click the extensions's icon in Chrome like so...</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="bootstrap-table.css"&gt;
  </code></pre>
  
  <p><strong>Question:</strong> Do I need to add it to the manifest somewhere? I just need the stylesheet for the popup html. I dont need to inject it into the web page. I am just trying to display a pretty html table.</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
    "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",
    ]
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// see http://bootstrap-table.wenzhixin.net.cn/documentation/
  // see http://issues.wenzhixin.net.cn/bootstrap-table/#methods/getSelections.html
  var data = [
      {
          "name": "bootstrap-table",
          "stargazers_count": "526",
          "forks_count": "122",
          "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
      },
      {
          "name": "multiple-select",
          "stargazers_count": "288",
          "forks_count": "150",
          "description": "A jQuery plugin to select multiple elements with checkboxes :)"
      },
      {
          "name": "bootstrap-show-password",
          "stargazers_count": "32",
          "forks_count": "11",
          "description": "Show/hide password plugin for twitter bootstrap."
      },
      {
          "name": "blog",
          "stargazers_count": "13",
          "forks_count": "4",
          "description": "my blog"
      },
      {
          "name": "scutech-redmine",
          "stargazers_count": "6",
          "forks_count": "3",
          "description": "Redmine notification tools for chrome extension."
      }
  ];
  
  
  function renderStatus(statusText) {
    document.getElementById('status').textContent = statusText;
  }
  
  // MAIN CODE: on click of extension icon
  document.addEventListener('DOMContentLoaded', function() {
  
      //renderStatus('Test1');
      //$('#status').append('Test2');
  
      $(function () {
          $('#table').bootstrapTable({
              data: data
          });
  
          var $table = $('#table');
          $('#select-button').click(function () {
              var msg = 'getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections'));
              renderStatus(msg);
          });
      });
    
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Chrome Extension&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="bootstrap-table.css"&gt;
      &lt;style&gt;
      body{
  width:820px;
  height:400px;
  }
  
  #table{
  width:100%;
  }
      &lt;/style&gt;
      &lt;script type="text/javascript" src="jquery-3.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bootstrap-table.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;div id="status"&gt;&lt;/div&gt;
  
    &lt;div class="toolbar"&gt;
      &lt;button id="select-button" class="btn btn-default"&gt;Selected Rows&lt;/button&gt;
      &lt;button type="button" class="btn btn-default"&gt;
          &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;button type="button" class="btn btn-default"&gt;
          &lt;i class="glyphicon glyphicon-heart"&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;button type="button" class="btn btn-default"&gt;
          &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;table
      data-show-columns="true"
      data-toolbar="#toolbar"
      data-search="true"
         data-show-refresh="true"
      data-height="460"
      id="table"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th data-field="state" data-checkbox="true"&gt;&lt;/th&gt;
          &lt;th data-field="name"
              data-switchable="false"
              data-sortable="true"&gt;
                  Name
          &lt;/th&gt;
          &lt;th data-field="stargazers_count"
              data-sortable="true"&gt;
                  Stars
          &lt;/th&gt;
          &lt;th data-field="forks_count"
              data-sortable="true"&gt;
                  Forks
          &lt;/th&gt;
          &lt;th data-field="description"
              data-visible="false"
              data-sortable="true"&gt;
                  Description
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;/table&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>