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

KPCKevin Powell - Community

•Created by Avi on 7/5/2024 in #back-end

Multi-provider authentication on Firestore

I'm working on an MV3 Chrome extension on a feature that requires authentication with a third party provider Considering that I'm not proficient in backend, I was wondering what's the right way to handle multi-provider authentication, i.e. letting the user to login with both Google and Facebook FYI, I chose Firebase for several reasons: 1. It has a great integration with extensions such that when I put a listener for a collection on Firestore in the background script, it prevents it from getting terminated 2. Firebase is quite beginner friendly 3. I was recommended for this project to take the NoSQL route Note that Firebase officially supports authenticating with both Google and Facebook as well as linking accounts (https://firebase.google.com/docs/auth/web/account-linking), however that one works So far I've successfully managed to store user data with a Google provider, i.e. whenever user completes the Google auth flow, I store his data under the UID I received I could technically create a lookup collection that maps between users Google UIDs/Facebook UIDs and auto-generated UIDs and then a user's Google/Facebook UID is used to retrieve his data from the users collection, but it would require two reads, and I feel like there is a better and more efficient approach

1 replies

KPCKevin Powell - Community

•Created by Avi on 7/1/2024 in #back-end

Allow logins from multiple providers

I'm working on an MV3 Chrome extension and in the past several months I've been working on addin a paid feature that requires logging in to the extension Considering that I'm not proficient in backend, I chose Firebase and Firestore My goal is to allow the user to authenticate with both Google and Facebook So far I successfully managed to let the user login with Google and I save his UID in Firestore, but I realized that if his account gets deleted due to https://support.google.com/accounts/answer/12418290 , he should at least be able to authenticate with Facebook After he logs in with Google, he has to start a monthly PayPal subscription to use the feature, and so I pass the UID to the webhook and I update that Firestore entry How do I approach changing the data structure such that the authentication and the PayPal webhooks can correctly reach the user in the database?

1 replies

KPCKevin Powell - Community

•Created by Avi on 6/2/2024 in #back-end

Firebase staging help

I'm new to Firebase and to back-end stuff in general, and I'm trying to use Firebase as I consider it a friendly way to integrate a back end into my project, which is a Chrome extension Recently I've been trying to tackle the issue of setting up a staging environment. However, firebase hosting:channel:deploy staging isn't a great solution because the generated URL is short-lived, yet I need to put the URL hardcoded in the extension and distribute it to test users What would be a better way to tackle this? Thanks

2 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

KPCKevin Powell - Community

•Created by Avi on 4/23/2024 in #back-end

How to model the data?

I'm working on a Chrome extension that lets users get deeper insights into their YouTube watch time habits I'm looking to use Firestore with Google auth to store the user's data, though I'm not proficient with the back end nor with databases, I just think that NoSQL is convenient enough The current data format that's stored locally:

[yyyy-mm-ddThh:00:00]:
  [videoId]:
    channelId: string
    channelHandle: string
    timestamp: strimg
    secondsSpent: number
    videoCategory: string

[yyyy-mm-ddThh:00:00]:
  [videoId]:
    channelId: string
    channelHandle: string
    timestamp: strimg
    secondsSpent: number
    videoCategory: string

I also need to somehow store data in a scalable and maintainable way regarding: 1. Basic Google account information 2. PayPal subscription payment details 3. I also plan to introduce a feature of matching users based on their mutual watch time habits, so I also need to model data after dating apps

1 replies

KPCKevin Powell - Community

•Created by Avi on 4/20/2024 in #front-end

Making an element take 100% height and scrollable

I have a setup similar to:

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2">
    <h1>Header</h1>
    <div class="list">
      <div class="item-1">{...}</div>
    </div>
  </div>
</div>
<style>
  .parent {
    max-height: min(100vh - 101px, 892px);
    overflow-y: auto;
  }

  .child-2 {
    display: flex;
    flex-direction: column;
  }

  .list {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
  }
</style>

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2">
    <h1>Header</h1>
    <div class="list">
      <div class="item-1">{...}</div>
    </div>
  </div>
</div>
<style>
  .parent {
    max-height: min(100vh - 101px, 892px);
    overflow-y: auto;
  }

  .child-2 {
    display: flex;
    flex-direction: column;
  }

  .list {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
  }
</style>

I need the list to take the remaining height of .child-2 yet also be scrollable Currently, the list takes as much height as it needs while being constrained to .parent's height, making .parent's "internal" height increase According to my testing, the issue seems to lie in max-height: 100%

6 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

TTCTheo's Typesafe Cult

•Created by Avi on 3/24/2024 in #questions

Tailwind CSS variables based on light/dark mode

I'm importing my Sass styling into Tailwind and the structure is roughly

<button class="some-section">
</button>

<style lang="scss">
  :root {
    --button-bg: some-color;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --button-bg: other color;
    }
  }

  .some-section {
    background-color: var(--button-bg);
  }
</style>

<button class="some-section">
</button>

<style lang="scss">
  :root {
    --button-bg: some-color;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --button-bg: other color;
    }
  }

  .some-section {
    background-color: var(--button-bg);
  }
</style>

I have another section in my Chrome extension that has a toggle, something like

<script lang="ts">
  let theme: "light" | "dark" : "auto";
  const isPageDark = () => document.body.getAttribute("dark") !== null;
  let themeCurrent: "light" | "dark" = isPageDark() ? "dark" : "light";

  $: if (theme === "auto") {
    themeCurrent = isPageDark() ? "dark" : "light";
  }
  new MutationObserver(() => {
    if (theme === "auto") {
      themeCurrent = isPageDark() ? "dark" : "light";
    }
  }).observe(document.body, { attribtes: true, attributeFilter: ["dark"] })
</script>

<button on:click={() => theme = "light"}Light theme</button>
<button on:click={() => theme = "dark"}>Dark theme</button>
<button on:click={() => theme = "auto"}>Auto</button>

<main data-theme={themeCurrent}>
</main>

<style lang="scss">
  [data-theme="light"] {
    --bg: some-color;
  }

  [data-theme="dark"] {
    --bg: some-other-color;
  }

  main {
    background-color: var(--bg);
  }
</style>

<script lang="ts">
  let theme: "light" | "dark" : "auto";
  const isPageDark = () => document.body.getAttribute("dark") !== null;
  let themeCurrent: "light" | "dark" = isPageDark() ? "dark" : "light";

  $: if (theme === "auto") {
    themeCurrent = isPageDark() ? "dark" : "light";
  }
  new MutationObserver(() => {
    if (theme === "auto") {
      themeCurrent = isPageDark() ? "dark" : "light";
    }
  }).observe(document.body, { attribtes: true, attributeFilter: ["dark"] })
</script>

<button on:click={() => theme = "light"}Light theme</button>
<button on:click={() => theme = "dark"}>Dark theme</button>
<button on:click={() => theme = "auto"}>Auto</button>

<main data-theme={themeCurrent}>
</main>

<style lang="scss">
  [data-theme="light"] {
    --bg: some-color;
  }

  [data-theme="dark"] {
    --bg: some-other-color;
  }

  main {
    background-color: var(--bg);
  }
</style>

How do I make the equivalent in Tailwind?

4 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

KPCKevin Powell - Community

•Created by Avi on 1/10/2024 in #front-end

Dynamic max-height

I wish to make the list height transition but only up to a certain height Markup:

<section class="insights-watch-time">
  <div class="insights-watch-time__header">
    <h1>Top watched channels {periodCurrent[$period]}</h1>
    {#if true || channelsList.length > 1}
      <button
        aria-label="Show all"
        class="insights-watch-time__toggle-all-button"
        class:insights-watch-time__toggle-all-button--show-all={isShowAll}
        on:click={() => (isShowAll = !isShowAll)}>
      </button>
    {/if}
  </div>

  <div class="insights-watch-time__list" class:insights-watch-time__list--show-all={isShowAll}>
    {#each channelsList.slice(0, isShowAll ? channelsList.length : 1) as channel, i (channel.text)}
      <div animate:flip={{ duration: 100 }} class="insights-watch-time__list-item">
        <span
          class="insights-watch-time__list-item-index"
          class:insights-watch-time__list-item-index--show-all={isShowAll}>{i + 1}</span>
        <img class="insights-watch-time__channel-picture" src={channel.channelPicture} alt="Channel" />
        <div class="insights-watch-time__item">
          <a target="_blank" href="https://www.youtube.com/{channel.text}">
            {channel.text}
          </a>
        </div>
        <div class="insights-watch-time__time-spent">
          {channel.timeSpent}
        </div>
      </div>
    {/each}
  </div>
</section>

<section class="insights-watch-time">
  <div class="insights-watch-time__header">
    <h1>Top watched channels {periodCurrent[$period]}</h1>
    {#if true || channelsList.length > 1}
      <button
        aria-label="Show all"
        class="insights-watch-time__toggle-all-button"
        class:insights-watch-time__toggle-all-button--show-all={isShowAll}
        on:click={() => (isShowAll = !isShowAll)}>
      </button>
    {/if}
  </div>

  <div class="insights-watch-time__list" class:insights-watch-time__list--show-all={isShowAll}>
    {#each channelsList.slice(0, isShowAll ? channelsList.length : 1) as channel, i (channel.text)}
      <div animate:flip={{ duration: 100 }} class="insights-watch-time__list-item">
        <span
          class="insights-watch-time__list-item-index"
          class:insights-watch-time__list-item-index--show-all={isShowAll}>{i + 1}</span>
        <img class="insights-watch-time__channel-picture" src={channel.channelPicture} alt="Channel" />
        <div class="insights-watch-time__item">
          <a target="_blank" href="https://www.youtube.com/{channel.text}">
            {channel.text}
          </a>
        </div>
        <div class="insights-watch-time__time-spent">
          {channel.timeSpent}
        </div>
      </div>
    {/each}
  </div>
</section>

2 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

KPCKevin Powell - Community

•Created by Avi on 10/15/2023 in #front-end

Help with math in SCSS

15 replies

Gaming

Programming