Chromeの拡張機能 - のDataTable

Question

リンクされた質問：Chrome extension not loading DataTables scripts/CSS

私は公式サイト（ちょうどので、私は、作業データはdatatableを設定している）から、例えば、データテーブルを実装しようとしています。ただし、データセットをロードしていないようです。私はそれが許可の問題（またはそれらの行に沿ってsomehting）またはローカルインストールなどで何か間違っているかどうかはわかりません。任意の情報をいただければ幸いです。

リンクされた質問とChromeのドキュメントによると、私のpopup.jsファイルにはJSが含まれていません。そして私はデータテーブルをローカルにダウンロードし、それを拡張ディレクトリに置いた。しかし、これは私のデフォルトのポップアップページではありません。これはリンク先の別のページです。問題はないと思っていますが、私はちょうどそうだと思っていました。

マニフェスト

"permissions": [ 
    "contextMenus", 
    "background", 
    "tabs", 
    "activeTab", 
    "storage", 
    "https://ajax.googleapis.com/", 
    "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" 
    ], 

"web_accessible_resources": [ 
    "example.json" 
] 

HTML

<link href="../css/rectangle.css" type="text/css" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="../DataTables/datatables.min.css"/> 

<table id="example" class="display" width="100%" cellspacing="0"> 
<thead> 
<tr> 
    <th>Name</th> 
    <th>Position</th> 
    <th>Office</th> 
    <th>Extn.</th> 
    <th>Start date</th> 
    <th>Salary</th> 
</tr> 
</thead> 
</table> 

<script type="text/javascript" src="../DataTables/datatables.min.js"></script> 
<script type="text/javascript" src="popup.js"></script> 
</body> 
</html> 

JSコメントで見られるように

$(document).ready(function() { 
$('#example').DataTable({ 
    "ajax": "../example.json" 
}); 
}); 

Answer 1

、wOxxOmのポイ私はマニフェストファイル内のWebリソースが欠落していて、例へのリンクを与えていた。

しかし、データテーブルにもJqueryが必要です。それを使用するには、ローカルコピーをダウンロードしてマニフェストファイル（必要なHTMLページ）に追加する必要がありました。クロムは外部のスクリプトを読み込まないため、ドキュメントに記載されています。

マニフェスト

"web_accessible_resources": [ 
"example.json" 
    ], 

"content_scripts": [ 
{ 
    "run_at": "document_end", 
    "matches": [ 
    "http://*/*", 
    "https://*/*" 
    ], 
    "js": [ 
    "jquery.js", 
    "content/content.js" 
    ] 
} 
    ], 

JS

var url = chrome.extension.getURL("example.json"); 
$(document).ready(function() { 
$('#moreSQLPayloads').DataTable({ 
    "ajax": url 
}); 
}); 

HTML

<table id="example" class="display" width="100%" cellspacing="0"> 
<thead> 
<tr> 
    <th>Name</th> 
    <th>Position</th> 
    <th>Office</th> 
    <th>Extn.</th> 
    <th>Start date</th> 
    <th>Salary</th> 
</tr> 
</thead> 
</table> 

<script src="../jquery.js"></script> 
<script type="text/javascript" src="../DataTables/datatables.min.js"></script> 
<script type="text/javascript" src="popup.js"></script>