!question what is verbatimModuleSyntax? - 🧩 Plasmo Developers

© 2026 Hedgehog Software, LLC

More

Communities Docs About Terms Privacy

Saqlain

SSaqlain !question what is verbatimModuleSyntax?

Pallas

P

Pallas•6/7/23, 11:09 AM

As a browser extension developer using Plasmo, you may come across the term "verbatimModuleSyntax" in the Plasmo documentation or codebase.

In Plasmo, "verbatimModuleSyntax" is a configuration option that allows you to use the exact syntax of the module system you are targeting, without any transpilation or transformation. This means that you can write code using the latest syntax features of ECMAScript (ES) modules, and Plasmo will ensure that your code is compatible with the target environment.

For example, if you are targeting Chrome 91, which supports ES modules natively, you can use the following code in your Plasmo extension:

import { someFunction } from './myModule.js';

chrome.runtime.onMessage.addListener((message) => {
  someFunction(message);
});

import { someFunction } from './myModule.js';

chrome.runtime.onMessage.addListener((message) => {
  someFunction(message);
});

With "verbatimModuleSyntax" enabled, Plasmo will not transpile the

import

import

statement, and will instead use the native ES module system of Chrome 91.

However, if you are targeting an environment that does not support ES modules natively, such as Internet Explorer 11, you can still use "verbatimModuleSyntax" to write code using the ES module syntax, and Plasmo will transpile it to a compatible format. For example:

import { someFunction } from './myModule.js';

chrome.runtime.onMessage.addListener((message) => {
  someFunction(message);
});

import { someFunction } from './myModule.js';

chrome.runtime.onMessage.addListener((message) => {
  someFunction(message);
});

With "verbatimModuleSyntax" enabled, Plasmo will transpile the

import

import

statement to a format that is compatible with Internet Explorer 11.

Overall, "verbatimModuleSyntax" is a powerful feature of Plasmo that allows you to write code using the latest syntax features of ES modules, while ensuring compatibility with your target environment.

Saqlain

S

SaqlainOP•6/7/23, 2:09 PM

!question i am getting this error

Property 'getAllKeys' is missing in type 'StorageInterface' but required in type 'Storage'

Property 'getAllKeys' is missing in type 'StorageInterface' but required in type 'Storage'

This is my code, error is in persistConfig localStorage type

import { combineReducers, configureStore } from "@reduxjs/toolkit"
import {
  type TypedUseSelectorHook,
  useDispatch,
  useSelector
} from "react-redux"
import { syncStorage,localStorage } from "redux-persist-webextension-storage"

import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
  RESYNC,
  persistReducer,
  persistStore
} from "@plasmohq/redux-persist"
import { Storage } from "@plasmohq/storage"

import appReducer from "./app/appReducer"

const rootReducer = combineReducers({
  app: appReducer
})

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

const persistedReducer = persistReducer(persistConfig, rootReducer)

import { combineReducers, configureStore } from "@reduxjs/toolkit"
import {
  type TypedUseSelectorHook,
  useDispatch,
  useSelector
} from "react-redux"
import { syncStorage,localStorage } from "redux-persist-webextension-storage"

import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
  RESYNC,
  persistReducer,
  persistStore
} from "@plasmohq/redux-persist"
import { Storage } from "@plasmohq/storage"

import appReducer from "./app/appReducer"

const rootReducer = combineReducers({
  app: appReducer
})

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

const persistedReducer = persistReducer(persistConfig, rootReducer)

Saqlain

SSaqlain !question i am getting this error ```Property 'getAllKeys' is missing in type 'S...

Pallas

P

Pallas•6/7/23, 2:10 PM

The error message you are seeing is related to the

Storage

Storage

interface provided by

@plasmohq/storage

@plasmohq/storage

. Specifically, it is saying that the

getAllKeys

getAllKeys

property is missing from the

StorageInterface

StorageInterface

type, which is required by the

Storage

Storage

type.

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

@plasmohq/storage

@plasmohq/storage

to include the

StorageInterface

StorageInterface

type explicitly. Here's an example:

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

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

Then, you can update your

persistConfig

persistConfig

object to use the

StorageInterface

StorageInterface

type instead of the

Storage

Storage

type:

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

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

By casting

localStorage

localStorage

as

StorageInterface

StorageInterface

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

getAllKeys

getAllKeys

property, even though it is not explicitly defined in the

Storage

Storage

type.

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

Pallas

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

Saqlain

S

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

S

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

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

Saqlain

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

Pallas

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

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

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.

Saqlain

S

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

!question how can i explicitly give permission storage in plasmo

Saqlain

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

Pallas

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"

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

useStorage

useStorage

hook from the

@plasmohq/storage

@plasmohq/storage

library to store and retrieve data. The

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

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.

durron

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

Pallas

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

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.

durron

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

lab

L

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

are you using

pnpm create plasmo

pnpm create plasmo

?

lab

L

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

hmm it works for me, ran it just now

lab

L

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

any log before that error?

durron

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

lab

L

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

which version of pnpm are you using?

lab

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

lab

L

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

well technically even if you do, it should works

lab

L

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

what's the pwd that you ran pnpm in?

lab

L

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

hmmmm that shoulda work :d

lab

L

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

yeah

lab

L

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

I think you linked the wrong one

lab

L

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

which resulted in the issue you're seeing

lab

L

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

pnpm unlink -g create-plasmo

pnpm unlink -g create-plasmo

lab

L

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

^ try that :d

lab

L

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

OR

lab

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

lab

L

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

In my machine, if I run

pnpm create plasmo

pnpm create plasmo

<- it uses the remote version of plasmo

lab

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

lab

L

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

This shouldn't be the case afaik, unless you ran that command inside the plasmo repo :d.........

lab

L

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

and even then, it was designed to be run inside the

examples

examples

directory

lab

L

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

you might have stumbled on a weird edge case

Arcane

A

Arcane•6/8/23, 4:17 PM

@durron has reached level 3. GG!

lab

L

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

cuz.... "it works on my end

"

lab

L

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

lol nice

import { combineReducers, configureStore } from "@reduxjs/toolkit"
import {
  type TypedUseSelectorHook,
  useDispatch,
  useSelector
} from "react-redux"
import { syncStorage,localStorage } from "redux-persist-webextension-storage"

import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
  RESYNC,
  persistReducer,
  persistStore
} from "@plasmohq/redux-persist"
import { Storage } from "@plasmohq/storage"

import appReducer from "./app/appReducer"

const rootReducer = combineReducers({
  app: appReducer
})

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

const persistedReducer = persistReducer(persistConfig, rootReducer)

import { combineReducers, configureStore } from "@reduxjs/toolkit"
import {
  type TypedUseSelectorHook,
  useDispatch,
  useSelector
} from "react-redux"
import { syncStorage,localStorage } from "redux-persist-webextension-storage"

import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
  RESYNC,
  persistReducer,
  persistStore
} from "@plasmohq/redux-persist"
import { Storage } from "@plasmohq/storage"

import appReducer from "./app/appReducer"

const rootReducer = combineReducers({
  app: appReducer
})

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

const persistedReducer = persistReducer(persistConfig, rootReducer)

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

🔵 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