Error: Although precheck is successful, the Chrome API Runtime has exceeded the QUOTA_BYTES_PER_ITEM quota

I keep receiving a QUOTA_BYTES_PER_ITEM error when attempting to store an object, even though my size precheck shows that it should be under the quota. I must be missing something simple here (is this method correct for checking object size?). I've already compressed the item using LZString, yet it still appears smaller than the allowed quota.

var objToSave = {};   
objToSave[myKey] = compressedObj;  

console.log("Size of obj is: " + JSON.stringify(objToSave).length); //prints 3452
console.log(chrome.storage.sync.QUOTA_BYTES_PER_ITEM); //prints 8192
if (JSON.stringify(objToSave).length >= (chrome.storage.sync.QUOTA_BYTES_PER_ITEM)) { // this never triggers
      alert('objToSave is too large!');  
      return;   
}

chrome.storage.sync.set(objToSave, function() {    
  if (chrome.runtime.lastError) { // this error gets triggered.
    console.log("Error: " + chrome.runtime.lastError.message); // this error gets triggered. 
    return customAlert("Error!: " + chrome.runtime.lastError.message);    
  }   
});

Answer №1

It seems the issue with receiving QUOTA_BYTES_PER_ITEM is likely due to attempting to use a string that exceeds the 8k limit...

However, there are two potential issues that could be causing this problem:

  1. Make sure to verify the key:value pair.
  2. "variable byte length" When encoding the string, it's possible that your string contains mostly 2-byte data. If the character code exceeds 256 or is less than or equal to 0xFF, each character takes up 2 bytes. Therefore, even if your string is only 3452 characters long, if most of them are encoded as 2 bytes, it could surpass the 8k limit. This might be a factor worth considering.

Answer №2

Big thanks to @nishant and @wOxxOm for pointing out the exact error I was making. It turns out my size checking method was flawed.

Now, to accurately check the size, I have revised my approach to calculate the byte size instead of just the string length.

var s = JSON.stringify(objToSave);
encodeURI(s).split(/%(?:u[0-9A-F]{2})?[0-9A-F]{2}|./).length-1)

This new calculation reveals a total size of 10765 bytes. To delve deeper into this analysis, I am following @wOxxOm's guidance shared on

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance a link using jQuery to allow it to expand and collapse

I am currently working on an MVC view that features a 3-column table showcasing a list of products. The first column, which contains the product names, is clickable and directs users to a specific product page. I am looking to implement functionality where ...

The script tag in NextJS is not properly loading the Amplitude library

I am facing an issue with loading events using Amplitude JS for tracking, despite having the correct code in place. Here is the code snippet that I used: import Document, { Html, Head, Main, NextScript } from 'next/document'; import Script from & ...

Discover how to efficiently load and display a JSON array or object using JavaScript

I am new to learning about json and d3, having just started a few hours ago. While I have basic knowledge of javascript, I need help with loading a json file and displaying all the arrays and objects on the console using d3. I tried to do it myself but unf ...

Axios error in Express middleware - unable to send headers once they have been processed

I can't seem to figure out why my code is not running correctly. While using Axios in my middleware, I am encountering this error message: Error: Can't set headers after they are sent. This is the snippet of my code (utilizing Lodash forEach): ...

Real-time chart updates through REST API integration with JavaScript

I am searching for a JavaScript library that is capable of creating line charts and making calls to a REST API every few seconds (such as 5s or 3s) in order to update the line chart dynamically. I have found some libraries that support live chart updatin ...

The correct method for implementing server-side rendering with JavaScript

My website consists of multiple pages and utilizes React as a widget toolkit, with different bundles on each page. I am facing an issue where some widget state persists within a login session, and when the user revisits the page, the components should relo ...

Loop through a collection of unique identifiers for documents and establish event listeners in Firestore

Within my Vuex store, there is an action designed to retrieve a list of uids for followed users from the current user's Firestore UserDataCollection document. The action then processes each uid to extract data that will be displayed on the UI. While t ...

Tips for accessing an element using a specific identifier with the variable $key

PHP //This is the HTML code for quantity <p>Qty : <input type="number" value="" name="qty<?php echo $key ?> onChange="findTotal()"/> JS function function findTotal() { var arr = document.getElementsByName('qty'); // Calc ...

What is the TypeScript syntax for indicating multiple generic types for a variable?

Currently working on transitioning one of my projects from JavaScript to TypeScript, however I've hit a roadblock when it comes to type annotation. I have an interface called Serializer and a class that merges these interfaces as shown below: interfa ...

Validating Credit Card Expiration Dates in AngularJS Form

I recently started learning AngularJS and decided to create a credit card validator. I successfully implemented the Luhn Algorithm in a custom filter, but now I'm facing issues with validating the expiration date as well. The conditions for a valid ex ...

Encountering a 404 error while using Node.js for app.get requests with Postgres as the

Currently, I am in the process of learning Node.js by following a tutorial that guides me on building a simple API. The tutorial utilizes a sample database for demonstration purposes, but I decided to use my own Postgres DB instead. However, when trying to ...

Linking two dropdowns in Ember with data binding

I need help with connecting two selectboxes. I want the options in the second one to be determined by what is selected in the first selectbox. I'm new to using Ember and could use some advice on how to approach this problem. I tried using computed pro ...

"Uncaught ReferenceError: $ is not defined in a JavaScript/Vue.js

Currently, I am working on the javascript/vue.js page found at this link. In this file, I have added the following code: $(document).ready(function() { myIP(); }); function myIP() { $.getJSON("//freegeoip.net/json/?callback=?", function(data) { / ...

Does ExpressJS always terminate with JSON by default?

I am currently utilizing expressjs to serve JSON data. Upon attempting to use res.end() with an object, I encounter the following error: TypeError: first argument must be a string, Array, or Buffer Is there a specific setting or middleware available tha ...

Table Header Stays Put Without Shrinking or Expanding with Window Adjustment

I have a sticky table header that stays at the top when scrolling down on my web page. To achieve this effect, I followed the solution provided on css-tricks.com/persistent-headers/. However, I encountered an issue where the sticky table header does not ...

“Unable to update value using Controller component in react-hook-form”

Currently, I am utilizing the react-hook-form in combination with MUI components. In order to incorporate the Select component, I have enclosed it within the Controller since direct registration is not possible. Although everything seems to be functioning ...

Issue: ArrayBuffer failing to function properly in conjunction with Float64Array in NodeJS

Having some trouble with getting a Float64Array to work with an array buffer in Node. Here's what I've tried... var ab = new ArrayBuffer(buffer.length); var view = new Uint8Array(ab); console.log(view.length);//prints 3204 However, when I try ...

What is the best way to retrieve information utilizing Http.get within my project?

I have a TypeScript file containing user data: File path: quickstart-muster/app/mock/user.mock.ts import {User} from "../user"; export const USERS:User[]=[ new User(....); ]; I have a service set up at: quickstart-muster/app/services/user.service.ts ...

Using JavaScript to enhance and highlight specific items in a dropdown menu

I am looking for a solution to prevent duplicate selections in multiple select dropdowns. I want to alert the user if they have chosen the same value in more than one dropdown. Should I assign different IDs to each dropdown or is it possible to use just on ...

Steps to retrieve values from a grid and execute a sum operation using PROTRACTOR

Embarking on my Protractor and Javascript journey, I am faced with the challenge of writing a test script to retrieve values of various accounts under the header "Revenue" (as shown in the image below). My task involves extracting all number values listed ...