0
Что: Я создаю расширение Chrome.Как правильно загрузить CSS в расширение Chrome popup.html?
Установка: Когда я нажимаю значок расширения, он загружает popup.html в качестве окна. Я пытаюсь загрузить таблицу данных JSON, используя этот код http://bootstrap-table.wenzhixin.net.cn/examples/ в довольно HTML-таблицу.
Задача: Стол загружается отлично. Javascript работает нормально, но таблица стилей не работает. Я связан с локальной таблицей стилей в голове popup.html, который загружает, когда я нажимаю на значок расширений Chrome'S в как так ...
<link rel="stylesheet" type="text/css" href="bootstrap-table.css">
Вопрос: Нужно ли добавить в манифест где-нибудь? Мне просто нужна таблица стилей для popup 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 *, некоторые из сценариев background/content/popup/HTML. Вопросы, требующие помощи по отладке («** почему этот код не работает? **)) должны включать: ► желаемое поведение, ► конкретную проблему или ошибку * и * самый короткий код, необходимый для его воспроизведения ** в вопросе сам**. Вопросы без четкого описания проблемы не полезны другим читателям. Смотрите: «** Как создать [mcve] **», [о каких темах я могу спросить здесь?] (Http://stackoverflow.com/help/on-topic) и [ask]. – Makyen
CSS должен загружаться. Таким образом, нам понадобится полная [mcve]. – Makyen