Get amount of local storage used by Chrome/Firefox WebExtensions

report-local-storage-usage-chrome.js

//1. Go to Chrome Extensions page
//2. Activate developer mode
//3. Open the background page of any extension
//4. Paste the following code in the DevTools console

chrome.storage.local.getBytesInUse(null, bytesInUse => {
  if (chrome.runtime.lastError)
    throw chrome.runtime.lastError;

  const bytesAvailable = chrome.storage.local.QUOTA_BYTES - bytesInUse;

  console.log(`Local storage area: ${bytesInUse} bytes in use (${(bytesInUse / 1024).toFixed(2)}KB)`);
  console.log(`...available space: ${bytesAvailable} bytes (${(bytesAvailable / 1024).toFixed(2)}KB)`);
});

report-local-storage-usage-firefox.js

//1. Go to about:debugging#addons
//2. Enable add-on debugging
//3. Debug any extension (click the "Debug" button, then "OK" in the warning dialog)
//4. Paste the following code in the debugger console

browser.storage.local.get().then(
  data => {
    const str = JSON.stringify(data);
    //Thanks to Mike Samuel @ https://stackoverflow.com/a/5515960/9943202
    const multiChars = encodeURIComponent(str).match(/%[89ABab]/g);
    const bytesInUse = str.length + (multiChars ? multiChars.length : 0);

    console.log(`Local storage area: ${bytesInUse} bytes in use (${(bytesInUse / 1024).toFixed(2)}KB)`);
    //StorageArea.QUOTA_BYTES is unavailable in Firefox
  },
  err => { throw err; }
);