Menu
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>
857
Once the manifest, CSS and JavaScript files are ready, head over to chrome://extensions/ from the browser's address bar and enable developer mode. That activates the “Load unpacked” button to add the extension files. It's also possible to toggle whether or not the developer version of the extension is active.
Clicking on the “style. css” link will take you to the line of CSS code in the “Sources” panel. Making changes to the file in the Sources panel and pressing cmd + s on a Mac or ctrl + s in Windows will save the changes to your file system and will apply the changes to the web page.
Page Edit is an extension that let you make changes to any HTML webpage. To work with this add-on, simply open the toolbar popup UI and then click on the big toggle button at the left side.
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"
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
