Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to export data when TextareaCache crashes #116

Open
ctrlcctrlv opened this issue Jan 18, 2023 · 1 comment
Open

How to export data when TextareaCache crashes #116

ctrlcctrlv opened this issue Jan 18, 2023 · 1 comment

Comments

@ctrlcctrlv
Copy link

ctrlcctrlv commented Jan 18, 2023

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:

  1. Open the Firefox Add-ons page.
  2. Click on the add-on you want to access.
  3. On the right-hand side of the page, click "Debug Add-ons".
  4. Select the add-on.
  5. "Inspect".
  6. In the console, type: window.storage.get()
  7. The object should be displayed in the console.
  8. 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.

image

Note: GPT-3 helped me come up with this solution and wrote some of the above text and all the above code.

@1024mb
Copy link

1024mb commented Feb 28, 2024

It should be window.storage.local.get()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants