I need to store some data every time I move to some other tab in the same window or some other window using chrome storage API or even when a new tab is created. So, basically when my active tab is no longer active anymore.
So, for example, If I am on tab A and then I move to tab B(or create a new tab). When this switching happens from A to B, I need to save data from the website running in tab A. (I am getting the data from the site in tab A using content script.)
A more concrete example would be, suppose I am on YOutube site and I have a timeout timer running(using a content script). So when I move to some other site I want to stop the time get the current remaining time and save that. and if the other site is youtube too(in tab B) I would start the time from the previously saved value.
Is there any event listener for this? I looked at the documentation for chrome.tabs but could not figure it out.
I saw onActivated event listener but I am not sure if that would be useful.
Or is there some other way to achieve this?
Yes, according to the documentation onActivated:
Fires when the active tab in a window changes.
As an alternative, also can use content scripts that notify your extension when a page gain or loses focus with window.onfocus and window.onblur.
This way you'll be able to track the visibility of the tabs, though you should carefully select the required permission.
Related
I am using desktopCapture.chooseDesktopMedia with only ["tab"] option to choose the tab to be streamed. After making the selection, chrome doesn't automatically switch to the selected tab. How can I get the tab ID that was selected so that I can make it active? I only receive a stream ID in the callback.
Good question, but reading the docs seems to suggest you don't get that information in any way, nor can you change the flow to having the user select the tab first and then offering only that tab for capture.
Might be a candidate for a feature request over at https://crbug.com/
Right now I developing a product based on Chromium extension which monitors user actions by taking screenshots on several DOM events, such as mouse "click". I using chrome.tabs.captureVisibleTab API for doing that.
The problem: if user makes a click on tab "A" content and then very fast choosing another tab "B" - captureVisibleTab takes screenshot of currently visible tab "B" (instead of tab "A", where action happened).
This is because it take some time while "click" message passing from content script to background (asynchronously) and screenshot taken (also asynchronously) and during that time another tab already activated.
One possible solution I had been thinking is instead of using "captureVisibleTab" - use some another capture API which takes tab id as an argument - but I cannot find such API.
Any ideas?
When I started create extension, I didn't know that "popup" always reinit after open.
Is it have some options for off this behavior?
"background" page is not good for me.
That is the default behavior, just like closing-opening a tab/window.
Using background page (persistent: true) is a good way, it lives through the entire browser lifetime.
However, if for some reason you are not planning to use background page, I guess chrome.storage or Window.localStorage is also a good way, taking the former for example, you can store data through chrome.storage.local.set while retrieving the data via chrome.storage.local.get every time the popup page opens.
I'm writing a chrome extension and have a question.
My extension has some .html page in it, let it be 'popup.html'. I inject a content script into some page and this script opens a 'popup.html' in a new tab with something like 'var p = window.open(chrome.extension.getURL('/popup.html'), "popup")', which works perfectly. Next, I need to pass some data to this window and I can't figure how to do it in a simple way.
For some reason I can't call child window's function from a content script with
var p = window.open(chrome.extension.getURL('/popup.html'), "popup");
p.foo(data);
In the console I see Uncaught TypeError: Cannot call method 'foo' of undefined message.
I can't pass data in a query string, because the data is simply too big.
Is there an elegant and simple way to pass data to such kind of window? I thought about messaging, but how do I effectively get tab ID of a newly opened window w/out using a background page?
Thanks a lot in advance.
UPD:
I tried to inverse the logic and get a data from parent window with 'window.opener.foo()' but in a newly opened tab window.opener returns null.
Ok, I found two solutions to my problem.
1) Add a background page, which opens a popup with chrome.tabs.create(). Then send a message from a content script to a background page, which re-sends it to a corresponding tab via chrome.tabs.sendMessage(). It looks a little ugly, but works.
2) A better one, w/out background page. Extension (popup) page creates a listener for long-lived connection. Then content script sends a message to this connection. A problem here is that a listener is not created right after the page is opened, so there should be a mechanism for a content script to wait until popup is loaded. It can be a simple setTimeout or a notification from popup via same long-lived connection.
If anyone has a better solution I'd gladly check it out as well.
Actually, I want to store some data in background page and the popup page just show that part of data say Data as a div element created in background page document.createElement("div"). Here, the background page will register some listeners to the tab update and change the Data elements accordingly. What the popup will do is to get that Data and appendit use the document.appendChild(Data).
(The purpose I intend is this will cause the popup changes immediately while the tab updage is triggered.)
However, the elements are shown as usual, what I am facing very headache is I have registered the onclick for the div object in backgroundpage as onclick="chrome.extension.getBackgroundPage().somefunc()". However, the first time, all the click will triger the right behavior but after the popup loses foucs and get focus again, all the click won't work.
I try to put something like change the onclick="somefunc()" and leave the func within the script of popup page. And there I want to log whether it is called by console.log("clicked"). Here, something unbelievable happens, the function is succefully trigerred BUT the console is null here, I cannot even call chrome.extension.getBackgroundPage() as well.
Here are a list of questions, maybe very hard to express for me...
1. Whether I can reuse the DOM element from the background page to the popup page directly by appendChild(chrome.extension.getBackgroundPage().getElementById()?
2.Will the onclick event registered in the background page still work in the popup pages?
3. What's the problem with the problem I am encountering? I have tried many ways to find out the reason but all in vain at last...
Best Regards,
If you need any more information, please let me know.
(PS: I am wonderning if it is called something like the event propogation, however, I am not an expert in this two pages communicating...)