I am creating a chrome extension but I am stuck at the point where I need to download the tasks data into a csv file. The download is happening fine, I am having a small issue with the formatting. Currently, the task details are stacked on top of each other but my desire is to have each task in its own column for easier management.
My code:
<code>const exportTasksBtn = document.getElementById('export-tasks-btn');
exportTasksBtn.addEventListener('click', exportTasks);
function exportTasks() {
chrome.storage.local.get('tasks', function (data) {
const tasks = data.tasks || [];
if (tasks.length === 0) {
console.log('No tasks to export');
return;
}
// Create CSV content
let csvContent = 'data:text/csv;charset=utf-8,';
// Add task data
tasks.forEach(task => {
// Concatenate headers and values in the same cell
csvContent += `ID: ${task.id}n` +
`File Types: ${task.fileTypes.join(', ')}n` +
`Prefix: ${task.prefix || ''}n` +
`Suffix: ${task.suffix || ''}n` +
`Folder Name: ${task.folderName || ''}n` +
`Download Time: ${task.downloadTime || ''}n` +
`Zip Download: ${task.zipDownload ? 'Yes' : 'No'}n` +
`Status: ${task.status || ''}n`;
// Add URL heading
csvContent += `URLn`;
// Add URLs
task.urls.forEach(url => {
csvContent += `${url}n`;
});
// Add an empty line to separate tasks
csvContent += 'n';
});
// Create a download link
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "tasks.csv");
document.body.appendChild(link);
// Trigger the download
link.click();
});
}
</code>
<code>const exportTasksBtn = document.getElementById('export-tasks-btn');
exportTasksBtn.addEventListener('click', exportTasks);
function exportTasks() {
chrome.storage.local.get('tasks', function (data) {
const tasks = data.tasks || [];
if (tasks.length === 0) {
console.log('No tasks to export');
return;
}
// Create CSV content
let csvContent = 'data:text/csv;charset=utf-8,';
// Add task data
tasks.forEach(task => {
// Concatenate headers and values in the same cell
csvContent += `ID: ${task.id}n` +
`File Types: ${task.fileTypes.join(', ')}n` +
`Prefix: ${task.prefix || ''}n` +
`Suffix: ${task.suffix || ''}n` +
`Folder Name: ${task.folderName || ''}n` +
`Download Time: ${task.downloadTime || ''}n` +
`Zip Download: ${task.zipDownload ? 'Yes' : 'No'}n` +
`Status: ${task.status || ''}n`;
// Add URL heading
csvContent += `URLn`;
// Add URLs
task.urls.forEach(url => {
csvContent += `${url}n`;
});
// Add an empty line to separate tasks
csvContent += 'n';
});
// Create a download link
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "tasks.csv");
document.body.appendChild(link);
// Trigger the download
link.click();
});
}
</code>
const exportTasksBtn = document.getElementById('export-tasks-btn');
exportTasksBtn.addEventListener('click', exportTasks);
function exportTasks() {
chrome.storage.local.get('tasks', function (data) {
const tasks = data.tasks || [];
if (tasks.length === 0) {
console.log('No tasks to export');
return;
}
// Create CSV content
let csvContent = 'data:text/csv;charset=utf-8,';
// Add task data
tasks.forEach(task => {
// Concatenate headers and values in the same cell
csvContent += `ID: ${task.id}n` +
`File Types: ${task.fileTypes.join(', ')}n` +
`Prefix: ${task.prefix || ''}n` +
`Suffix: ${task.suffix || ''}n` +
`Folder Name: ${task.folderName || ''}n` +
`Download Time: ${task.downloadTime || ''}n` +
`Zip Download: ${task.zipDownload ? 'Yes' : 'No'}n` +
`Status: ${task.status || ''}n`;
// Add URL heading
csvContent += `URLn`;
// Add URLs
task.urls.forEach(url => {
csvContent += `${url}n`;
});
// Add an empty line to separate tasks
csvContent += 'n';
});
// Create a download link
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "tasks.csv");
document.body.appendChild(link);
// Trigger the download
link.click();
});
}
Current Output
Intended output: