Thomato Posts - Answer Overflow

Thomato

•Created by Thomato on 11/10/2024 in #👾extension

Uncaught (in promise) Error: QUOTA_BYTES_PER_ITEM quota exceeded

Hi all, I am trying to allow users to be able to upload their own HTML templates, but I am repeatedly getting this error. Troubleshooting done: - Added storage and unlimitedStorage permissions in manifest.json - Verified in dev instance that both were listed in the minified file - Tried to compress the file contents during upload - Attempted HTML files of all sizes, including extremely small files Function that gets the error:

const handleUploadTemplate = async () => {
    if (file) {
      const reader = new FileReader();
      reader.onload = async (event) => {
        const fileContent = event.target.result as string;
        const templateId = `template_${Date.now()}`;
        const compressedChunks = compressContent(fileContent, templateId);
  
        // Store each chunk under its unique key
        for (const [key, chunk] of Object.entries(compressedChunks)) {
          await storage.set(key, chunk);
        }
  
        const templateMetadata = {
          id: templateId,
          name: fileName || "Unnamed Template",
          chunkKeys: Object.keys(compressedChunks),
          uploadedAt: new Date().toISOString(),
          isActive: true,
        };
  
        await storage.set(templateId, JSON.stringify(templateMetadata));
        setTemplates((prev) => [...prev, templateMetadata]);
        setFile(null);
        setFileName(null);
      };
      reader.readAsText(file);
    }
  };

const handleUploadTemplate = async () => {
    if (file) {
      const reader = new FileReader();
      reader.onload = async (event) => {
        const fileContent = event.target.result as string;
        const templateId = `template_${Date.now()}`;
        const compressedChunks = compressContent(fileContent, templateId);
  
        // Store each chunk under its unique key
        for (const [key, chunk] of Object.entries(compressedChunks)) {
          await storage.set(key, chunk);
        }
  
        const templateMetadata = {
          id: templateId,
          name: fileName || "Unnamed Template",
          chunkKeys: Object.keys(compressedChunks),
          uploadedAt: new Date().toISOString(),
          isActive: true,
        };
  
        await storage.set(templateId, JSON.stringify(templateMetadata));
        setTemplates((prev) => [...prev, templateMetadata]);
        setFile(null);
        setFileName(null);
      };
      reader.readAsText(file);
    }
  };

Compress function:

const compressContent = (content: string, templateId: string): { [key: string]: string } => {
    const compressed = pako.deflate(content, { to: 'string' });
    const chunkSize = 4000; // Ensure each chunk is well under 8192 bytes
    const chunks: { [key: string]: string } = {};
    
    for (let i = 0; i < compressed.length; i += chunkSize) {
      const chunkKey = `${templateId}_chunk_${i / chunkSize}`;
      chunks[chunkKey] = compressed.slice(i, i + chunkSize);
    }
    
    return chunks;
  };

const compressContent = (content: string, templateId: string): { [key: string]: string } => {
    const compressed = pako.deflate(content, { to: 'string' });
    const chunkSize = 4000; // Ensure each chunk is well under 8192 bytes
    const chunks: { [key: string]: string } = {};
    
    for (let i = 0; i < compressed.length; i += chunkSize) {
      const chunkKey = `${templateId}_chunk_${i / chunkSize}`;
      chunks[chunkKey] = compressed.slice(i, i + chunkSize);
    }
    
    return chunks;
  };

3 replies

PD🧩 Plasmo Developers

•Created by Thomato on 10/28/2024 in #👾extension

Extremely long build times (~1 hour per compile)

Hi all, I am looking to get assistance with my extension. When running pnpm dev --verbose , I am getting to the following message: 🔵 INFO | Loaded environment variables from: [] 🟡 0 | @plasmohq/parcel-transformer-manifest 🟡 1 | Adding icons 🟡 2 | Adding default_icon 🟡 3 | Adding default_popup 🟡 4 | Adding page 🟡 5 | + Finished transforming manifest After the extension compiles: 🟢 DONE | Extension re-packaged in 3118239ms! 🚀 I have found the following GitHub issues: - https://github.com/PlasmoHQ/plasmo/issues/997 - https://github.com/ayoung19/clipboard-history/issues/23 I have also attached my package.json if it helps understand what libraries I have installed. Has anyone found a workaround or would be willing to help troubleshoot? Any efforts would be greatly appreciated 🫶

13 replies

PD🧩 Plasmo Developers

•Created by Thomato on 3/10/2024 in #👟framework

No styling for options.tsx

I have a basic options page written in TypeScript and styled via Tailwind CSS that displays perfectly within the popup. I saved all of the code to an OptionsPage.tsx, verified it displays fine, then used it in options.tsx:

import React from 'react'
import OptionsPage from '~pages/OptionsPage'

const options = () => {
  return (
    <OptionsPage />
  )
}

export default options

import React from 'react'
import OptionsPage from '~pages/OptionsPage'

const options = () => {
  return (
    <OptionsPage />
  )
}

export default options

For some reason, the styling just does not display on that page.

10 replies

Gaming

Programming