Question

我正在尝试创建一个使用DataTables样式（使用Bootstrap）的Chrome扩展程序。它似乎在本地工作，但当我将其打包为扩展时，它不再显示任何样式。

清单文件如下：

{
"manifest_version": 2,

"name": "Cookie",
"description": "",
"version": "1.0",

"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
},

"background": {
  "scripts": ["background.js"]
  },

"permissions": [
"activeTab",
    "tabs",
"cookies",
"history",
"storage",
"https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css",
"https://code.jquery.com/jquery-1.11.3.min.js",
"https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js",
"\u003Call_urls\u003E"
]
}

我的html文件使用以下脚本和css：

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">

<!-- refers to a table named 'test' in the body -->
<script>
$(document).ready(function() {
$('#test').DataTable();
} );
</script>

是否必须将内容脚本字段添加到清单文件中？如果是这样，那看起来究竟如何呢？

谢谢。

Answer 1

事实证明有两个主要问题：

对于Google Chrome扩展程序，无法在HTML文件中运行脚本。解决方案是创建另一个javascript文件。
脚本（jquery和bootstrap）和css必须是本地的，因此我们创建了另一个文件夹并将文件添加到该文件夹中。

Chrome扩展程序未加载DataTables脚本/ CSS

1 个答案: