diff --git a/manifest.json b/manifest.json index fec197e..1febfc0 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { - "manifest_version": 2, + "manifest_version": 3, "name": "JSON-As-Table Viewer", - "version": "1.0.5", + "version": "1.0.6", "description": "*** View JSON response from a URL as HTML table ***", "icons": { "16": "images/icon16.png", @@ -26,7 +26,12 @@ } ], "web_accessible_resources": [ - "libs/DataTables-1.10.21/images/*", - "images/*" + { + "resources": [ + "libs/DataTables-1.10.21/images/*", + "images/*" + ], + "matches": [ "" ] + } ] -} +} \ No newline at end of file diff --git a/src/content.js b/src/content.js index 7f87793..5fdc3f0 100644 --- a/src/content.js +++ b/src/content.js @@ -79,7 +79,8 @@ function renderTable() { responsive: true, data: dataArray, columns: dataColumns, - order: [[1, 'asc']] + order: [[1, 'asc']], + "lengthMenu": [[-1, 20, 30, 50, 100], ["All", 20, 30, 50, 100]] }); //Expandable panel below each row to show original JSON of the row @@ -97,6 +98,26 @@ function renderTable() { tr.addClass('shown'); } }); + + $('#exportCsv').on('click', function () { + const arrayOfJson = contentArray + const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here + const header = Object.keys(arrayOfJson[0]) + let csv = arrayOfJson.map(row => header.map(fieldName => + JSON.stringify(row[fieldName], replacer)).join(',')) + csv.unshift(header.join(',')) + csv = csv.join('\r\n') + const filename = "json.csv" + + // Create link and download + var link = document.createElement('a'); + link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv)); + link.setAttribute('download', filename); + link.style.visibility = 'hidden'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }) }); } @@ -115,10 +136,10 @@ function tableHTML() { "" + "" + "
" + - "
" + "
" + "" + "
" + + "\n" + "
" + "
" + "\n" + @@ -216,7 +237,7 @@ function errorMessage() { */ function isJsonOnlyPage() { return document.body !== undefined - && document.body.getElementsByTagName("*").length === 1 + && document.body.getElementsByTagName("*").length === 2 && document.getElementsByTagName("pre").length === 1; }