const fileInput = document.getElementById('file-input')
const myDivmessage = document.getElementById('mes')
const myDiv = document.getElementById('output')
const saveButton = document.getElementById('save-button')
const convertButton = document.getElementById('convert-button')
saveButton.disabled = true
convertButton.disabled = true
function convertToJSON(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = function() {
const data = new Uint8Array(reader.result)
const workbook = XLSX.read(data, { type: 'array' })
const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
resolve(jsonData);
}
reader.onerror = function() {
reject(reader.error);
}
reader.readAsArrayBuffer(file);
})
}
fileInput.addEventListener('change', () => {
convertButton.disabled = false
})
convertButton.addEventListener('click', async () => {
const files = fileInput.files
if (files.length === 0) {
myDivmessage.innerText = 'No file selected'
saveButton.disabled = true
return
}
myDivmessage.innerText = ''
const jsonDataArray = []
for (let i = 0; i < files.length; i++) {
const file = files[i]
if (file.type === 'application/vnd.ms-excel'
|| file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|| file.type === 'text/csv') {
const jsonData = await convertToJSON(file)
jsonDataArray.push(jsonData)
} else {
myDivmessage.textContent = 'Invalid file type'
saveButton.disabled = true
return
}
}
const output = jsonDataArray.map(jsonData => JSON.stringify(jsonData, null, 2)).join('\n')
myDiv.innerText = output
saveButton.disabled = false
})
saveButton.addEventListener('click', () => {
const blob = new Blob([myDiv.innerText], {type: 'text/plain'})
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.setAttribute('href', url)
link.setAttribute('download', 'data.json')
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(url)
link.remove()
})
{
"manifest_version": 3,
"name": "JSON Converter",
"version": "2.1",
"description": "Converts tables data to JSON",
"content_security_policy": {
"extension_pages": "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';"
},
"icons": {
"16": "icon.png",
"32": "icon.png",
"48": "icon.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["popup.js"]
}
],
"action": {
"default_icon": "icon.png",
"default_title": "Convert to JSON",
"default_popup": "popup.html",
"browser_style": true
},
"permissions": ["storage", "downloads", "tabs", "activeTab", "windows"]
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>JSON Converter</title>
</head>
<body>
<div>
<h1>Convert to JSON</h1>
<img src="../icon.png" alt="convert"/>
</div>
<input type="file" id="file-input" accept=".csv, .xlsx" multiple/>
<span class="line1"></span>
<span class="line2"></span>
<button class="con" id="convert-button">Convert</button>
<button class="sav" id="save-button">Save</button>
<div class="div_message" id="mes"></div>
<pre class="div_result" id="output"></pre>
<script src="popup.js"></script>
<script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>
</body>
</html>