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
sagar-gohel•11mo ago
please change here export const config: PlasmoCSConfig = { matches: ["<all_urls>"], }
luka
lukaOP•11mo 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
Arcane•11mo ago
@luka has reached level 1. GG!
luka
lukaOP•11mo 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
freakaziod210•9mo 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.
luka
lukaOP•8mo ago
@freakaziod210 I ended up just moving everything to files instead
freakaziod210
freakaziod210•8mo ago
@luka Thanks. I guess I'll have to do the same. Did you just put them in the src dir?
YAGPDB.xyz
YAGPDB.xyz•8mo ago
Gave +1 Rep to @luka (current: #27 - 1)
freakaziod210
freakaziod210•8mo ago
Or did they work inside of the src/contents dir?
luka
lukaOP•8mo ago
@freakaziod210 put then inside contents dir and should work fine
Want results from more Discord servers?
Add your server