How to export data when TextareaCache crashes

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.

wildskyf / TextareaCache

How to export data when TextareaCache crashes #116