nahtnam Posts - Answer Overflow

nahtnam

•Created by nahtnam on 11/20/2023 in #👟framework

Specify different icon path

Setting up a repo mixing in next.js and plasmo. Would be nice if I can configure where https://docs.plasmo.com/framework/icon so that I can scope it all in a subfolder called plasmo

2 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 11/5/2023 in #👟framework

Tilde Import for `.mjs`

Hey! I recently renamed a file from .ts to .mjs and I noticed that it's now unable to be imported via ~config/env.mjs (located in /src/config/env.mjs). It used to work when it was a .ts file. I think it's due to this: https://docs.plasmo.com/framework/import#tilde- Any reason .js and .mjs aren't a part of this?

8 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 11/5/2023 in #👟framework

.html relative imports

Hey I'm trying to move my project into a monorepo. I used to have:

<link rel="icon" type="image/png" href="/src/assets/images/favicon.png" />

<link rel="icon" type="image/png" href="/src/assets/images/favicon.png" />

now I have

<link rel="icon" type="image/png" href="../assets/images/favicon.png" />

<link rel="icon" type="image/png" href="../assets/images/favicon.png" />

which results in the error:

Failed to resolve '../assets/images/favicon.png' from './apps/dash/.plasmo/newtab.html'

Failed to resolve '../assets/images/favicon.png' from './apps/dash/.plasmo/newtab.html'

The index.html is in apps/dash/src/newtab/index.html, and the image is in apps/dash/src/assets/images/favicon.png

5 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 8/21/2023 in #👟framework

How do I use `tslog` (esm)

I honestly don't understand es modules that well. I know how it's intded to work but never really understood the interop modes with typescript and other bundlers. I'm trying to use tslog which is exported as an es moudle but when I do a standard import and try to use it, I get logger.ts:6 Uncaught TypeError: _tslog.Logger is not a constructor. Any ideas on what I should be doing?

17 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 7/27/2023 in #👟framework

Firefox Permissions Transform

I have the following in my package.json

"manifest": {
    "key": "$CRX_PUBLIC_KEY",
    "permissions": [
      "identity",
      "alarms",
      "notifications",
      "offscreen"
    ],
    "externally_connectable": {
      "matches": [
        "*://*.caddiedash.com/*"
      ]
    }
  }

"manifest": {
    "key": "$CRX_PUBLIC_KEY",
    "permissions": [
      "identity",
      "alarms",
      "notifications",
      "offscreen"
    ],
    "externally_connectable": {
      "matches": [
        "*://*.caddiedash.com/*"
      ]
    }
  }

However building with the firefox-mv3 target, I get a huge blurb of errors:

6 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 6/1/2023 in #👟framework

Background Keep Alive Fails

@lab Didn't want to crowd the github issue but I'm not able to use the keep alive function:

Uncaught TypeError: Cannot read properties of undefined (reading 'runtime')

Uncaught TypeError: Cannot read properties of undefined (reading 'runtime')

and as a result: Service worker registration failed. Status code: 15 I unfortunately can't even open the debug tools but here is the full generated file if that helps: https://gist.github.com/nahtnam/e6864b9cc5d5c64ed00afaca4ef3c229

9 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 5/30/2023 in #🔰newbie

Am I using Port Messaging correctly?

I have the following: background/ports/alarms.ts

// don't need anything from here. The entire goal here is to have background -> foreground comms
import type { PlasmoMessaging } from '@plasmohq/messaging';

const handler: PlasmoMessaging.PortHandler = async (req, res) => {
  console.log('handler is running');
  res.send({});
};

export default handler;

// don't need anything from here. The entire goal here is to have background -> foreground comms
import type { PlasmoMessaging } from '@plasmohq/messaging';

const handler: PlasmoMessaging.PortHandler = async (req, res) => {
  console.log('handler is running');
  res.send({});
};

export default handler;

background/index.ts

chrome.alarms.onAlarm.addListener(async (alarm) => {
  const test = getPort('alarms');

  console.log('posting message');
  test.postMessage({
    type: 'test',
  });

chrome.alarms.onAlarm.addListener(async (alarm) => {
  const test = getPort('alarms');

  console.log('posting message');
  test.postMessage({
    type: 'test',
  });

foreground/somewhere.ts

chrome.alarms.create(tabToAlarmMap[name], {
    when,
  });

chrome.alarms.create(tabToAlarmMap[name], {
    when,
  });

finally in foreground/index.tsx

function Test() {
  const mailPort = usePort('alarms');

  useEffect(() => {
    console.log('adding listener');
    mailPort.listen((msg) => {
      console.log('got message', msg);
    });
  }, [mailPort]);

  console.log(mailPort);
  return null;
}

<Test />

function Test() {
  const mailPort = usePort('alarms');

  useEffect(() => {
    console.log('adding listener');
    mailPort.listen((msg) => {
      console.log('got message', msg);
    });
  }, [mailPort]);

  console.log(mailPort);
  return null;
}

<Test />

I see adding listener in the console but whenever the alarm is triggered I get this error: checked runtime.lastError: Could not establish connection. Receiving end does not exist.

7 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 5/24/2023 in #👟framework

How do I analyze the bundle?

I noticed my app bundle increased from 8mb to 40mb after I installed a couple of deps. Is there a way I can figure out exactly what is causing the larger bundles?

37 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 5/20/2023 in #👟framework

v0.71.0 builds broken

63 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 5/20/2023 in #👟framework

react-router HMR Issues when lazy-load

Is HMR working correctly for everyone? I noticed that it's no longer working for me and I have to manually refresh the page each time. The only major change I did was switch to the new React Router 6.4 system: https://reactrouter.com/en/main so it might be that

172 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 3/17/2023 in #👟framework

Env vars broke in `v0.67.3`

Hello, I updated to v0.67.3 and my app broke. In src/newtab/index.tsx I tried console.log('b', process.env.PLASMO_PUBLIC_SUPABASE_URL); but it logs undefined. Downgrading to 0.66.0 works fine though. Additionally verified through

➜ npm run build && printenv | grep "PLASMO_PUBLIC_SUPABASE_URL"

> build
> plasmo build --no-hoist --source-maps

🟣 Plasmo v0.67.3
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🔵 INFO   | Loaded environment variables from: []
🟢 DONE   | Finished in 1778ms!
PLASMO_PUBLIC_SUPABASE_URL=http://localhost:54321

➜ npm run build && printenv | grep "PLASMO_PUBLIC_SUPABASE_URL"

> build
> plasmo build --no-hoist --source-maps

🟣 Plasmo v0.67.3
🔴 The Browser Extension Framework
🔵 INFO   | Prepare to bundle the extension...
🔵 INFO   | Loaded environment variables from: []
🟢 DONE   | Finished in 1778ms!
PLASMO_PUBLIC_SUPABASE_URL=http://localhost:54321

(The env var is set via direnv, i'm not using a .env.local file Anyone able to reproduce? Should I create a GH issue?

5 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 3/17/2023 in #👟framework

Fail Build Programatically

Hello, Is there a way to fail the build command through code? My use case is that I would like to assert that certain env variables are set during the build, and if not, throw. I tried adding a top level throw, however that doesn't fail the build (I assume rollup or whatever plasmo uses does not execute the files). I also tried process.exit(1) but didn't work (because the file itself is not being executed on build)

7 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 3/2/2023 in #👟framework

TSConfig Includes

I noticed this line in my tsconfig:

"include": [".plasmo/index.d.ts", ".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],

"include": [".plasmo/index.d.ts", ".plasmo/**/*", "./**/*.ts", "./**/*.tsx"],

Im pretty sure the plasmo lines were added by plasmo, and I consistently have tsc --noEmit fail because of it:

.plasmo/static/common/csui-container-react.tsx:3:47 - error TS2307: Cannot find module '~type' or its corresponding type declarations.

3 import type { PlasmoCSUIContainerProps } from "~type"
                                                ~~~~~~~

.plasmo/static/common/csui-container-vanilla.tsx:1:47 - error TS2307: Cannot find module '~type' or its corresponding type declarations.

1 import type { PlasmoCSUIContainerProps } from "~type"
                                                ~~~~~~~

.plasmo/static/common/csui.ts:6:8 - error TS2307: Cannot find module '~type' or its corresponding type declarations.

6 } from "~type"
         ~~~~~~~

.plasmo/static/common/csui.ts:151:9 - error TS2322: Type 'null' is not assignable to type 'Element'.

151     let overlayHost: Element = null
            ~~~~~~~~~~~

.plasmo/static/common/csui.ts:187:33 - error TS7006: Parameter 'inlineAnchor' implicitly has an 'any' type.

187       inlineAnchorList.forEach((inlineAnchor) => {
                                    ~~~~~~~~~~~~

.plasmo/static/common/csui.ts:207:34 - error TS7006: Parameter 'el' implicitly has an 'any' type.

207       overlayAnchorList.forEach((el) => {
                                     ~~

.plasmo/static/common/csui.ts:288:12 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

288     return renderFx(anchor, rootContainer)
               ~~~~~~~~

.plasmo/static/common/csui-container-react.tsx:3:47 - error TS2307: Cannot find module '~type' or its corresponding type declarations.

3 import type { PlasmoCSUIContainerProps } from "~type"
                                                ~~~~~~~

.plasmo/static/common/csui-container-vanilla.tsx:1:47 - error TS2307: Cannot find module '~type' or its corresponding type declarations.

1 import type { PlasmoCSUIContainerProps } from "~type"
                                                ~~~~~~~

.plasmo/static/common/csui.ts:6:8 - error TS2307: Cannot find module '~type' or its corresponding type declarations.

6 } from "~type"
         ~~~~~~~

.plasmo/static/common/csui.ts:151:9 - error TS2322: Type 'null' is not assignable to type 'Element'.

151     let overlayHost: Element = null
            ~~~~~~~~~~~

.plasmo/static/common/csui.ts:187:33 - error TS7006: Parameter 'inlineAnchor' implicitly has an 'any' type.

187       inlineAnchorList.forEach((inlineAnchor) => {
                                    ~~~~~~~~~~~~

.plasmo/static/common/csui.ts:207:34 - error TS7006: Parameter 'el' implicitly has an 'any' type.

207       overlayAnchorList.forEach((el) => {
                                     ~~

.plasmo/static/common/csui.ts:288:12 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

288     return renderFx(anchor, rootContainer)
               ~~~~~~~~

Is it safe to remove?

2 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 2/20/2023 in #👟framework

chrome.identity.launchwebauthflow alternative

Hey! I wanted to open up a discussion on an alternative for chrome.identity.launchwebauthflow because the firefox version is buggy (https://github.com/mozilla/webextension-polyfill/issues/248) and Safari doesn't support it at all. I'm exploring a couple of options including just opening a new tab but wanted to see if anyone has experience here and can provide pointers. One of the pros of using a new tab/window is that if the user has Google Pay set up, it will work for stripe (unlike in launchwebauthflow) and if they have a password manager it will autofill logins for the user. Here is what I have so far (not much)

/* eslint-disable no-inner-declarations */
/* eslint-disable no-await-in-loop */
type LaunchWebAuthFlow = {
  url: string;
};

export async function launchWebAuthFlow(props: LaunchWebAuthFlow) {
  return new Promise((resolve, reject) => {
    (async () => {
      try {
        const { url } = props;

        const authWindow = await chrome.windows.create({
          url,
          type: 'popup',
        });

        chrome.windows.onRemoved.addListener((windowId) => {
          if (windowId === authWindow.id) {
            reject(new Error('user closed window'));
          }
        });

        let counter = 0;
        let done = false;

        while (counter < 100 && !done) {
          counter += 1;
          if (authWindow.id === undefined) {
            done = true;
            break;
          }

          // eslint-disable-next-line no-promise-executor-return
          await new Promise((res) => setTimeout(res, 1000));
          const windowStatus = await chrome.windows.get(authWindow.id);
          console.log('window status', windowStatus);
        }
        console.log(window);

        // resolve(result);
      } catch (err) {
        reject(err);
      }
    })();
  });
}

/* eslint-disable no-inner-declarations */
/* eslint-disable no-await-in-loop */
type LaunchWebAuthFlow = {
  url: string;
};

export async function launchWebAuthFlow(props: LaunchWebAuthFlow) {
  return new Promise((resolve, reject) => {
    (async () => {
      try {
        const { url } = props;

        const authWindow = await chrome.windows.create({
          url,
          type: 'popup',
        });

        chrome.windows.onRemoved.addListener((windowId) => {
          if (windowId === authWindow.id) {
            reject(new Error('user closed window'));
          }
        });

        let counter = 0;
        let done = false;

        while (counter < 100 && !done) {
          counter += 1;
          if (authWindow.id === undefined) {
            done = true;
            break;
          }

          // eslint-disable-next-line no-promise-executor-return
          await new Promise((res) => setTimeout(res, 1000));
          const windowStatus = await chrome.windows.get(authWindow.id);
          console.log('window status', windowStatus);
        }
        console.log(window);

        // resolve(result);
      } catch (err) {
        reject(err);
      }
    })();
  });
}

36 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 2/16/2023 in #👟framework

Prettier Sort Doesn't Work With Satisfies

Just pointing this out because its part of the default init: https://github.com/prettier/prettier/issues/13951

6 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 2/11/2023 in #👟framework

Version ENV Variable

Is there an env variable for the version number of the build? I.e. the version number in the package.json? Don't see it here: https://docs.plasmo.com/framework/env

4 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 2/5/2023 in #👟framework

Remote Code fails build

Hey, If I add this line import 'https://tally.so/widgets/embed.js';, it works in the dev server but fails my build with the following error:

🔴 ERROR  | Failed to resolve './240c7a708a5899b1-5d418f573af6dce0.js' from './240c7a708a5899b1-5d418f573af6dce0.js'
🔴 EXIT   | 👋 Good bye and have a great day!

🔴 ERROR  | Failed to resolve './240c7a708a5899b1-5d418f573af6dce0.js' from './240c7a708a5899b1-5d418f573af6dce0.js'
🔴 EXIT   | 👋 Good bye and have a great day!

11 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 1/31/2023 in #👟framework

BPP Error

Hello, Just ran into this error:

Error: 🔴 ERROR  | Error: chrome: Step 1) Item ""myID_______" (caddie)": Response code 400 (Bad Request)

Error: 🔴 ERROR  | Error: chrome: Step 1) Item ""myID_______" (caddie)": Response code 400 (Bad Request)

However I looked in the dev store and it looks like it did publish that version. What I had done was go into the settings, turn on in app purchases, save draft, then run this deployment so it could be that the draft messed things up.

14 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 1/28/2023 in #👟framework

Lightning CSS Issues

After updating plasmo my github action keeps failing due to:

Could not resolve module "/home/runner/work/caddie-dash/caddie-dash/node\_modules/lightningcss/lightningcss.linux-x64-gnu.node" from "/home/runner/work/caddie-dash/caddie-dash/node\_modules/lightningcss/node/index.js"

Could not resolve module "/home/runner/work/caddie-dash/caddie-dash/node\_modules/lightningcss/lightningcss.linux-x64-gnu.node" from "/home/runner/work/caddie-dash/caddie-dash/node\_modules/lightningcss/node/index.js"

25 replies

PD🧩 Plasmo Developers

•Created by nahtnam on 1/10/2023 in #👟framework

React Devtools

Has anyone had any success using the react devtools in the new tab page? The redux one works but not the react one for some reason. I went to the chrome extension settings and gave it permissions to access file URLs but that didnt help

14 replies

Gaming

Programming