Inspect and Modify Firefox Extension Local Storage

This article provides a step-by-step guide on how to view and edit the local storage data of any installed extension in the Firefox web browser. By utilizing Firefox's built-in Add-on Debugger, developers and advanced users can access the Storage Inspector and Web Console to read, modify, or delete data stored via both the standard DOM local storage and the WebExtensions Storage API.

Step 1: Open the Add-on Debugger

To access the storage of an extension, you first need to launch its dedicated developer tools environment.

Open the Firefox browser.
Type about:debugging into the address bar and press Enter.
Click on This Firefox in the left-hand sidebar.
Scroll down to the Extensions section to find the extension you want to modify.
Click the Inspect button next to the extension. A new Developer Tools window (the Add-on Debugger) will open specifically for that extension.

Step 2: Inspect and Modify via the Storage Tab

Firefox extensions typically store data in one of two places: Local Storage (standard web storage) or Extension Storage (the browser.storage.local API). You can view and edit both using the Storage tab.

In the Add-on Debugger window, click on the Storage tab at the top. If you do not see it, click the >> icon to reveal more tabs.
On the left pane, expand the Local Storage or Extension Storage dropdown menu.
Click on the extension's URL or ID listed under the dropdown to view its stored key-value pairs in the main pane.
To modify a value: Double-click on the existing value in the table, type the new data, and press Enter.
To add a new item: Click the + (Plus) button at the top of the Storage panel, then enter the new key and value.
To delete an item: Right-click the row you want to remove and select Delete "key_name".

Step 3: Inspect and Modify via the Console (For Complex Data)

The Storage tab is ideal for simple strings and numbers, but if an extension stores complex, nested JSON objects using the browser.storage.local API, it is often easier to manipulate the data using the Console.

In the Add-on Debugger window, click on the Console tab.
To view all stored data: Type the following command into the console and press Enter:
```
await browser.storage.local.get(null);
```
This will output an object containing all keys and values currently saved in the extension's local storage.
To view a specific key: Replace keyName with the actual key you want to inspect:
```
await browser.storage.local.get("keyName");
```
To modify or add data: Use the set method. If the key already exists, this will overwrite it. If it does not exist, it will create it:
```
await browser.storage.local.set({ "keyName": "newValue" });
```
You can also pass complex objects or arrays in place of "newValue".

To delete a specific key: Use the remove method:

await browser.storage.local.remove("keyName");

To clear all storage for the extension: Use the clear method (use with caution, as this resets the extension):
```
await browser.storage.local.clear();
```

Changes made through either the Storage tab or the Console take effect immediately, though you may need to reload the extension's popup or options page to see the changes reflected in its user interface.