0
194
ViewsIs it possible to keep a popup hidden until some code is executed?
So, I have this extension, and it should show a custom popup on the page when the icon is clicked, and by "custom popup", I mean, something rendered inside an <iframe> and injected in the page dom itself, not an "traditional extension popup", but the problem is that in some pages i'm not able to inject a content-script, in those cases, I would want to display the content in the "traditional extension popup".
I got it to work, but it's not the most elegant of a solution, here's how I'm doing it
The popup.html has no content in it's <body>, and it imports a script.
This script tries to send a message to the content script running in the page, if the message is successfully, the popup will close itself, and the content script will handle the render on the page
If the message could not be sent then it tries to inject the script on the page, if the injection works, then the message is sent again, if it doesn't, then we are on a page that does not allow injection, in that case, we simply render the content to the popup's body (i'm using Svelte here)
browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
const tab = tabs[0];
browser.tabs.sendMessage(tab.id, {action: "toggle"}).then(() => {
window.close();
}).catch(() => {
injectScript(tab).then(() => {
browser.tabs.sendMessage(tab.id, {action: "toggle"}).then(() => {
window.close();
});
}).catch(() => {
document.body.style.width="400px";
document.documentElement.style.height="580px";
new App({
target: document.body,
});
});
});
});
The thing is, most of the time, this process is basically instantaneous, you just click the icon, and the custom popup shows up, but sometimes, it takes a little longer (maybe 1 sec?), and in that time, you can see the "traditional popup" on it's minimum size (maybe something around 32x32? It's a really small square)
What I would like is to keep the popup hidden until my code "decided" wheter it's possible or not to inject the content in the page.
What I've tried and does not work:
- Setting width and/or height of the and/or tags to 0px
- Setting display:none and/or visibility: hidden on and/or tags
Is there any way to do what I'm looking for?
EDIT:
Here's an image so you can better understand what I'm talking about, this is the "square":
Sometimes you can't even see it, sometimes it just blinks, and sometimes it takes a bit longer to go away, it depends on the pc I think
1 answers
Answer question0
I would use a layer in this case. A layer can be done using CSS, can contain all of the proper formatting and text, and can be shown or hidden whenever you want not affecting any of the other text around it due to it being on another layer. I'm unsure if this will solve your problem because I don't really know the context of the program you are creating and what you are trying to accomplish.