🧩 Plasmo Developers•12mo ago

Production and dev build

Hi all, I am having problems with some plasmo components I am using in my content script. For some reason whenever I start the server they dont show, until I console log something into the component. Any help would be appreaciated.

import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetOverlayAnchor } from "plasmo"
import cssText from "data-text:~style.css"
import iconUrl from 'data-base64:~assets/icon.png';
import { useEffect, useState } from "react";
export const config: PlasmoCSConfig = {
    matches: ["url-example*"],
}
  
export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText
    return style
}


  
export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
    const buttonReference = document.querySelector('cib-serp')?.shadowRoot?.querySelector('cib-action-bar')?.shadowRoot?.querySelector('#camera-container');
    return buttonReference;
};
  
  
const InputButton = () => {
    const [loading, setLoading] = useState(false);

    const handleButtonLoading = (e : any) => {
        console.log('button event: ', e);
        setLoading(prev => !prev);
    }


    useEffect(() => {
        window.addEventListener("button-loading", handleButtonLoading);

        return () => {
            window.removeEventListener("button-loading", handleButtonLoading);
        };
    }, []);

return (
    <div> Component here </div>
        
)
}
  
  export default InputButton;

import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetOverlayAnchor } from "plasmo"
import cssText from "data-text:~style.css"
import iconUrl from 'data-base64:~assets/icon.png';
import { useEffect, useState } from "react";
export const config: PlasmoCSConfig = {
    matches: ["url-example*"],
}
  
export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText
    return style
}


  
export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
    const buttonReference = document.querySelector('cib-serp')?.shadowRoot?.querySelector('cib-action-bar')?.shadowRoot?.querySelector('#camera-container');
    return buttonReference;
};
  
  
const InputButton = () => {
    const [loading, setLoading] = useState(false);

    const handleButtonLoading = (e : any) => {
        console.log('button event: ', e);
        setLoading(prev => !prev);
    }


    useEffect(() => {
        window.addEventListener("button-loading", handleButtonLoading);

        return () => {
            window.removeEventListener("button-loading", handleButtonLoading);
        };
    }, []);

return (
    <div> Component here </div>
        
)
}
  
  export default InputButton;

10 Replies

sagar-gohel•12mo ago

please change here export const config: PlasmoCSConfig = { matches: ["<all_urls>"], }

lukaOP•12mo ago

I don't want it to match with all websites just specific urls , isn't that what all_urls do? tried that and didnt work either

Arcane•12mo ago

@luka has reached level 1. GG!

lukaOP•12mo ago

I think I found the issue is just weird, content scripts inside folders dont run unles I do some changes directly in the file

freakaziod210•10mo ago

@luka Have you had any problems running the build command? I am trying to create a build but none of the content scripts get bundled. I also have them inside folders.

lukaOP•9mo ago

@freakaziod210 I ended up just moving everything to files instead

freakaziod210•9mo ago

@luka Thanks. I guess I'll have to do the same. Did you just put them in the src dir?

YAGPDB.xyz•9mo ago

Gave +1 Rep to @luka (current: #27 - 1)

freakaziod210•9mo ago

Or did they work inside of the src/contents dir?

lukaOP•9mo ago

@freakaziod210 put then inside contents dir and should work fine

Gaming

Programming

Production and dev build