tatsumaru Posts - Answer Overflow

tatsumaru

•Created by tatsumaru on 10/12/2024 in #👾extension

Maximum size for extension bundle/archive you can upload in Google Chrome Store?

I've looked in the Google docs and in the developer portal, but can't find a single place which states what's the maximum size of an extension bundle/archive. Any clues?

2 replies

PD🧩 Plasmo Developers

•Created by tatsumaru on 10/12/2024 in #👟framework

Dynamically Injecting Content Scripts with Plasmo CSUI

I'm working on a browser extension and wondering about the feasibility of loading external scripts dynamically. I understand that Chrome Web Store policies are generally restrictive when it comes to dynamic script injection, especially for security reasons, but I'm interested in whether anyone has found long-term success with this kind of setup (for example for when different users are paying for different features). Specifically: - Has anyone been able to dynamically load external resources or scripts without facing issues during Web Store review or updates? - Are there alternative approaches for managing modular content (e.g., selectively loading features from a server) that comply with Web Store policies? - How have solutions like content security policies (CSP) and server-managed entitlement checks been used to navigate this kind of challenge? I'm trying to understand if it's possible to achieve flexibility in feature loading without violating the security rules or risking removal from the store. Any insights or experiences would be really helpful!

2 replies

PD🧩 Plasmo Developers

•Created by tatsumaru on 10/11/2024 in #👟framework

Does each CSUI component get a separate React copy?

The Content Script documentation says: "A script that ends with .ts will not have front-end runtime (react/vue/svelte) bundled with it and won't be treated as a ui script, while a script that ends in .tsx, .vue or .svelte, will be." Just curious if each CSUI component gets its own copy of Reach or if somehow Plasmo manages to share the same React dep with all components. Thanks.

2 replies

PD🧩 Plasmo Developers

•Created by tatsumaru on 10/10/2024 in #👾extension

Can I use native web components with CSUI?

I tried using Content Scripts UI (CSUI) with a native web component instead of a react component (see below), but I got a bunch of React errors in the browser console referring to a React component. Is there a way to make Plasmo work with native web components or something like Lit? Thanks.

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://www.plasmo.com/*"],
  world: "MAIN"
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(`[href="/#pricing"]`)

// Use this to optimize unmount lookups
export const getShadowHostId = () => "plasmo-inline-example-unique-id"

class PlasmoInline extends HTMLElement {
  constructor() {
    super();

    const container = document.createElement('div');
    container.style.borderRadius = '4px';
    container.style.padding = '4px';
    container.style.background = 'pink';
    container.textContent = 'CSUI INLINE';

    // Append directly to the element without shadow DOM
    this.appendChild(container);
  }
}

// Define the custom element
customElements.define('plasmo-inline', PlasmoInline);

export default PlasmoInline

import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://www.plasmo.com/*"],
  world: "MAIN"
}

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector(`[href="/#pricing"]`)

// Use this to optimize unmount lookups
export const getShadowHostId = () => "plasmo-inline-example-unique-id"

class PlasmoInline extends HTMLElement {
  constructor() {
    super();

    const container = document.createElement('div');
    container.style.borderRadius = '4px';
    container.style.padding = '4px';
    container.style.background = 'pink';
    container.textContent = 'CSUI INLINE';

    // Append directly to the element without shadow DOM
    this.appendChild(container);
  }
}

// Define the custom element
customElements.define('plasmo-inline', PlasmoInline);

export default PlasmoInline

9 replies

PD🧩 Plasmo Developers

•Created by tatsumaru on 10/10/2024 in #👾extension

Error loading {script-name}: ReferenceError: importScripts is not defined

Is this a Plasmo Bug? I am trying to load a module using a dynamic import like this in the content script: const module = await import('../local/app.js'); So far it hasn't worked and I am seeing this error in the console. I am not using importScripts as far as I can tell but this js-loader.js might be. Any clues? Error loading {script-name}: ReferenceError: importScripts is not defined

2 replies

Gaming

Programming