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

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

P

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

If you are getting

chrome.storage

chrome.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
  }
}

{
  "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"

"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.storage

chrome.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

Storage

Storage class abstracts the

chrome.storage

chrome.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.

S

SaqlainOP•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

P

Pallas•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"

"storage"

"storage" permission to the

"permissions"

"permissions"

"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"
  }
}

{
  "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"

"storage"

"storage" permission to the

"permissions"

"permissions"

"permissions"

"permissions" array. This will allow your extension to use the storage API provided by Plasmo.

Once you've added the

"storage"

"storage"

"storage"

"storage" permission to your

package.json

package.json

file, you can use the

@plasmohq/storage

@plasmohq/storage

@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

@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>
  );
};

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

useStorage

useStorage

useStorage

useStorage hook from the

@plasmohq/storage

@plasmohq/storage

@plasmohq/storage

@plasmohq/storage library to store and retrieve data. The

useStorage

useStorage

useStorage

useStorage 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

@plasmohq/storage

@plasmohq/storage library and adding the

"storage"

"storage"

"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...

P

Pallas•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

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...

L

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

are you using

pnpm create plasmo

pnpm create plasmo

pnpm create plasmo

pnpm create plasmo?

L

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

hmm it works for me, ran it just now

L

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

any log before that error?

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

L

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

which version of pnpm are you using?

L

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

/Users/brendanbuono/src/plasmo/cli/create-plasmo

/Users/brendanbuono/src/plasmo/cli/create-plasmo

L

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

well technically even if you do, it should works

L

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

what's the pwd that you ran pnpm in?

L

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

hmmmm that shoulda work :d

L

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

yeah

L

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

I think you linked the wrong one

L

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

which resulted in the issue you're seeing

L

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

pnpm unlink -g create-plasmo

pnpm unlink -g create-plasmo

pnpm unlink -g create-plasmo

pnpm unlink -g create-plasmo

L

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

^ try that :d

L

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

OR

L

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

L

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

In my machine, if I run

pnpm create plasmo

pnpm create plasmo

pnpm create plasmo

pnpm create plasmo <- it uses the remote version of plasmo

L

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

🔵 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