TextareaCache
TextareaCache copied to clipboard
Published
20 hours ago •
wildskyf
wildskyf
How to export data when TextareaCache crashes
trafficstars
Sometimes Firefox addons break, trapping valuable data in them. When this happens, we must use a DIY solution. First, let's get the object from the add-on's window.storage:
- Open the Firefox Add-ons page.
- Click on the add-on you want to access.
- On the right-hand side of the page, click "Debug Add-ons".
- Select the add-on.
- "Inspect".
- In the console, type:
window.storage.get() - The object should be displayed in the console.
- Copy this object to a text document and save it.
Then, make an HTML document with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
table {
border-collapse: collapse; /* Merge cell borders */
width: 100%; /* Make table fill the width of its container */
margin: 0 auto; /* Center the table on the page */
}
table th {
width: 250px;
overflow: clip;
max-width: 250px;
}
th, td {
border: 1px solid #dddddd; /* Add cell borders */
padding: 8px; /* Add some padding to the cells */
text-align: left; /* Align cell text to the left */
}
td, td * {
height: fit-content;
max-height: 50px;
}
* {
overflow: auto;
}
th {
background-color: #dddddd; /* Add a background color to the header cells */
font-weight: bold; /* Make header text bold */
}</style>
<script>
function addJSONDataAttribute(jsonData, elementId) {
// Get the target element
var target = document.getElementById(elementId);
// Convert the JSON object to a string
var jsonString = JSON.stringify(jsonData);
// Add the JSON as a data attribute
target.setAttribute("data-json", jsonString);
}
function createTableFromJSON(jsonData, tableId) {
// Create the table element
var table = document.createElement("table");
// Create table body
var tbody = document.createElement("tbody");
Object.entries(jsonData).forEach(function([key, value]) {
var row = document.createElement("tr");
var leftCell = document.createElement("th");
leftCell.innerHTML = key;
row.appendChild(leftCell);
var rightCell = document.createElement("td");
if (typeof value === "object") {
// Recursively create nested table
var nestedTable = createTableFromJSON(value, tableId);
rightCell.appendChild(nestedTable);
} else {
rightCell.innerHTML = value;
}
row.appendChild(rightCell);
tbody.appendChild(row);
});
table.appendChild(tbody);
// Append the table to the specified element
var target = document.getElementById(tableId);
target.appendChild(table);
return table;
}
window.onload = function() {
// Get the element containing the JSON data
var element = document.getElementById("data-container");
// Get the JSON data from the data attribute
var jsonData = JSON.parse(element.getAttribute("data-json"));
// Insert the JSON data into the HTML
createTableFromJSON(jsonData, "jsont");
}
</script>
</head>
<body>
<h2>JSON Data</h2>
<div id="data-container" ></div>
<div id="jsont"></div>
<script>
// Get the JSON data from the file
var jsonData = /* INSERT JSON DATA HERE */;
// Add the JSON data to the data-container element
addJSONDataAttribute(jsonData, "data-container");
</script>
</body>
</html>
Finally, replace /* INSERT JSON DATA HERE */ in the HTML document with the object you saved earlier. The object should now be displayed in a table.
Note: GPT-3 helped me come up with this solution and wrote some of the above text and all the above code.
