plasmohq / plasmo Goto Github PK

How do you envision this feature/change to look/work like?

https://v3.umijs.org/docs/assets-css#css-modules

What is the purpose of this change/feature? Why?

// CSS Modules
import styles from './foo.css';

// Non-CSS Modules
import './foo.css';

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

This is a good first issue if you want to contribute to our framework!

Jotai is an excellent state management library for React. It'd be awesome to have an example showing how it works with Plasmo.

Is there any context that might help us understand?

https://jotai.org/

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

to

Is there any context that might help us understand?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

when run pnpm dlx plasmo init example-dir
error !!

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

[email protected]

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

I would like to see a simple import / function call that abstracts away the hacky aspects of keeping the background service worker alive.

There are hacky solutions that would be nice to be abstracted away by a package:

https://stackoverflow.com/questions/66618136/persistent-service-worker-in-chrome-extension

Is there any context that might help us understand?

This feature might help migrate v2 extensions to v3 more easily.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

I would like to see how to use browser extension APIs, especially namespace, for example, chrome.runtime.xxx for Chrome and Opera, browser.runtime.xxx for FireFox and Edge. If i use plasmo framework, which one should i use?

In addition, since manifest v3 out, some APIs are only available to Chrome, how to use this api with plasmo?

I found there is an example about inject content script into main world, the chrome namespace is used directly there. If this code is compiled to the Firefox platform, what would happen?

Is there any context that might help us understand?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

import cssText from "data-text:~/content.css"
import type { PlasmoContentScript } from "plasmo"

export const config: PlasmoContentScript = {
  matches: ["https://www.plasmo.com/*"]
}
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = `${cssText}`
  return style
}

window.addEventListener("load", () => {
  console.log("content script loaded")

  document.body.style.background = "pink"
})

import someCoolImage from "data-base64:~assets/grey.png"

function IndexPopup() {
  return (
    <div>
      <img src={someCoolImage} alt="Some pretty cool image" />
    </div>
  )
}

export default IndexPopup

gitlab ci/cd

$ PARCEL_WORKERS=process pnpm build
> [email protected] build /data/gitlab-runner/builds/KySvgCD_/0/xxx
> plasmo build
🟣 Plasmo v0.44.0
🟠 The browser extension development framework.
🔵 INFO   | Prepare to bundle the extension...
🔴 ERROR  | Got unexpected undefined
          | Error: Got unexpected undefined
    at nullthrows (/data/gitlab-runner/builds/KySvgCD_/0/xxx/node_modules/.pnpm/[email protected]/node_modules/nullthrows/nullthrows.js:7:15)
    at Object.run (/data/gitlab-runner/builds/KySvgCD_/0/xxx/node_modules/.pnpm/@[email protected]/node_modules/@parcel/core/lib/requests/DevDepRequest.js:133:54)

Version

Latest

What OS are you seeing the problem on?

Linux

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

Similar to how Next.js npx create-next-app --with-tailwindcss sets up Tailwind CSS in a Next.js project with a single command, it would be great if Plasmo had similar cli commands for all its quickstart integrations

eg: npx create-plasmo --with-nextjs would set up starting files for a Plasmo + Next.js integration.

What is the purpose of this change/feature? Why?

Right now, all the integration with frameworks and Ui libraries like TailwindCSS and Next.js has to be done manually. This step could be automated with these quickstart commands, hence improving DX

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

[email protected]

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

 @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  style.scss 3:9  root stylesheet
    at Object.wrapException (E:\git\project\node_modules\sass\sass.dart.js:1234:17)

tailwind import not found.
probably missing includePaths to node_modules

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

style.scss 3:9  root stylesheet
          | Error: Can't find stylesheet to import.
  ╷
3 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  style.scss 3:9  root stylesheet
    at Object.wrapException (E:\git\example-ts\node_modules\sass\sass.dart.js:1234:17)
    at E:\git\example-ts\node_modules\sass\sass.dart.js:69405:25
    at _wrapJsFunctionForAsync_closure.$protected (E:\git\example-ts\node_modules\sass\sass.dart.js:3726:15)
    at _wrapJsFunctionForAsync_closure.call$2 (E:\git\example-ts\node_modules\sass\sass.dart.js:27983:12)
    at _awaitOnObject_closure.call$1 (E:\git\example-ts\node_modules\sass\sass.dart.js:27971:32)
    at Object._rootRunUnary (E:\git\example-ts\node_modules\sass\sass.dart.js:4101:18)
    at StaticClosure.<anonymous> (E:\git\example-ts\node_modules\sass\sass.dart.js:97562:16)
    at _CustomZone.runUnary$2$2 (E:\git\example-ts\node_modules\sass\sass.dart.js:29389:39)
    at _Future__propagateToListeners_handleValueCallback.call$0 (E:\git\example-ts\node_modules\sass\sass.dart.js:28452:51)
    at Object._Future__propagateToListeners (E:\git\example-ts\node_modules\sass\sass.dart.js:3897:93)

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

The function works normally, but in vscode, it keeps reporting errors, which makes people a little obsessive-compulsive. I tried to restart the project and vscode, but they didn't work

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

This RFC is meant to discuss how styles are injected into the content script. By default, the framework supports inline style:

<div style={{ color: "red" }} />

We want to extend the framework's capability with content-script by providing either simple to use API, a getter function, or a way for developers to easily mount their custom styling solution into the shadow DOM we've created. Potentially, we can also provide a way to override the shadow DOM container as well (perhaps via a similar API to getMountPoint).

This RFC should also discuss ways/syntax that developers would want for style injection. Here are some options I have theorized so far:

A - Import css module

import "./style.css"

This is the most difficult to implement - we will need to reconfigure the CSS Module plugin initiated by Parcel underneath to extract the style before parcel mount it into our template. We then need to take that CSS and inject it into the Shadow DOM. It's
nice but requires a lot of plumbing.

B - Custom mount container

export const getMountContainer = () => {
// Creating container div
// Creating style/importing style as plain text (using parcel inline)
// return the container root
}

C - Dedicated style Provider/Cache

If developer is using Emotion or Styled-Component for example (very common for folk using MUI), then they will want to have a dedicated style cache setup so that the style provider is accessible within the Shadow DOM. One way of achieving this is to parse their import statement for the emotion provider, then use a different mount strategy to inject the correct style cache.

This is semi-clean, but requires a lot of maintenance and also plumbing.

D - Optional style container, injected into the shadowDOM

import cssText from "bundle-text:~/contents/plasmo-overlay.css"

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

What is the purpose of this change/feature? Why?

Right now, it is very rough to style content-scripts UI - the only styling solution available right now is via raw inline styling. The key challenge here is we want to isolate the CSUI as much as possible, thus conventional UI import solution doesn't work out of the box, and requires either plumbing, or ways to allow customization.

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

Chat Thread

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

🔵 INFO   | Prepare to bundle the extension...
🔴 ERROR  | Cannot read properties of undefined (reading 'hashReferences')
          | TypeError: Cannot read properties of undefined (reading 'hashReferences')
    at getBundlesIncludedInHash (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\requests\WriteBundlesRequest.js:147:47)
    at getBundlesIncludedInHash (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\requests\WriteBundlesRequest.js:151:7)
    at assignComplexNameHashes (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\requests\WriteBundlesRequest.js:140:105)
    at Object.run (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\requests\WriteBundlesRequest.js:115:5)
    at async RequestTracker.runRequest (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\RequestTracker.js:725:20)
    at async Object.run (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\requests\ParcelBuildRequest.js:74:20)
    at async RequestTracker.runRequest (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\RequestTracker.js:725:20)
    at async Parcel._build (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\Parcel.js:397:11)
    at async Parcel.run (P:\Projects\plasmo-corp\plasmo\node_modules\.pnpm\@[email protected]\node_modules\@parcel\core\lib\Parcel.js:276:18)
🔴 EXIT   | 👋 Good bye and have a great day!

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

Shadowing DOM is good for isolating app components. but still there needs to be inject directly in some use cases.

What is the purpose of this change/feature? Why?

Provide options for users who want their plugins work seamlessly with pre-exsiting site or something.

(OPTIONAL) Example implementations

provide options for content script:

export const config: PlasmoContentScript = {
  matches: ['https://github.com/*'],
  css: ['../assets/style.css'],
  inject_directly: false
}

template modification for cli/plasmo/templates/static/content-script-ui-mount.tsx:

window.addEventListener("load", () => {
  const useShadowRoot = Mount.config.inject_directly ?? true
  const mountPoint = useShadowRoot
    ? document.createElement("div")
    : Mount.getMountPoint() // inject app into target element directly
  if (useShadowRoot) {
    mountPoint.style.cssText = `
      z-index: 1;
      position: absolute;
    `
    const shadowHost = document.createElement("div")

    const shadowRoot = shadowHost.attachShadow({ mode: "open" })
    document.body.insertAdjacentElement("beforebegin", shadowHost)

    shadowRoot.appendChild(mountPoint)
  }
  const root = createRoot(mountPoint)

  root.render(<MountContainer />)
})

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

hao can i build a firefox addon with plasmo? any example for it?

Is there any context that might help us understand?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

Sometimes I wanna configure the webpack to satify my own requirement, Is there any to configure? cuz I look at the docment but I'm not found the way

What is the purpose of this change/feature? Why?

e.g. I wanna copy some static html to the build assets

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

Use D - Optional style container, injected into the shadowDOM in RFC | Style injection for Content Script UI #9
add contents/index.tsx

import { Button } from "antd"
import cssText from "data-text:~/index.css"
import type { PlasmoContentScript } from "plasmo"

export const config: PlasmoContentScript = {
  matches: ["https://space.bilibili.com/*"]
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

const Index = () => {
  return (
    <div
      style={{
        position: "fixed",
        top: "50%"
      }}>
      <Button type="primary">Hello Ant Design</Button>
    </div>
  )
}

export default Index

Maybe you also should upgrade your plasmo verison.

Is there any context that might help us understand?

Originally posted in https://github.com/PlasmoHQ/examples/issues/4 by @zangguojun

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

pnpm create plasmo with-stripe

The above command would clone the with-stripe example from the examples repository, and apply necessary install/update.

This is a continuation of #36

What is the purpose of this change/feature? Why?

Better DX for bootstrapping new extension!

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

hello, dear author.

I need to implement the user login effect. However, I could not get the cookies returned by the interface after LOGGING in. I tried to set up the JSON file. sush as:

However, it will be overwritten after the restart.

In addition, I would like to know how to set up the interface request proxy to solve the cross-domain problem

Is there any context that might help us understand?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

I'm trying to test with-supabase example as-is and I get a "Manifest file missing or unreadable" error when trying to load the extension (see screenshot) on chrome Version 102.0.5005.115 (Official Build) (64-bit). My dependencies are up-to-date - Plasmo 0.43.1

I have created a .env.local based on the example example.env.local file and installed all dependencies as recommended in the example doc

I can see the contents of manifest.json in cat build/chrome-mv3-dev/manifest.json, seems valid

{
  "manifest_version": 3,
  "icons": {
    "16": "icon16.bee5274e.png",
    "48": "icon48.71d7523e.png",
    "128": "icon128.a87b0594.png"
  },
  "action": {
    "default_icon": {
      "16": "icon16.bee5274e.png",
      "48": "icon48.71d7523e.png"
    }
  },
  "version": "0.0.0",
  "name": "With supabase",
  "description": "A basic Plasmo extension.",
  "author": "lgvic",
  "options_ui": {
    "page": "options.41e68877.html",
    "open_in_tab": true
  },
  "permissions": [],
  "host_permissions": [
    "https://*/*"
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self' http://localhost;object-src 'self';"
  },
  "web_accessible_resources": [
    {
      "matches": [
        "<all_urls>"
      ],
      "resources": [
        "__parcel_hmr_proxy__"
      ]
    }
  ]
}

Any help is appreciated in debugging this further

Version

Latest

What OS are you seeing the problem on?

Linux

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

A bug happened!

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

react.development.js:207 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

Sometimes extension might need to inject own functions or objects directly to users window instance. For example Metamask attaches their provider to window.ethereum. Then third party apps can use that object to make calls to Metamask's wallet. Extension cannot access the window object directly but you can add your own script element to users DOM and do it that way. Below is an example how Metamask does it.

/**
 * Injects a script tag into the current document
 *
 * @param {string} content - Code to be executed in the current document
 */
 function injectScript(content) {
  try {
    const container = document.head || document.documentElement;
    const scriptTag = document.createElement('script');
    scriptTag.setAttribute('async', 'false');
    // Inline scripts do not work in MV3 due to more strict security policy
    if (isManifestV3()) {
      scriptTag.setAttribute('src', browser.runtime.getURL('inpage.js'));
    } else {
      scriptTag.textContent = content;
    }
    container.insertBefore(scriptTag, container.children[0]);
    container.removeChild(scriptTag);
  } catch (error) {
    console.error('MetaMask: Provider injection failed.', error);
  }
}

It used to be easier with manifest v2 and inline scripts but with v3 you cannot anymore add inline scripts. You need to use the source attribute with script and value is one of the files in your extension (in this case inpage.js), chrome.runtime.getURL('inpage.js').

The problem is, how would I use chrome.runtime.getURL with Plasmo? First of all, lets say I create inpage.ts file, the build doesn't seem to have it. I guess there isn't any way to add it bundle atm. Also if it would add it to bundle, the hash part of the filename would be a problem?

Is there any context that might help us understand?

I guess my description above contains the context as well.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

I would like to see more examples of how to use Ant Design UI in Plasmo.
Ant Design UI: https://ant.design/docs/react/introduce

Is there any context that might help us understand?

I think tailwindcss is very convenient but not suitable for rapid development.
So why not add some convenient UI.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

run pnpm build

Version

Latest

What OS are you seeing the problem on?

Linux

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

When I created the Plasmo application following the steps in the documentation, there was a type that referenced the wrong type.

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

🟣 Plasmo v0.37.1
🟠 The browser extension development framework.
🔵 INFO | Starting the extension development server...
🔴 ERROR | i.replaceAll is not a function
| TypeError: i.replaceAll is not a function

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

No response

Relevant log output

🟣 Plasmo v0.37.1
🟠 The browser extension development framework.
🔵 INFO   | Starting the extension development server...
🔴 ERROR  | i.replaceAll is not a function
          | TypeError: i.replaceAll is not a function

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

I am in the process of investigating porting our Chrome extension to Plasmo (https://attio.com/).
There seems to be an issue with the content UI scripts; they seem to require getStyle, getMountPoint and getRootContainer to always all be exported. The docs and examples seem to suggest otherwise.

I tried cloning the examples and noticed with-content-scripts-ui doesn't actually build:

I tried downgrading plasmo until I hit a working build. 0.36.1 seems to work - all later releases fail. (did remove the css import, however)

Presumably this is a regression? If so, it could be handy to have the CI for the examples attempt to build each project?

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

When I start packing, it says require doesn't exist, but the project uses es Module syntax

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

I didn't import extra weird modules

content.ts

import type { PlasmoContentScript } from "plasmo"

export const config: PlasmoContentScript = {
  matches: ["https://www.plasmo.com/*"]
}

window.addEventListener("load", () => {
  console.log("content script loaded")

  document.body.style.background = "pink"
})

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

We are discussing how to solve this issue - TBA

• #198
• Simplify the remount logic (#121)
• Exposes the underlying createShadowContainer
• Continuously mounting/remounting (#190)

What is the purpose of this change/feature? Why?

Hello, dear open source author. I encountered a difficult requirement in development. We need to embed the same button on each DOM in a list of goods, but getMountPoint does not currently support multiple DOM elements. My current approach is to use TS to write native scripts.

Originally from: https://github.com/PlasmoHQ/examples/issues/3 by @deno-source

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

When I created the Plasmo application following the steps in the documentation, there was a type that referenced the wrong type.

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

https://github.com/InboxSDK/hello-world/tree/mv3

Is there any context that might help us understand?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

if one has a /src/ directory, then the /contents/ directory is not active.

then, i tried moving into /src/contents.tsx, but then i got a different error:

~/projects/local-dev-server/browser-ext/.plasmo/static/content.tsx:4:27
?? ERROR  | Cannot load file '../../content' in './.plasmo/static'.
          | Did you mean '__./content__'?
          | Did you mean '__../../src/content__'?

and needed to apply this change:

-import * as RawMount from "~/content";
+import * as RawMount from "~/src/content";

but obv., on each re-run of plasmo dev, the /.static/content.tsx file gets re-created, so a proper fix is needed

Originally posted by @kiprasmel in #62 (comment)

What happened?

@parcel/transformer-less: Inline JavaScript is not enabled. Is it set in you

Version

Latest

What OS are you seeing the problem on?

No response

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

With a clean install of Plasmo, moving content.tsx into a src directoy results in the following errors

🔴 ERROR  | Failed to resolve '\~/content' from './.plasmo/static/content.tsx'
...
          | /Users/benjamin/code/pph-ext-plasmo/.plasmo/static/content.tsx:2:27
🔴 ERROR  | Cannot load file '../../content' in './.plasmo/static'.
          | Did you mean '__../../src/content__'?
          | Did you mean '__./content__'?

It seems to be because the compiled content.tsx is importing ~/content rather than ~content.

tsconfig.json:

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
      "~*": ["./src/*"]
    },
    "baseUrl": "."
  }
}

Version

Latest

What OS are you seeing the problem on?

MacOSX

What is the example you wish to see?

This is a good first issue if you want to contribute to our framework!

React Router is required for React apps that span multiple pages.

Is there any context that might help us understand?

This would be a highly impactful addition to the examples.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

  "manifest": {
    "web_accessible_resources": [
      {
        "resources": [
          "@inboxsdk/core/pageWorld.js",
          "@inboxsdk/core/background.js"
        ],
        "matches": [
          "https://www.plasmo.com/*"
        ]
      }
    ],
    "host_permissions": [
      "https://*/*"
    ]
  }

What is the purpose of this change/feature? Why?

https://discord.com/channels/946290204443025438/948852350766960660/991742507236995072

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

I want to process.env.XXX

What is the purpose of this change/feature? Why?

Add the parameters you want to add

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

We have DevTools support, but we need to think about how to best integrate the sub-components like Panels, etc.

What is the purpose of this change/feature? Why?

Right now, DevTools isn't supported very well with Plasmo.

(OPTIONAL) Example implementations

TODO

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

I also know a UI component library that is widely used in Chinese communities, Fusion UI (or alibaba-fusion/next)
Fusion UI : https://github.com/alibaba-fusion/next

Is there any context that might help us understand?

I think Fusion UI and Ant Design UI are very similar in function and use.
I try to install @alifd/next and write @import '@alifd/next/dist/next.css'; in index.css, but it was wrong when reading css files.
This is not a very urgent matter, but I hope you can help me to create a little example or tell me why this is wrong in your spare time.
Thank you for your care.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

error building a fresh setup

pnpm exec plasmo build                                                                                                                                                                         🔵 INFO   | Prepare to bundle the extension...
🔴 ERROR  | i.replaceAll is not a function
          | TypeError: i.replaceAll is not a function
/testplas/node_modules/.pnpm/[email protected]/node_modules/plasmo/dist/index.js:55:2498
    at Array.reduce (<anonymous>)
    at /testplas/node_modules/.pnpm/[email protected]/node_modules/plasmo/dist/index.js:55:2482
    at Generator.next (<anonymous>)
    at o (testplas/node_modules/.pnpm/[email protected]/node_modules/plasmo/dist/index.js:2:1593)
🔴 EXIT   | 👋 Good bye and have a great day!

getting this with no changes to the template after generating (and also on a template with a "content.ts" script)

Version

Latest

What OS are you seeing the problem on?

Linux

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

hello, I want set more env variables. such as:

In the documentation, I only see the configuration for .local and .produtcion

what should I do?

Is there any context that might help us understand?

Because there are more nodes in the development process, so I hope get more .env

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

Why write dead z-index: 1, i can remove it?

i use with-content-scripts-ui demo

Version

Latest

What OS are you seeing the problem on?

No response

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

https://ant-design.antgroup.com/docs/react/customize-theme#Customize-in-webpack

What is the purpose of this change/feature? Why?

I want to set the theme color globally

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

npm run dev error

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

SyntaxError: The requested module 'fs/promises' does not provide an export named 'cp'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:121:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:171:5)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async Object.loadESM (node:internal/process/esm_loader:68:5)

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

i create new package，use pnpm dlx plasmo init example-dir, bug i can't install

/private/var/folders/qp/gt975ml91_v9zgqxzjfkmbcc0000gq/T/dlx-6307/5:
+ plasmo 0.43.6
🟣 Plasmo v0.43.6
🟠 The browser extension development framework.
🔵 INFO   | Copying template files...
🔵 INFO   | Installing dependencies...
 WARN  deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Progress: resolved 461, reused 444, downloaded 0, added 0

Because there are

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

Complete output here:

▶ npm x plasmo init
Need to install the following packages:
  plasmo
Ok to proceed? (y) y
🟣 Plasmo v0.38.2
🟠 The browser extension development framework.
🟡 Extension name: top2hem
🔵 INFO   | Copying template files...
🔵 INFO   | Installing dependencies...
  plasmo latest                                                   finding ·
  @trivago/prettier-plugin-sort-imports 3.2.0                     finding ·
  @types/chrome 0.0.188                                        installing .
  @types/node 17.0.40                                             finding ·
  @types/react 18.0.12                                            finding ·
  @types/react-dom 18.0.5                                         finding ·
  prettier 2.6.2                                                  finding ·
  typescript 4.7.3                                                finding ·
  react 18.1.0                                                    finding ·
  react-dom 18.1.0                                                finding ·
/usr/local/lib/node_modules/pnpm/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:287
      if (cb) cb.apply(this, arguments)
                 ^

TypeError: cb.apply is not a function
    at /usr/local/lib/node_modules/pnpm/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18
    at /usr/local/lib/node_modules/pnpm/lib/node_modules/graceful-fs/polyfills.js:287:18
    at FSReqCallback.oncomplete (node:fs:199:5)

Node.js v17.1.0
🔴 ERROR  | pnpm exited with non-zero code: 1
          | Error: pnpm exited with non-zero code: 1
    at ChildProcess.completionListener (/Users/peterbe/.npm/_npx/b3939d9506966e6f/node_modules/@expo/spawn-async/build/spawnAsync.js:43:23)
    at Object.onceWrapper (node:events:510:26)
    at ChildProcess.emit (node:events:390:28)
    at maybeClose (node:internal/child_process:1062:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
    ...
    at spawnAsync (/Users/peterbe/.npm/_npx/b3939d9506966e6f/node_modules/@expo/spawn-async/build/spawnAsync.js:8:21)
    at /Users/peterbe/.npm/_npx/b3939d9506966e6f/node_modules/plasmo/dist/index.js:48:3398
    at Generator.next (<anonymous>)
    at o (/Users/peterbe/.npm/_npx/b3939d9506966e6f/node_modules/plasmo/dist/index.js:2:1593)
🔴 EXIT   | 👋 Good bye and have a great day!

Also probably relevant:

▶ node --version
v17.1.0

▶ npm --version
8.7.0

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

Support browser right click menu

What is the purpose of this change/feature? Why?

(OPTIONAL) Example implementations

No response

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What happened?

I want to use the latest network API of V3, but it seems that it is not very friendly to JSON files after compilation, and it becomes a JS file.

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

How do you envision this feature/change to look/work like?

Users would like to override the index.html template wrapper used to contain the popup/options/etc scaffolds.

There are two potential way to implement this feature:

1. We have a popup/index.tsx AND a popup/_document.tx file that implements the override of the index.html
2. We exposes special component tags that get transformed (or rather, mounted) into the proper area of the original index.html -> this would be similar to the tag of Nextjs where it automatically mount the data inside into the Head

What is the purpose of this change/feature? Why?

Allow customization for style injection and other capabilities that can be done more easily if the template can be modified.

(OPTIONAL) Example implementations

• https://nextjs.org/docs/advanced-features/custom-document
• https://nextjs.org/docs/api-reference/next/head

(OPTIONAL) Contact Details

No response

Verify canary release

• I verified that the issue exists in plasmo canary release

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

What is the example you wish to see?

I would like to see an example of how to use i18n in plasmo.

Recently I want to submit an extension to edge extension store. When I choose language for the extension, however, the language is English(US) by default. This extension is mainly for Chinese Market, so I want to add a "default_locale" in "manifest" field (I know I should modify it in package.json). I tried to set "default_locale" to be "zh_CN", then, plasmo give me a hint says "Localization directory does not exist: _locales\zh_CN".

I tried to move the _locales directory in the root of the project, the .plasmo directory, the assets directory seperately, but plasmo still says "Localization directory does not exists: _locales\zh_CN"

And the error message is...

🟣 Plasmo v0.42.7-alpha.3
🟠 The browser extension development framework.
🔵 INFO   | Starting the extension development server...
🔴 ERROR  | Invalid Web Extension manifest
          | Localization directory does not exist: \_locales\\zh\_CN
          | C:\Users\IsLand\Desktop\notion-helper-crx\.plasmo\manifest.json:37:3

Another question is ...

It will be awsome if plasmo can provide me an i18n example project. Thanks a lot!

By the way, plasmo is the most efficient way to build an extension. Respect!
🌹🌹🌹

Is there any context that might help us understand?

noop

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.