0
什么：我正在创建一个Chrome扩展。如何正确地将CSS加载到Chrome扩展程序popup.html中？
设置： 当我点击扩展图标时，它将popup.html加载为一个窗口。我正尝试使用此代码http://bootstrap-table.wenzhixin.net.cn/examples/将JSON数据表加载到漂亮的HTML表中。
问题：表格加载正常。 JavaScript似乎工作正常，但样式表似乎没有工作。我挂在当我点击Chrome浏览器扩展的图标，像这样它加载popup.html的头部局部样式表...
<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",
]
}
// 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>
如果'bootstrap-table.css'与您的'popup.html'在同一个文件夹中，它不会加载CSS吗？ – Loaf
请[编辑]题目：包括一个**完整** [mcve] *重复问题*。包括* manifest.json *，一些背景/内容/弹出脚本/ HTML。寻求调试帮助的问题（“**为什么不是这个代码工作？”）必须包括：►期望的行为，►特定问题或错误*和*►在问题中重现问题所需的最短代码**本身**。没有明确问题陈述的问题对其他读者无益。请参阅：“**如何创建[mcve] **”，[我可以在此处询问哪些主题？]（http://stackoverflow.com/help/on-topic）和[问]。 – Makyen
CSS应该加载。因此，我们需要一个完整的[mcve]。 – Makyen