0
内容：私はChrome拡張機能を作成しています。Chrome拡張機能popup.htmlにCSSを正しく読み込む方法
セットアップ： 拡張アイコンをクリックすると、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>
'popup.html'と同じフォルダに' bootstrap-table.css'があると、CSSがロードされませんか？ – Loaf
トピックにする質問を編集してください：問題を再現する**完全な** [mcve]を含めてください。 * manifest.json *、背景/コンテンツ/ポップアップスクリプト/ HTMLの一部を含みます。デバッグの助けを求める質問（「**なぜこのコードは動作しないのですか？**」）には、以下が含まれていなければなりません：►必要な動作、►特定の問題またはエラー*、および►問題を再現するのに必要な最短コード自体**。明確な問題文がない質問は、他の読者にとって有用ではありません。参照してください： "**どのように[mcve] **を作成するか"、[ここで私はどんな話題を聞くことができますか？]（http://stackoverflow.com/help/on-topic）、[ask] – Makyen
CSSが読み込まれます。したがって、完全な[mcve]が必要になります。 – Makyen