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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

根据我的经验，从弹出窗口引用扩展中包含的CSS文件确实有效，而不会添加任何特定于清单的CSS。

修改清单以便加载后，上面的示例对我有用，生成格式良好的表格。我使用的清单：

{
  "manifest_version": 2,

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

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

1 个答案: