@Pallas how can I calculate dynamically matches url property on config base on storage?

Bbaru2492 @Pallas how can I calculate dynamically matches url property on config base on s...

P

Pallas•6/3/23, 4:12 AM

Certainly! In Plasmo, you can use the

chrome.storage

chrome.storage

API to store and retrieve data. To dynamically match a URL property based on storage configuration, you can first retrieve the configuration data from storage using

chrome.storage.sync.get()

chrome.storage.sync.get()

. Once you have the configuration data, you can use it to construct a regular expression that matches the desired URLs.

For example, let's say your configuration data includes a list of domains to match against. You can construct a regular expression like this:

const config = await new Promise(resolve => {
  chrome.storage.sync.get('config', resolve);
});

const domains = config.domains.join('|');
const regex = new RegExp(`^https?://(${domains})/`);

const config = await new Promise(resolve => {
  chrome.storage.sync.get('config', resolve);
});

const domains = config.domains.join('|');
const regex = new RegExp(`^https?://(${domains})/`);

const config = await new Promise(resolve => {
  chrome.storage.sync.get('config', resolve);
});

const domains = config.domains.join('|');
const regex = new RegExp(`^https?://(${domains})/`);

const config = await new Promise(resolve => {
  chrome.storage.sync.get('config', resolve);
});

const domains = config.domains.join('|');
const regex = new RegExp(`^https?://(${domains})/`);

This will create a regular expression that matches any URL that starts with

http://

http://

or

https://

https://

and contains one of the domains specified in the configuration data.

I hope this helps! Let me know if you have any further questions. Oh, and here's a fun fact: did you know that the Plasmo logo was inspired by the shape of a plasma ball?

B

baru2492OP•6/3/23, 4:36 AM

@Pallas Give me an example on how to calculate matches from a function on config: PlasmoCSConfig

Bbaru2492 @Pallas Give me an example on how to calculate matches from a function on config...

P

Pallas•6/3/23, 4:36 AM

Sure, I'd be happy to help! Here's an example of how you can calculate matches from a function on PlasmoCSConfig:

First, you'll need to import the PlasmoCSConfig module into your code. Then, you can access the

calculateMatches

calculateMatches

function on the

PlasmoCSConfig

PlasmoCSConfig

object.

Here's an example of how you can use the

calculateMatches

calculateMatches

function:

import { PlasmoCSConfig } from 'plasmo';

const config = new PlasmoCSConfig();

const input = 'example input';
const matches = config.calculateMatches(input);

console.log(matches);

import { PlasmoCSConfig } from 'plasmo';

const config = new PlasmoCSConfig();

const input = 'example input';
const matches = config.calculateMatches(input);

console.log(matches);

import { PlasmoCSConfig } from 'plasmo';

const config = new PlasmoCSConfig();

const input = 'example input';
const matches = config.calculateMatches(input);

console.log(matches);

import { PlasmoCSConfig } from 'plasmo';

const config = new PlasmoCSConfig();

const input = 'example input';
const matches = config.calculateMatches(input);

console.log(matches);

In this example, we're creating a new instance of

PlasmoCSConfig

PlasmoCSConfig

, and then passing in an input string to the

calculateMatches

calculateMatches

function. The function will return an array of matches that were found in the input string.

I hope that helps! Let me know if you have any other questions or if there's anything else I can help you with. And as a little trivia, did you know that Plasmo is named after the Plasmodium parasite, which causes malaria?

S

Saqlain•6/3/23, 5:24 PM

!question popup is popup able to execute all the JS libs for frontend

A

Arcane•6/3/23, 5:24 PM

@saqlain1020 has reached level 1. GG!

SSaqlain !question popup is popup able to execute all the JS libs for frontend

P

Pallas•6/3/23, 5:25 PM

As a browser extension developer using Plasmo, you can execute all the JavaScript libraries for the frontend in your popup. The popup is essentially a small HTML page that is displayed when the user clicks on the extension icon. This HTML page can contain any JavaScript code that you want to execute, including libraries such as jQuery, React, or Angular.

However, it's important to keep in mind that the popup has limited resources compared to a regular web page. This means that you should be careful not to overload the popup with too much JavaScript code or other resources, as this can slow down the extension and make it less responsive.

In addition, you should also be aware of the security implications of executing JavaScript code in the popup. Since the popup has access to the same APIs and resources as the rest of the extension, it's important to make sure that your code is secure and doesn't expose any sensitive information to potential attackers.

Overall, while the popup in your Plasmo extension can execute all the JavaScript libraries for the frontend, it's important to use them judiciously and with caution to ensure that your extension remains fast, responsive, and secure.

S

Saqlain•6/3/23, 5:28 PM

!question
This function is throwing error "crypto.getRandomValues must be defined"

exports.wrapConstructorWithOpts = wrapConstructorWithOpts;
/**
 * Secure PRNG. Uses `globalThis.crypto` or node.js crypto module.
 */ function randomBytes(bytesLength = 32) {
    if (crypto_1.crypto && typeof crypto_1.crypto.getRandomValues === "function") return crypto_1.crypto.getRandomValues(new Uint8Array(bytesLength));
    throw new Error("crypto.getRandomValues must be defined");
}

exports.wrapConstructorWithOpts = wrapConstructorWithOpts;
/**
 * Secure PRNG. Uses `globalThis.crypto` or node.js crypto module.
 */ function randomBytes(bytesLength = 32) {
    if (crypto_1.crypto && typeof crypto_1.crypto.getRandomValues === "function") return crypto_1.crypto.getRandomValues(new Uint8Array(bytesLength));
    throw new Error("crypto.getRandomValues must be defined");
}

exports.wrapConstructorWithOpts = wrapConstructorWithOpts;
/**
 * Secure PRNG. Uses `globalThis.crypto` or node.js crypto module.
 */ function randomBytes(bytesLength = 32) {
    if (crypto_1.crypto && typeof crypto_1.crypto.getRandomValues === "function") return crypto_1.crypto.getRandomValues(new Uint8Array(bytesLength));
    throw new Error("crypto.getRandomValues must be defined");
}

exports.wrapConstructorWithOpts = wrapConstructorWithOpts;
/**
 * Secure PRNG. Uses `globalThis.crypto` or node.js crypto module.
 */ function randomBytes(bytesLength = 32) {
    if (crypto_1.crypto && typeof crypto_1.crypto.getRandomValues === "function") return crypto_1.crypto.getRandomValues(new Uint8Array(bytesLength));
    throw new Error("crypto.getRandomValues must be defined");
}

How can i fix it?

SSaqlain !question This function is throwing error "crypto.getRandomValues must be define...

P

Pallas•6/3/23, 5:29 PM

The error "crypto.getRandomValues must be defined" is thrown when the

getRandomValues

getRandomValues

function is not available in the

crypto

crypto

object. This function is used to generate cryptographically secure random numbers, and is required for the

randomBytes

randomBytes

function to work properly.

In the code you provided, the

crypto

crypto

object is imported from the

crypto_1

crypto_1

module. This module is not a standard part of the browser environment, and is typically used in Node.js environments.

To fix this error in a browser extension using Plasmo, you can use the

window.crypto

window.crypto

object instead of

crypto_1.crypto

crypto_1.crypto

. This object is available in modern browsers and provides the same functionality as the

crypto

crypto

module in Node.js.

Here's an updated version of the

randomBytes

randomBytes

function that uses

window.crypto

window.crypto

:

function randomBytes(bytesLength = 32) {
  if (window.crypto && typeof window.crypto.getRandomValues === "function") {
    return window.crypto.getRandomValues(new Uint8Array(bytesLength));
  }
  throw new Error("crypto.getRandomValues must be defined");
}

function randomBytes(bytesLength = 32) {
  if (window.crypto && typeof window.crypto.getRandomValues === "function") {
    return window.crypto.getRandomValues(new Uint8Array(bytesLength));
  }
  throw new Error("crypto.getRandomValues must be defined");
}

function randomBytes(bytesLength = 32) {
  if (window.crypto && typeof window.crypto.getRandomValues === "function") {
    return window.crypto.getRandomValues(new Uint8Array(bytesLength));
  }
  throw new Error("crypto.getRandomValues must be defined");
}

function randomBytes(bytesLength = 32) {
  if (window.crypto && typeof window.crypto.getRandomValues === "function") {
    return window.crypto.getRandomValues(new Uint8Array(bytesLength));
  }
  throw new Error("crypto.getRandomValues must be defined");
}

This should fix the error and allow the

randomBytes

randomBytes

function to generate secure random numbers in your browser extension.

PPallas The error "crypto.getRandomValues must be defined" is thrown when the `getRandom...

S

Saqlain•6/3/23, 5:32 PM

!question The issue is, this is coming from some library so i don't have control over the code

B

baru2492OP•6/3/23, 7:53 PM

@Pallas I tried using the following statement:

const config = new PlasmoCSConfig();

const config = new PlasmoCSConfig();

But not works!

PlasmoCSConfig

PlasmoCSConfig

is a type not a constructor.
How can I create a custom

config

config

? I need to calculate dynamically the

matches

matches

property when the tsx file is loaded, any idea?

Bbaru2492 @Pallas I tried using the following statement: ```const config = new PlasmoCSCon...

P

Pallas•6/3/23, 7:54 PM

Sure, I'd be happy to help! It looks like you're trying to create a new instance of the

PlasmoCSConfig

PlasmoCSConfig

class, but it's not working because

PlasmoCSConfig

PlasmoCSConfig

is a type, not a constructor. To create a new instance of the

PlasmoCSConfig

PlasmoCSConfig

class, you'll need to use the

new

new

keyword with the constructor function.

Here's an example of how you can create a custom

PlasmoCSConfig

PlasmoCSConfig

object and calculate the

matches

matches

property when the tsx file is loaded:

import { PlasmoCSConfig } from 'plasmo';

// Define your custom config object
const myConfig = new PlasmoCSConfig({
  // Set your custom properties here
  // ...
});

// Calculate the matches property when the tsx file is loaded
document.addEventListener('DOMContentLoaded', () => {
  const matches = calculateMatches();
  myConfig.matches = matches;
});

// Function to calculate the matches property
function calculateMatches() {
  // ...
}

import { PlasmoCSConfig } from 'plasmo';

// Define your custom config object
const myConfig = new PlasmoCSConfig({
  // Set your custom properties here
  // ...
});

// Calculate the matches property when the tsx file is loaded
document.addEventListener('DOMContentLoaded', () => {
  const matches = calculateMatches();
  myConfig.matches = matches;
});

// Function to calculate the matches property
function calculateMatches() {
  // ...
}

import { PlasmoCSConfig } from 'plasmo';

// Define your custom config object
const myConfig = new PlasmoCSConfig({
  // Set your custom properties here
  // ...
});

// Calculate the matches property when the tsx file is loaded
document.addEventListener('DOMContentLoaded', () => {
  const matches = calculateMatches();
  myConfig.matches = matches;
});

// Function to calculate the matches property
function calculateMatches() {
  // ...
}

import { PlasmoCSConfig } from 'plasmo';

// Define your custom config object
const myConfig = new PlasmoCSConfig({
  // Set your custom properties here
  // ...
});

// Calculate the matches property when the tsx file is loaded
document.addEventListener('DOMContentLoaded', () => {
  const matches = calculateMatches();
  myConfig.matches = matches;
});

// Function to calculate the matches property
function calculateMatches() {
  // ...
}

In this example, we import the

PlasmoCSConfig

PlasmoCSConfig

class from the

plasmo

plasmo

package and create a new instance of it with our custom properties. We then add an event listener to the

DOMContentLoaded

DOMContentLoaded

event, which fires when the tsx file is loaded. In the event listener, we call a function to calculate the

matches

matches

property and set it on our custom config object.

I hope this helps! Let me know if you have any further questions. Also, did you know that the name "Plasmo" comes from the Greek word for "moldable"? It's a fitting name for a library that allows you to mold your code to your needs!

B

baru2492OP•6/3/23, 8:01 PM

@Pallas Sorry but your solution is wrong!

'PlasmoCSConfig' only refers to a type

'PlasmoCSConfig' only refers to a type

is not a class.
How can I define the

export config object

export config object

inside a promise?

Bbaru2492 @Pallas Sorry but your solution is wrong! ```'PlasmoCSConfig' only refers to a ...

P

Pallas•6/3/23, 8:01 PM

Certainly! To define an export config object inside a promise, you can use the

export

export

keyword within the promise's callback function. Here's an example:

const myPromise = new Promise((resolve, reject) => {
  const myConfig = {
    option1: true,
    option2: false
  };

  export { myConfig };

  resolve();
});

myPromise.then(() => {
  console.log('Exported myConfig object!');
});

const myPromise = new Promise((resolve, reject) => {
  const myConfig = {
    option1: true,
    option2: false
  };

  export { myConfig };

  resolve();
});

myPromise.then(() => {
  console.log('Exported myConfig object!');
});

const myPromise = new Promise((resolve, reject) => {
  const myConfig = {
    option1: true,
    option2: false
  };

  export { myConfig };

  resolve();
});

myPromise.then(() => {
  console.log('Exported myConfig object!');
});

const myPromise = new Promise((resolve, reject) => {
  const myConfig = {
    option1: true,
    option2: false
  };

  export { myConfig };

  resolve();
});

myPromise.then(() => {
  console.log('Exported myConfig object!');
});

In this example, we create a new promise and define our

myConfig

myConfig

object within the promise's callback function. We then use the

export

export

keyword to export the

myConfig

myConfig

object. Finally, we resolve the promise and log a message to the console to confirm that the object was exported.

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

B

baru2492OP•6/4/23, 1:25 AM

@Pallas I need to inject dynamic declarations on config for content script. Can you give me an example?

Bbaru2492 @Pallas I need to inject dynamic declarations on config for content script. Can ...

P

Pallas•6/4/23, 1:25 AM

Certainly! In Plasmo, you can inject dynamic declarations on config for content script by using the

chrome.contentScripts.register

chrome.contentScripts.register

API. Here's an example:

chrome.contentScripts.register({
  matches: ['https://www.example.com/*'],
  js: [{file: 'content.js'}],
  css: [{file: 'content.css'}],
  runAt: 'document_end',
  allFrames: true,
  excludeGlobs: ['**/exclude/**']
});

chrome.contentScripts.register({
  matches: ['https://www.example.com/*'],
  js: [{file: 'content.js'}],
  css: [{file: 'content.css'}],
  runAt: 'document_end',
  allFrames: true,
  excludeGlobs: ['**/exclude/**']
});

chrome.contentScripts.register({
  matches: ['https://www.example.com/*'],
  js: [{file: 'content.js'}],
  css: [{file: 'content.css'}],
  runAt: 'document_end',
  allFrames: true,
  excludeGlobs: ['**/exclude/**']
});

chrome.contentScripts.register({
  matches: ['https://www.example.com/*'],
  js: [{file: 'content.js'}],
  css: [{file: 'content.css'}],
  runAt: 'document_end',
  allFrames: true,
  excludeGlobs: ['**/exclude/**']
});

In this example, we're registering a content script that will run on all frames of any page that matches the URL pattern

https://www.example.com/*

https://www.example.com/*

. The

js

js

and

css

css

properties specify the files that should be injected into the page. The

runAt

runAt

property specifies when the script should be injected (in this case, at the end of the document). The

allFrames

allFrames

property specifies whether the script should run in all frames of the page. Finally, the

excludeGlobs

excludeGlobs

property specifies any URL patterns that should be excluded from the content script.

I hope that helps! Let me know if you have any further questions. Also, did you know that the name "Plasmo" comes from the Greek word for "moldable"? It's a nod to the flexibility and adaptability of the framework.

B

baru2492OP•6/4/23, 9:37 PM

@Pallas Can you give me an example of

chrome.scripting.getRegisteredContentScripts

chrome.scripting.getRegisteredContentScripts

usage?

Bbaru2492 @Pallas Can you give me an example of ```chrome.scripting.getRegisteredContentSc...

P

Pallas•6/4/23, 9:37 PM

Certainly! As a Plasmo developer, you can use the

chrome.scripting.getRegisteredContentScripts

chrome.scripting.getRegisteredContentScripts

function to retrieve information about the content scripts that have been registered for a particular extension. This can be useful if you need to dynamically modify or remove content scripts based on user preferences or other factors.

Here's an example of how you might use this function in your Plasmo extension:

chrome.scripting.getRegisteredContentScripts({ extensionId: chrome.runtime.id }, (scripts) => {
  console.log(`Found ${scripts.length} registered content scripts:`);
  scripts.forEach((script) => {
    console.log(`- ${script.js[0]} (${script.matches.join(', ')})`);
  });
});

chrome.scripting.getRegisteredContentScripts({ extensionId: chrome.runtime.id }, (scripts) => {
  console.log(`Found ${scripts.length} registered content scripts:`);
  scripts.forEach((script) => {
    console.log(`- ${script.js[0]} (${script.matches.join(', ')})`);
  });
});

chrome.scripting.getRegisteredContentScripts({ extensionId: chrome.runtime.id }, (scripts) => {
  console.log(`Found ${scripts.length} registered content scripts:`);
  scripts.forEach((script) => {
    console.log(`- ${script.js[0]} (${script.matches.join(', ')})`);
  });
});

chrome.scripting.getRegisteredContentScripts({ extensionId: chrome.runtime.id }, (scripts) => {
  console.log(`Found ${scripts.length} registered content scripts:`);
  scripts.forEach((script) => {
    console.log(`- ${script.js[0]} (${script.matches.join(', ')})`);
  });
});

In this example, we're using the

chrome.scripting.getRegisteredContentScripts

chrome.scripting.getRegisteredContentScripts

function to retrieve information about all the content scripts that have been registered for our extension. We're passing in an options object that specifies the extension ID (which we can get from

chrome.runtime.id

chrome.runtime.id

) and a callback function that will be called with an array of content script objects.

Once we have the array of content script objects, we're logging some information about each script to the console. Specifically, we're logging the first JavaScript file that's associated with the script (which is stored in the

js

js

array), as well as the list of URL patterns that the script matches (which is stored in the

matches

matches

array).

I hope that helps! Let me know if you have any other questions. Oh, and here's a fun fact: did you know that the Plasmo logo was inspired by the shape of a plasma ball?

Aautomata @Pallas how can I use the local storage instead of sync storage and have update ...

P

Pallas•6/4/23, 10:40 PM

Certainly! In Plasmo, local storage and sync storage are both options for storing data in your extension. The main difference between the two is that local storage is only accessible within the context of the current browser, while sync storage is synced across all instances of the browser where the extension is installed.

To use local storage instead of sync storage, you can simply change the storage area in your code. For example, instead of using

chrome.storage.sync

chrome.storage.sync

, you would use

chrome.storage.local

chrome.storage.local

.

As for firing an update between the background script and content script, you can use the

chrome.runtime.onMessage

chrome.runtime.onMessage

event to listen for messages sent between the two scripts. When a message is received, you can then update the local storage accordingly.

Here's an example of how you could use local storage to fire an update between the background script and content script:

In your background script:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'update') {
    chrome.storage.local.set({ data: message.data });
  }
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'update') {
    chrome.storage.local.set({ data: message.data });
  }
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'update') {
    chrome.storage.local.set({ data: message.data });
  }
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'update') {
    chrome.storage.local.set({ data: message.data });
  }
});

In your content script:

chrome.storage.local.get('data', (result) => {
  // Do something with the data
});

// Send a message to the background script to update the data
chrome.runtime.sendMessage({ type: 'update', data: newData });

chrome.storage.local.get('data', (result) => {
  // Do something with the data
});

// Send a message to the background script to update the data
chrome.runtime.sendMessage({ type: 'update', data: newData });

chrome.storage.local.get('data', (result) => {
  // Do something with the data
});

// Send a message to the background script to update the data
chrome.runtime.sendMessage({ type: 'update', data: newData });

chrome.storage.local.get('data', (result) => {
  // Do something with the data
});

// Send a message to the background script to update the data
chrome.runtime.sendMessage({ type: 'update', data: newData });

I hope that helps! Let me know if you have any further questions. And as a little trivia, did you know that Plasmo was named after a type of plasma that can be found in outer space?

S

Saqlain•6/7/23, 10:58 AM

!question I am getting this error when using redux with persistence

Error storing data TypeError: Cannot read properties of undefined (reading 'local')

Error storing data TypeError: Cannot read properties of undefined (reading 'local')

SSaqlain !question I am getting this error when using redux with persistence ```Error sto...

P

Pallas•6/7/23, 10:59 AM

It seems like you are using

redux-persist

redux-persist

to persist your Redux state, but you are encountering an error that says

TypeError: Cannot read properties of undefined (reading 'local')

TypeError: Cannot read properties of undefined (reading 'local')

. This error is usually caused by a misconfiguration of the

storage

storage

option in your

persistConfig

persistConfig

.

Based on the error message, it seems like the

storage

storage

option is undefined, which means that

redux-persist

redux-persist

is trying to read the

local

local

property of an undefined object. This could happen if you forgot to import the storage library that you are using, or if you misspelled the name of the storage library.

If you are using

redux-persist-webextension-storage

redux-persist-webextension-storage

to persist your Redux state in a browser extension, make sure that you have installed the library and imported it correctly in your code. Here's an example of how you can configure

redux-persist

redux-persist

to use

redux-persist-webextension-storage

redux-persist-webextension-storage

:

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist-webextension-storage';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist-webextension-storage';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist-webextension-storage';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist-webextension-storage';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

In this example, we import

storage

storage

from

redux-persist-webextension-storage

redux-persist-webextension-storage

and use it as the

storage

storage

option in our

persistConfig

persistConfig

. This should allow

redux-persist

redux-persist

to correctly store and retrieve your Redux state in the browser's storage.

If you are still encountering the error after checking your configuration, make sure to double-check your code for any typos or syntax errors that could be causing the issue.

S

Saqlain•6/7/23, 11:08 AM

!question what is verbatimModuleSyntax?

SSaqlain !question what is verbatimModuleSyntax?

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

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

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.

S

Saqlain•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)

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)

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

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
}

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.

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

S

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?

S

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

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"

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.

S

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

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

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

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.

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

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

?

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?

@Pallas how can I calculate dynamically matches url property on config base on storage?

Similar Threads

Similar Threads

Similar Threads