Certainly! To bundle a resource with
Certainly! To bundle a resource with Plasmo, you can utilize tools like Webpack or Parcel to package your extension's resources efficiently. These bundlers help you manage and optimize your code, including stylesheets, images, and other assets, making it easier to deploy your extension.
In your Plasmo project, you can configure your bundler to include the necessary resources by specifying entry points for your extension's scripts and stylesheets. This way, when you build your extension, the bundler will package all the required resources into a single bundle or multiple bundles, depending on your configuration.
Remember to set up your bundler to handle TypeScript files if you're using TypeScript in your extension. This ensures that your TypeScript code is transpiled correctly and included in the final bundle....
Ah, hello there! When it comes to
Ah, hello there! When it comes to obtaining microphone permissions within a side panel in your Plasmo browser extension, the recommended method would be to utilize the
getUserMedia API provided by the browser. This API allows you to request access to the user's microphone directly from the browser.
To implement this in your Plasmo extension, you can start by checking if the browser supports the getUserMedia API using feature detection. Once confirmed, you can then prompt the user to grant permission to access their microphone by calling navigator.mediaDevices.getUserMedia({ audio: true }).
Remember to handle both the success and error cases when requesting microphone access to provide a smooth user experience. Additionally, consider adding a UI element in your side panel to inform the user about the microphone access request and guide them through the process....Absolutely! In Plasmo, to send a message
Absolutely! In Plasmo, to send a message from a side panel to a content script in the main world, you can utilize the messaging system provided by Plasmo. Here's a step-by-step guide to achieve this:
1. Set up Messaging Channels: First, define a messaging channel that both your side panel and content script can use to communicate. You can create a channel using Plasmo's messaging API.
2. Send Message from Side Panel: In your side panel script, use the messaging API to send a message through the channel you defined. Make sure to include the necessary data or payload that you want to send to the content script....
@Pallas#2819 I keep getting this error
@Pallas I keep getting this error when I run
pnpm build:
"🟣 Plasmo v0.84.2
🔴 The Browser Extension Framework
🔵 INFO | Prepare to bundle the extension...
🔵 INFO | Loaded environment variables from: []...@Pallas#2819 What are the differences
@Pallas What are the differences between the dev end build versions of the extension ? The same code works in dev but fails with the built version.
At your service! As a browser extension
At your service! As a browser extension developer using Plasmo, I can provide you with an in-depth answer to your question about the behavior of the
useStorage hook.
The useStorage hook in Plasmo is not inherently asynchronous. It is a custom hook that allows you to easily interact with browser storage, such as localStorage or sessionStorage, in a React component. The behavior of the useStorage hook depends on how it is implemented in your specific codebase.
Typically, when using the useStorage hook, the value from the storage is loaded synchronously when the component mounts. This means that the value will be available immediately and will not cause any delays or asynchronous behavior....At your service, @Pallas!
At your service, @Pallas!
To add a content security policy (CSP) to your Plasmo extension, you can specify it in the
package.json file. The content_security_policy field is where you can define the policy.
In your case, if you want to allow loading an external script from https://example.com, you can use the following code example in your package.json:...At your service! In the provided React
At your service! In the provided React code, the
allMessagesStored variable might not appear when the component mounts due to the way the useStorage hook is implemented.
The useStorage hook is likely a custom hook that handles storing and retrieving data from some storage mechanism, such as local storage or a browser extension's storage API. In this case, it seems to be using the instance and key properties to identify the storage location.
When the component mounts, the useEffect hook is triggered. Inside the useEffect callback, the allMessagesStored and currentMessageStored variables are logged to the console. However, if the useStorage hook is asynchronous or has a delay in retrieving the data, the initial value of allMessagesStored might not be available yet when the useEffect runs....Hey there, @Pallas! It seems like you're
Hey there, @Pallas! It seems like you're encountering an error message when trying to use session storage in your Plasmo browser extension. The error message you mentioned, "Error: Access to storage is not allowed from this context," typically occurs when you're trying to access the session storage from a context where it is not allowed.
In the case of browser extensions, there are certain restrictions on accessing storage from different contexts. It's possible that you're trying to access the session storage from a content script or a background script where it is not allowed.
To resolve this issue, you can try accessing the session storage from a different context that has the necessary permissions. For example, you can try accessing it from a popup script or a options page script, depending on your extension's architecture....
Hey there! It's great to see you working
Hey there! It's great to see you working on your browser extension using Plasmo. I'd be happy to help you with capturing a screenshot of a page and adding it to your extension using
chrome.tabs.captureVisibleTab.
To use chrome.tabs.captureVisibleTab, you'll need to have the tabs permission in your extension's manifest file. Make sure you have the following line in your manifest.json:
```json...At your service, browser extension
At your service, browser extension developer using Plasmo!
The reason why
document.getElementById is returning null for elements in CSUI (assuming you are referring to the Chrome User Interface) is because the elements in the CSUI are part of the browser's internal implementation and are not directly accessible to the content scripts of browser extensions. Content scripts can only access the DOM of the web page itself, not the browser's UI.
To interact with elements in the CSUI, you need to use a different approach, which is assigning refs instead. Refs, short for references, allow you to create a reference to a specific element in the DOM, even if it is not directly accessible through the document object....[BUG] Expected '>', got 'className' when...
@lab I ended up creating an issue in github about this because Pallas is not being too helpful, I'd appreciate if you could take a look at it whenever you have a chance
https://github.com/PlasmoHQ/plasmo/issues/751...
Hey Pallas 2819 and lab
Hey @Pallas and @louisgv ,
Sorry to ping but I've had this issue for days.
```...
Prevent Popup from opening
Hey there, fellow browser extension developer using Plasmo! I'd be happy to help you with your question.
To prevent the Popup from activating when a user is authenticated, you can use a combination of messaging between your content script and background script, along with some conditional logic.
Here's a possible approach you can take:...
To open your content page CSUI when
To open your content page (CSUI) when clicking on the extension icon in Plasmo, you need to create a popup page. The popup page is a small dialog window that opens when a user clicks on the extension's icon in the browser toolbar.
Here are the steps to achieve this:
1. Create a
popup.tsx file or a popup/index.tsx file in your project. This file should export a default React component that represents the content of your popup page. You can use this component to build your CSUI....is there documentation somewhere on how
is there documentation somewhere on how to make a side panel application?
To send a message from one content
To send a message from one content script UI to another in a browser extension using Plasmo, you can utilize the Plasmo Messaging API. Here's a step-by-step guide on how to achieve this:
1. Import the necessary functions from the
@plasmohq/messaging library in both content script UI files:
```typescript...Yes you can pass a variable from the
Yes, you can pass a variable from the
getInlineAnchorList function to the CSUI component itself. In your case, if you want to grab the data-x attribute on the results item and access it in the CSUI code, you can modify the getInlineAnchorList function to include the desired data in the anchor object that is passed to the CSUI component.
Here's an example of how you can achieve this:
1. Modify the getInlineAnchorList function to include the data-x attribute in the anchor object:...