The error message you are seeing is related to the `Storage` interface provided by `@plasmohq/storag

The error message you are seeing is related to the

Storage

Storage

Storage

Storage interface provided by

@plasmohq/storage

@plasmohq/storage

@plasmohq/storage

@plasmohq/storage. Specifically, it is saying that the

getAllKeys

getAllKeys

getAllKeys

getAllKeys property is missing from the

StorageInterface

StorageInterface

StorageInterface

StorageInterface type, which is required by the

Storage

Storage

Storage

Storage type.

To fix this error, you can try updating your import statement for

@plasmohq/storage

@plasmohq/storage

@plasmohq/storage

@plasmohq/storage to include the

StorageInterface

StorageInterface

StorageInterface

StorageInterface type explicitly. Here's an example:

import { Storage, StorageInterface } from "@plasmohq/storage"

import { Storage, StorageInterface } from "@plasmohq/storage"

import { Storage, StorageInterface } from "@plasmohq/storage"

import { Storage, StorageInterface } from "@plasmohq/storage"

Then, you can update your

persistConfig

persistConfig

persistConfig

persistConfig object to use the

StorageInterface

StorageInterface

StorageInterface

StorageInterface type instead of the

Storage

Storage

Storage

Storage type:

const persistConfig = {
  key: "root",
  version: 1,
  storage: localStorage as StorageInterface
}

const persistConfig = {
  key: "root",
  version: 1,
  storage: localStorage as StorageInterface
}

const persistConfig = {
  key: "root",
  version: 1,
  storage: localStorage as StorageInterface
}

const persistConfig = {
  key: "root",
  version: 1,
  storage: localStorage as StorageInterface
}

By casting

localStorage

localStorage

StorageInterface

StorageInterface

StorageInterface

StorageInterface, you are telling TypeScript to treat it as if it has the

getAllKeys

getAllKeys

getAllKeys

getAllKeys property, even though it is not explicitly defined in the

Storage

Storage

Storage

Storage type.

I hope this helps! Let me know if you have any further questions.

PPallas The error message you are seeing is related to the `Storage` interface provided ...

Saqlain•6/7/23, 2:13 PM

!question There is no Storage Interface, is there any other storage lib i can use instead of redux-persist-webextension-storage?

Saqlain•6/7/23, 4:44 PM

!question I am getting chrome.storage undefined, how to enable it

SSaqlain !question I am getting chrome.storage undefined, how to enable it

PallasOP•6/7/23, 4:45 PM

If you are getting chrome.storagechrome.storage as undefined, it means that you have not requested the

storage

storage

permission in your extension's manifest file. To enable it, you need to add the following line to your

manifest.json

manifest.json

file:

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": [
    "storage"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "permissions": [
    "storage"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

The "permissions""permissions" field is an array of strings that lists all the permissions that your extension requires. In this case, we are requesting the

storage

storage

permission.

Once you have added the permission to your manifest file, you should be able to use the chrome.storagechrome.storage API in your extension without any issues.

If you are using Plasmo, you don't need to worry about requesting the

storage

storage

permission explicitly. Plasmo's

Storage

Storage

class abstracts the chrome.storagechrome.storage API and falls back to

localStorage

localStorage

when the extension storage API is unavailable. This allows for state sync between extension pages, content scripts, background service workers, and web pages.

Saqlain•6/7/23, 4:47 PM

!question how can i explicitly give permission storage in plasmo

SSaqlain !question how can i explicitly give permission storage in plasmo

PallasOP•6/7/23, 4:49 PM

If you are using the Plasmo framework for your browser extension development, you can explicitly give permission for storage by modifying your project's

package.json

package.json

file.

To give permission for storage, you can add the "storage""storage" permission to the "permissions""permissions" array in your

package.json

package.json

file. Here's an example:

{
  "name": "my-extension",
  "version": "1.0.0",
  "description": "My awesome extension",
  "permissions": [
    "storage"
  ],
  "devDependencies": {
    "@plasmohq/plasmo": "^1.0.0"
  }
}

{
  "name": "my-extension",
  "version": "1.0.0",
  "description": "My awesome extension",
  "permissions": [
    "storage"
  ],
  "devDependencies": {
    "@plasmohq/plasmo": "^1.0.0"
  }
}

In this example, we've added the "storage""storage" permission to the "permissions""permissions" array. This will allow your extension to use the storage API provided by Plasmo.

Once you've added the "storage""storage" permission to your

package.json

package.json

file, you can use the

@plasmohq/storage

@plasmohq/storage

library to interact with the storage API. This library abstracts the persistent storage API available to browser extensions and falls back to

localStorage

localStorage

when the extension storage API is unavailable.

Here's an example of how you can use the

@plasmohq/storage

@plasmohq/storage

library to store and retrieve data:

import { useStorage } from '@plasmohq/storage';

const MyComponent = () => {
  const [value, setValue] = useStorage('my-key', 'default-value');

  const handleClick = () => {
    setValue('new-value');
  };

  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={handleClick}>Update value</button>
    </div>
  );
};

import { useStorage } from '@plasmohq/storage';

const MyComponent = () => {
  const [value, setValue] = useStorage('my-key', 'default-value');

  const handleClick = () => {
    setValue('new-value');
  };

  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={handleClick}>Update value</button>
    </div>
  );
};

In this example, we're using the useStorageuseStorage hook from the

@plasmohq/storage

@plasmohq/storage

library to store and retrieve data. The useStorageuseStorage hook takes two arguments: the key to use for storing the data, and the default value to use if there is no existing value for the key.

By using the

@plasmohq/storage

@plasmohq/storage

library and adding the "storage""storage" permission to your

package.json

package.json

file, you can easily store and retrieve data in your Plasmo-based browser extension.

Ddurron @Pallas !question I am getting this error when creating a new plasmo project, do...

PallasOP•6/7/23, 10:36 PM

Certainly! As a fellow browser extension developer using Plasmo, I understand how frustrating it can be to encounter errors during project creation. The error message you're seeing indicates that the "@plasmo/config" package is missing from your workspace, even though it's listed as a dependency in your project's package.json file.

To fix this error, you can try running the following command in your project directory:

npm install @plasmo/config

npm install @plasmo/config

This will install the missing "@plasmo/config" package and add it to your project's dependencies. Once the installation is complete, you should be able to create a new Plasmo project without encountering this error.

I hope this helps! As a little trivia, did you know that Plasmo is named after the plasma state of matter, which is a highly ionized gas that conducts electricity? It's a nod to the dynamic and flexible nature of Plasmo projects.

Ddurron @Pallas !question I am getting this error when creating a new plasmo project, do...

lab•6/8/23, 2:27 AM

are you using pnpm create plasmopnpm create plasmo?

lab•6/8/23, 2:29 AM

hmm it works for me, ran it just now

lab•6/8/23, 2:29 AM

any log before that error?

Ddurron ```pnpm create plasmo .../Library/pnpm/store/v3/tmp/dlx-43621 | +2 +...

lab•6/8/23, 4:12 PM

which version of pnpm are you using?

lab•6/8/23, 4:13 PM

It seems that you also have a linked version of plasmo: /Users/brendanbuono/src/plasmo/cli/create-plasmo/Users/brendanbuono/src/plasmo/cli/create-plasmo

lab•6/8/23, 4:13 PM

well technically even if you do, it should works

lab•6/8/23, 4:13 PM

what's the pwd that you ran pnpm in?

lab•6/8/23, 4:14 PM

hmmmm that shoulda work :d

lab•6/8/23, 4:14 PM

yeah

lab•6/8/23, 4:14 PM

I think you linked the wrong one

lab•6/8/23, 4:14 PM

which resulted in the issue you're seeing

lab•6/8/23, 4:14 PM

pnpm unlink -g create-plasmopnpm unlink -g create-plasmo

lab•6/8/23, 4:14 PM

^ try that :d

lab•6/8/23, 4:15 PM

lab•6/8/23, 4:15 PM

you can also just pull, build the latest plasmo, and use the local version and get it working lol

lab•6/8/23, 4:15 PM

In my machine, if I run pnpm create plasmopnpm create plasmo <- it uses the remote version of plasmo

lab•6/8/23, 4:16 PM

It's saying this:

🔵 INFO   | Installing dependencies...
Scope: all 22 workspace projects
/Users/brendanbuono/src/plasmo/cli/create-plasmo:
 ERR_PNPM_WORKSPACE_PKG_NOT_FOUND  In ../../cli/create-plasmo: "@plasmo/config@workspace:*" is in the dependencies but no package named "@plasmo/config" is present in the workspace

🔵 INFO   | Installing dependencies...
Scope: all 22 workspace projects
/Users/brendanbuono/src/plasmo/cli/create-plasmo:
 ERR_PNPM_WORKSPACE_PKG_NOT_FOUND  In ../../cli/create-plasmo: "@plasmo/config@workspace:*" is in the dependencies but no package named "@plasmo/config" is present in the workspace