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;