How to properly load CSS into a Chrome Extension popup.html?

11,211

In my experience, referencing CSS files included in the extension from the popup does work without adding anything CSS specific to the manifest.

After modifying the manifest so it loads, your sample above does work for me, producing a well formatted table. The manifest I used:

{
  "manifest_version": 2,

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

11,211

Author by

Kyle Anderson

Web Developer. Systems Architect. Currently managing a few SAAS services using PHP, Jquery, Javascript, Nginx, Linux, Mongo, Gearman, Supervisord, ReactPHP. All custom everything.

Updated on June 23, 2022

Comments

Kyle Anderson almost 2 years

What: I am creating a Chrome Extension.

Setup: 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 http://bootstrap-table.wenzhixin.net.cn/examples/ into a pretty HTML table.

Problem: 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...

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

Question: 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.

manifest.json

{
  "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",
  ]
}

// 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);
        });
    });
  
});

<!doctype html>
<html>
  <head>
    <title>Chrome Extension</title>

    <link rel="stylesheet" type="text/css" href="bootstrap-table.css">
    <style>
    body{
width:820px;
height:400px;
}

#table{
width:100%;
}
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-table.js"></script>
    <script type="text/javascript" src="popup.js"></script>

  </head>
  <body>

  <div id="status"></div>

  <div class="toolbar">
    <button id="select-button" class="btn btn-default">Selected Rows</button>
    <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-plus"></i>
    </button>
    <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-heart"></i>
    </button>
    <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-trash"></i>
    </button>
  </div>

  <table
    data-show-columns="true"
    data-toolbar="#toolbar"
    data-search="true"
       data-show-refresh="true"
    data-height="460"
    id="table">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="name"
            data-switchable="false"
            data-sortable="true">
                Name
        </th>
        <th data-field="stargazers_count"
            data-sortable="true">
                Stars
        </th>
        <th data-field="forks_count"
            data-sortable="true">
                Forks
        </th>
        <th data-field="description"
            data-visible="false"
            data-sortable="true">
                Description
        </th>
    </tr>
    </thead>
    </table>

  </body>
</html>

Loaf over 7 years

If you have bootstrap-table.css in the same folder as your popup.html does it not load the CSS?
Makyen over 7 years

Please edit the question to be on-topic: include a complete minimal reproducible example that duplicates the problem. Including a manifest.json, some of the background/content/popup scripts/HTML. Questions seeking debugging help ("why isn't this code working?") must include: ►the desired behavior, ►a specific problem or error and ►the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: "How to create a minimal reproducible example", What topics can I ask about here?, and How to Ask.
Makyen over 7 years

The CSS should load. Thus, we are going to need a complete minimal reproducible example.
Kyle Anderson over 7 years

manifest.json, popup.html and popup.js have been added.
Ben over 4 years

I thought I had this problem, but actually my HTML minification was stripping all the IDs from an inline SVG, so the CSS was actually loading, but no rules were being triggered.