Chrome Extension popup.html disappears when clicking on the page - google-chrome-extension

I am new to Chrome Extension. I have a popup.html that collects data and displays when mouse over on the current open page/tab. I also send data to popup.html on click on the current open page/tab.
The problem is when i click on the page data gets passed to the popup.html but popup.html disappears/closes. When i click on the extension again the data persists since i am persisting the data on a background page.
How do i avoid popup.html not to close/disappear on click on current open page/tab.
Thanks in advance

It is not possible.
The popup for Browser Actions / Page Actions is designed to close as soon as it loses focus. It is also not possible to programmatically open it.
You did correctly by making the background script handle the data. If you need persistent UI while you're interacting with a page, then your only option seems to be some HTML UI injected by a content script.
You might be interested in this question.

I understood that pop.html does not persist on the screen, hence took up a different route by getting my extension on to the chrome dev tools. They perform the same actions such as an extension the pain is that your dev tools have to be open always.
For my use case keeping the console open does not make much of a difference. This post helped me a lot set this up.
Thanks for your suggestions

I m not sure u can. There is a reason the page is named as popup. Although you can try notifications(https://developer.chrome.com/extensions/notifications) to provide the same functionality.

Related

How to close/destroy chrome devtools ExtensionPanel programmatically?

I have recently created a extension for devtools, which adds a new ExtensionPanel on devtools. Since this panel is useful only on certain pages, I wanted to show it conditionally depending on contents of current page. I can create a panel dynamically,depending on context of the page, but I was unable to find any way to close it (I've tried window.close() and panel itself doesn't have any methods like this).
So my question: Is there any way to close ExtensionPanel programmatically?
This is not supported by DevTools at the moment -- if you add a panel or sidebar, it's for the life of DevTools front-end. All stock DevTools panels are displayed unconditionally and the rationale for the lack of API methods to remove panels is to avoid confusion created by panels coming and going. If a panel is not applicable to the page being inspected at the moment, you can perhaps display a banner explaining why it's not applicable.

Interaction between Chrome extension popups and DOM w/o running into CSS conflicts

After many hours of research, I've seen multiple ways to do similar things. But I don't want to pigeonhole myself into approaching this in the wrong way, so I would appreciate any advice on how to achieve the following.
When clicking on my extension icon, I want to load a toolbar onto the current page. This toolbar has a number of links and forms that can:
Interact with the original page (DOM Listeners, changing the DOM)
Create additional extension popups on the original page
Make requests to external resources
From a JS perspective, I think it would be easiest to inject all my own HTML directly on the page and handle functionality via one content script. I abandoned that approach after realizing I'd never be able to account for all CSS conflicts in my popups.
So instead, this is what I have so far. When clicking on my Extension icon, I inject a div into the current page and load up an iframe sourced to a popup.html via chrome.extension.getURL('popup1.html'). This is where I get stuck. By loading my content into an iframe, I have isolated any CSS issues. But say I have text selected on the parent page and I click a button in my popup1.html. Is there then a way to pass the selected text back to the popup1.html or to show that selected text in a new popup2.html?
I hope that once I get the workflow down on how to do this kind of interaction I can move on with development. Thanks for your help!

Making extension always opened once the user clicked in the extension icon, only close when the extension icon is clicked

I want my extension, once it is opened (clicked on the icon), to only be closed when the user click on my extension icon , like it happens when you have developer mode on and 'Inspect Pop-up', when it's in developer mode you can only close your extension after you click in the icon of it in the chrome.
I would like to make it visible until the user click on the extension icon (not any click outside) to close it but without having to have the developer mode on.
or if this is not possible I would like to at least once my extension is clicked, make my extension active so it can deal with the chrome.webRequest.onBeforeRequest.addListener()
Thanks in advance.
Take a look at background pages. As the documentation says a background page is
a single long-running script to manage some task or state
It should work if your aim is to achieve such a task.
Maybe, Desktop Notifications are some kind of decision.

Closing tabs when a chrome extension is disabled/reloaded

I have a Chrome extension that opens a number of tabs, which it keeps open and uses to display data. I want those tabs to close when the extension is disabled or reloaded. My initial thought was that background.html would be unloaded when I restarted the plugin, but I can't seem to get anything that involves this to work. Any suggestions?
Chrome automatically closes pages with chrome-extension://<your_extension_id>/local.html urls (pages from the extension directory) when an extension is disabled. So if you can display your data using those pages - they will get closed. If it is some external site you are displaying - maybe you can make a local stub page with iframe and load your external site there.
Otherwise I can't think about any other way (besides having another extension watching this one).
i dont' know so much about chrome extensions, but, I think you are openning new windows by something like var w = window.open(params), so, you can close the window with w.close().
if not, ignore my answer :P

Chrome extension performance

I have developed a chrome extension. The extension itself works fine and fast.
But when I start the browser and click on the toolbar icon of my extension it takes about 2 seconds for the popup to appear and to show its content (this happens anytime the browser is restarted).
Any idea what causes this and how to fix that?
Tip 1:
Use your popup page for rendering exclusively. It should be as light as possible. All the heavy loading/processing (localStorage, XMLHttpRequests, blocking javascript) must be done in the background page.
The background page is loaded when Google Chrome starts. Basically, it allows you to execute code and keep a page always running (although the popup is not present). For instance, streaming audio in a html5 tag with no popup.
Note: If you are not using a background page yet, you should be taking a look to message passing first.
Tip 2: Warning: This could fail
I haven't tested this yet, but maybe using the HTML5 manifest.cache can help you preventing loading again resources stored locally. But beware, this is HTML5 and is prone to changes and unstability across versions. (also, I am not completely sure that the cached resources will be loaded in memory before the popup is opened)
Hope it helps!

Resources