Kiran Comments - Answer Overflow

Kiran

Explore posts from servers

•Created by Kiran on 5/6/2024 in #🔰newbie

Re-rendering with a custom render function

Also leaving this message for anyone else who had issues with Plasmo - I actually just ended up migrating my extension from plasmo to CRXJS today (https://crxjs.dev/vite-plugin). I was able to write the same solution in much less lines of code. Plasmo is also just way too buggy for me - the extension doesn't even update half the time when I edit a file and I often have to manually kill plasmo and restart the process to get it to update. The content UI HMR is also extremely buggy, and doesn't work at all for global css. CRXJS feels much faster and has perfect HMR. It has less features, but more third party libraries are just working out of the box since it uses Vite, and it gives much more control over the DOM which I enjoyed a lot more.

11 replies

PD🧩 Plasmo Developers

•Created by Kiran on 5/6/2024 in #🔰newbie

Re-rendering with a custom render function

Essentially, it just requires you to to call coreGetRootContainer with the parent selector where you want to inject the component, the id that you gave to the component (it's required to give an id in jsx), and then just pass the actual component. The other method is renderComponent which doesn't require anything custom, just follow the same example to pass a root container element. How it works: It replaces plasmo's renderer with a custom renderer. This was specifically designed to not use shadow root and inject directly instead to inherit the page styles. After the initial render, there is a DOM observer that gets created to continuously watch all DOM changes. When it finds out that the component no longer exists, but the parent element still does, it will re-inject it. (example - you want to inject a button inside a div. The user is on an SPA so the div disappears along with your button when they move to a new page. Then, they move back to that same page, so it detects that the div showed up again but without the button, so your button gets re-injected). Overall pretty hacky but it worked.

11 replies

PD🧩 Plasmo Developers

•Created by Kiran on 5/6/2024 in #🔰newbie

Re-rendering with a custom render function

Example usage of a component from my project:

import type {PlasmoCSConfig, PlasmoRender} from "plasmo"
import {coreGetRootContainer, renderComponent} from "~core/core";

// --------------------------------------------------------------------------------
// Config
export const config: PlasmoCSConfig = {matches: ["https://www.duolingo.com/*"]}
export const getRootContainer = () => coreGetRootContainer("._2-F7v", 'better-input', BetterInput);
export const render: PlasmoRender<any> = async ({createRootContainer}) =>
    renderComponent(await createRootContainer() as HTMLElement, BetterInput);

// --------------------------------------------------------------------------------
// Component
const BetterInput = () => {
    return (
        <input
            id="better-input"
            placeholder="Type here..."
        >
        </input>
    )
};

export default BetterInput;

import type {PlasmoCSConfig, PlasmoRender} from "plasmo"
import {coreGetRootContainer, renderComponent} from "~core/core";

// --------------------------------------------------------------------------------
// Config
export const config: PlasmoCSConfig = {matches: ["https://www.duolingo.com/*"]}
export const getRootContainer = () => coreGetRootContainer("._2-F7v", 'better-input', BetterInput);
export const render: PlasmoRender<any> = async ({createRootContainer}) =>
    renderComponent(await createRootContainer() as HTMLElement, BetterInput);

// --------------------------------------------------------------------------------
// Component
const BetterInput = () => {
    return (
        <input
            id="better-input"
            placeholder="Type here..."
        >
        </input>
    )
};

export default BetterInput;

11 replies

PD🧩 Plasmo Developers

•Created by Kiran on 5/6/2024 in #🔰newbie

Re-rendering with a custom render function

11 replies

PD🧩 Plasmo Developers

•Created by Kiran on 5/6/2024 in #🔰newbie

Re-rendering with a custom render function

Here's the finished example. I put this in a file called core.tsx in a separate directory outside the contents folder.

11 replies

PD🧩 Plasmo Developers

•Created by Kiran on 5/6/2024 in #🔰newbie

Re-rendering with a custom render function

I have found a working solution, with reusable functions that automatically enable any component to be directly injected without a shadow root and without parent elements. It is quite large/messy, so I will update it and post the solution later.

11 replies

MModular

•Created by Kiran on 10/17/2023 in #questions

Build options - supported platforms

Also in the future - since mac support is coming this week, I had another question. I know you can import Python code and set MOJO_PYTHON_LIBRARY to allow it to use python. After building, will the resulting executable will require python to be installed on the user's system, or is there an option to package it with the executable? I would like to develop executables that can run without any dependencies on a user's system.

3 replies

Gaming

Programming