Avi Posts - Answer Overflow

Avi

Explore posts from servers

KPCKevin Powell - Community PD🧩 Plasmo Developers TTCTheo's Typesafe Cult

•Created by Avi on 9/21/2024 in #🔰newbie

Adding alias

To introduce a "types" library that is shared between the back end front (extension), I created root/types-lib/ which contains

src/types-matchmaking.ts
tsconfig.json
package.json

src/types-matchmaking.ts
tsconfig.json
package.json

when I tried to configure it in the extension's tsconfig.json, I ended up with

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["node", "svelte", "chrome"],
    "module": "None",
    "target": "ESNext",
    "verbatimModuleSyntax": false,
    "esModuleInterop": true,
    "paths": {
      "~*": ["./src/*"],
      "~~*": ["../types-lib/src/*"]
    },
    "resolveJsonModule": true
  },
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.svelte"],
  "references": [
    {
      "path": "../types-lib"
    }
  ]
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["node", "svelte", "chrome"],
    "module": "None",
    "target": "ESNext",
    "verbatimModuleSyntax": false,
    "esModuleInterop": true,
    "paths": {
      "~*": ["./src/*"],
      "~~*": ["../types-lib/src/*"]
    },
    "resolveJsonModule": true
  },
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.svelte"],
  "references": [
    {
      "path": "../types-lib"
    }
  ]
}

but I end up with

🟡 35     | C:\repositories\extensions\youtube-time-manager\extension\src\PopoverMatchmaking\tabs\preferences\ButtonRelationshipMode.svelte:5:36
🔴 ERROR  | Cannot load file './\~types-matchmaking' in './'.
🔴 ERROR  | Failed to resolve '\~\~types-matchmaking' from './src/PopoverMatchmaking/tabs/preferences/ButtonRelationshipMode.svelte'
🟡 36     | <script lang="ts">
  import IconDating from "data-base64:~assets/icons/dating.svg";
  import IconFriends from "data-base64:~assets/icons/friends.svg";
  import { createEventDispatcher } from "svelte";
  import { RelationshipMode } from "~~types-matchmaking";

  const iconMap = {
    [RelationshipMode.friends]: IconFriends,
    [RelationshipMode.dating]: IconDating
  };

  export let isActive: boolean;
  export let relationshipMode: "dating" | "friends";

  const dispatch = createEventDispatcher();
</script>

<button class="matchmaking-mode-button" class:active={isActive} on:click={() => dispatch("click", relationshipMode)}>
  <img alt={$$slots[0]} src={iconMap[relationshipMode]} />
  <slot />
</button>

<style>
  .matchmaking-mode-button {
    border: none;
    border-radius: 50px;
    padding: 0.4em 0.8em;
    background-color: #dfdfdf;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  :not(.active) {
    opacity: 0.5;
  }
</style>

🟡 37     | C:\repositories\extensions\youtube-time-manager\extension\src\PopoverMatchmaking\tabs\preferences\ButtonRelationshipMode.svelte:5:36
🔴 ERROR  | Cannot load file './\~types-matchmaking' in './'.

🟡 35     | C:\repositories\extensions\youtube-time-manager\extension\src\PopoverMatchmaking\tabs\preferences\ButtonRelationshipMode.svelte:5:36
🔴 ERROR  | Cannot load file './\~types-matchmaking' in './'.
🔴 ERROR  | Failed to resolve '\~\~types-matchmaking' from './src/PopoverMatchmaking/tabs/preferences/ButtonRelationshipMode.svelte'
🟡 36     | <script lang="ts">
  import IconDating from "data-base64:~assets/icons/dating.svg";
  import IconFriends from "data-base64:~assets/icons/friends.svg";
  import { createEventDispatcher } from "svelte";
  import { RelationshipMode } from "~~types-matchmaking";

  const iconMap = {
    [RelationshipMode.friends]: IconFriends,
    [RelationshipMode.dating]: IconDating
  };

  export let isActive: boolean;
  export let relationshipMode: "dating" | "friends";

  const dispatch = createEventDispatcher();
</script>

<button class="matchmaking-mode-button" class:active={isActive} on:click={() => dispatch("click", relationshipMode)}>
  <img alt={$$slots[0]} src={iconMap[relationshipMode]} />
  <slot />
</button>

<style>
  .matchmaking-mode-button {
    border: none;
    border-radius: 50px;
    padding: 0.4em 0.8em;
    background-color: #dfdfdf;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  :not(.active) {
    opacity: 0.5;
  }
</style>

🟡 37     | C:\repositories\extensions\youtube-time-manager\extension\src\PopoverMatchmaking\tabs\preferences\ButtonRelationshipMode.svelte:5:36
🔴 ERROR  | Cannot load file './\~types-matchmaking' in './'.

6 replies

PD🧩 Plasmo Developers

•Created by Avi on 5/11/2024 in #👟framework

Dynamically load script

Based on https://docs.plasmo.com/quickstarts/with-google-analytics , I should be able to load https://developers.google.com/maps/documentation/javascript/examples/place-search#maps_place_search-typescript as well I tied to do it in a CSUI Svelte component:

<script lang="ts">
  import "https://maps.googleapis.com/maps/api/js?key=$PLASMO_PUBLIC_API_KEY&libraries=places";

  console.log(google); // google is undefined
</script>

<script lang="ts">
  import "https://maps.googleapis.com/maps/api/js?key=$PLASMO_PUBLIC_API_KEY&libraries=places";

  console.log(google); // google is undefined
</script>

32 replies

PD🧩 Plasmo Developers

•Created by Avi on 4/15/2024 in #🔰newbie

plasmo build --zip vs web-ext build

What's the difference? https://extensionworkshop.com/documentation/develop/web-ext-command-reference#web-ext-build

2 replies

PD🧩 Plasmo Developers

•Created by Avi on 3/28/2024 in #👟framework

Flutter support

It would be interesting to see Plasmo supporting Flutter natively

2 replies

PD🧩 Plasmo Developers

•Created by Avi on 3/8/2024 in #👟framework

Firefox dev server manifest warnings

2 replies

PD🧩 Plasmo Developers

•Created by Avi on 3/6/2024 in #👟framework

Parallel dev servers

I need to both run plasmo dev --verbose and plasmo dev --verbose --target=firefox-mv3, but when I run the latter I get

🔵 INFO   | Starting the extension development server...
🟡 1      | Starting dev server on localhost:52111, HMR on localhost:52112...
🟡 2      | Creating Manifest Factory...
🟡 3      | Loaded env from .env.local  
🟡 4      | Loaded env from .env
🟡 5      | Ensure exists: C:\repositories\extensions\youtube-time-manager\.plasmo
🟡 6      | Busting large build cache, size: 1.81 GB
🔴 ERROR  | EBUSY: resource busy or locked, unlink 'C:\repositories\extensions\youtube-time-manager\.plasmo\cache\parcel\data.mdb'
🟡 7      | Error: EBUSY: resource busy or locked, unlink 'C:\repositories\extensions\youtube-time-m anager\.plasmo\cache\parcel\data.mdb'
🔴 EXIT   | 👋 Good bye and have a great day!

🔵 INFO   | Starting the extension development server...
🟡 1      | Starting dev server on localhost:52111, HMR on localhost:52112...
🟡 2      | Creating Manifest Factory...
🟡 3      | Loaded env from .env.local  
🟡 4      | Loaded env from .env
🟡 5      | Ensure exists: C:\repositories\extensions\youtube-time-manager\.plasmo
🟡 6      | Busting large build cache, size: 1.81 GB
🔴 ERROR  | EBUSY: resource busy or locked, unlink 'C:\repositories\extensions\youtube-time-manager\.plasmo\cache\parcel\data.mdb'
🟡 7      | Error: EBUSY: resource busy or locked, unlink 'C:\repositories\extensions\youtube-time-m anager\.plasmo\cache\parcel\data.mdb'
🔴 EXIT   | 👋 Good bye and have a great day!

13 replies

PD🧩 Plasmo Developers

•Created by Avi on 1/6/2024 in #🔰newbie

Payments with Google Pay

How do I integrate it?

3 replies

PD🧩 Plasmo Developers

•Created by Avi on 12/20/2023 in #👟framework

Google Analytics 4

Update the https://docs.plasmo.com/quickstarts/with-google-analytics to be using https://developer.chrome.com/docs/extensions/how-to/integrate/google-analytics-4#toc-requirements

6 replies

PD🧩 Plasmo Developers

•Created by Avi on 12/18/2023 in #👟framework

Hot swap Svelte components

7 replies

PD🧩 Plasmo Developers

•Created by Avi on 12/7/2023 in #👟framework

Svelte CSUI behaving unexpectedly

The CSUI contains both <script lang="ts"> and <script lang="ts" context="module"> Suppose I have

<script lang="ts">
  let lastTitle = document.title;
  console.log(lastTItle);
</script>

<script lang="ts">
  let lastTitle = document.title;
  console.log(lastTItle);
</script>

As far as I've tried, every time the state within the container where the injected CSUI gets updated, (in my case, pressing like/dislike), the CSUI script re-runs as if it's being remounted

6 replies

PD🧩 Plasmo Developers

•Created by Avi on 10/24/2023 in #🔰newbie

How to load SVG in CSS

In the docs I found https://docs.plasmo.com/framework/import So I did

.card-stats {
  background-image: url("raw:~assets/Spring.svg");
}

.card-stats {
  background-image: url("raw:~assets/Spring.svg");
}

but it resolves to

.card-stats {
  background-image: url("Spring.aa316ce4.svg");
}

.card-stats {
  background-image: url("Spring.aa316ce4.svg");
}

rather than

.card-stats {
  background-image: url("chrome-extension://ID/Spring.aa316ce4.svg");
}

.card-stats {
  background-image: url("chrome-extension://ID/Spring.aa316ce4.svg");
}

8 replies

PD🧩 Plasmo Developers

•Created by Avi on 10/23/2023 in #👟framework

Losing styles when injecting popup component in CSUI

15 replies

PD🧩 Plasmo Developers

•Created by Avi on 10/14/2023 in #👟framework

Fails to load source maps

8 replies

PD🧩 Plasmo Developers

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

Plasmo's dev server doesn't always properly watch for file changes

Suppose I run plasmo dev --target=firefox-mv2 I tried to modify https://github.com/avi12/youtube-auto-hd/blob/main/src/popup/components/PromotionLinks.svelte but did not see any change in the dev server Plasmo version: 0.83.0

2 replies

PD🧩 Plasmo Developers

•Created by Avi on 9/29/2023 in #👟framework

Plasmo crashes when debugging on Firefox for Android

I'm trying to simultaneously run a Firefox debug session via web-ext run --target=firefox-android and run plasmo dev --target=firefox-mv2 When I modify a script, often I get:

Error: ENOENT: no such file or directory, unlink 'C:\repositories\extensions\youtube-auto-hd\build\firefox-mv2-de
v\popup.2727c4f1.js.1756.2e'
    at Object.unlinkSync (node:fs:1889:3)
    at WriteStream.<anonymous> (C:\repositories\extensions\youtube-auto-hd\node_modules\.pnpm\@[email protected]_@p
[email protected]\node_modules\@parcel\fs\lib\index.js:1028:83)
    at Object.onceWrapper (node:events:626:26)
    at WriteStream.emit (node:events:523:35)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  syscall: 'unlink',
  code: 'ENOENT',
  path: 'C:\\repositories\\extensions\\youtube-auto-hd\\build\\firefox-mv2-dev\\popup.2727c4f1.js.1756.2e'       
}

Node.js v20.3.1
 ELIFECYCLE  Command failed with exit code 1

Error: ENOENT: no such file or directory, unlink 'C:\repositories\extensions\youtube-auto-hd\build\firefox-mv2-de
v\popup.2727c4f1.js.1756.2e'
    at Object.unlinkSync (node:fs:1889:3)
    at WriteStream.<anonymous> (C:\repositories\extensions\youtube-auto-hd\node_modules\.pnpm\@[email protected]_@p
[email protected]\node_modules\@parcel\fs\lib\index.js:1028:83)
    at Object.onceWrapper (node:events:626:26)
    at WriteStream.emit (node:events:523:35)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  syscall: 'unlink',
  code: 'ENOENT',
  path: 'C:\\repositories\\extensions\\youtube-auto-hd\\build\\firefox-mv2-dev\\popup.2727c4f1.js.1756.2e'       
}

Node.js v20.3.1
 ELIFECYCLE  Command failed with exit code 1

3 replies

PD🧩 Plasmo Developers

•Created by Avi on 9/29/2023 in #👟framework

Additional permissions for development vs production

Considering that I'm working on an ext that will also have a backend, it makes a lot of sense for Plasmo to automatically set the final host_permissions with the proper hostnames I.e. during development I will have

{
  "manifest": {
    "host_permissions": ["http://localhost:5000/*"]
  }
}

{
  "manifest": {
    "host_permissions": ["http://localhost:5000/*"]
  }
}

while in production:

{
  "manifest": {
    "host_permissions": ["https://avi12.com/*"]
  }
}

{
  "manifest": {
    "host_permissions": ["https://avi12.com/*"]
  }
}

4 replies

PD🧩 Plasmo Developers

•Created by Avi on 8/2/2023 in #👟framework

Cannot read property of null (reading '__plasmo_full_reload__')

4 replies

PD🧩 Plasmo Developers

•Created by Avi on 7/30/2023 in #🔰newbie

Browser-agnostic Google OAuth 2

I need to allow the user to log in with his Google account, regardless of the browser he's using. I'm not using Firebase BTW The issue is that Google's documentation (https://developer.chrome.com/docs/extensions/mv3/tut_oauth/#identity_permission) is not relevant to Edge, since Edge only allows https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/identity/launchWebAuthFlow What am I missing?

3 replies

PD🧩 Plasmo Developers

•Created by Avi on 7/9/2023 in #👟framework

"No supported UI library found" for Svelte 3

It works for Svelte 4 but not Svelte 3 🤨 Plasmo version is 0.77.5

7 replies

PD🧩 Plasmo Developers

•Created by Avi on 6/4/2023 in #👟framework

Unstable Firefox dev server

45 replies

Gaming

Programming