Pre: I'm in chrome and logged in
I launch (click on) my popup window. It saves some data in all storages (windowlocal, windowsession, google local and google sync)
I right click on it, and choose inspect.
The dev tools window comes up for the popup
I look in Storage Explorer in Dev Tools, I see all my data is there, in all storages.
I put a breakpoint at the start of my popup.js code. This breakpoint is before it loads any data or does anything. It's at the beginning of the constructor.
I hit F5 on the Dev Tools window. It flickers and comes back
Expected Result: I see all the data I've saved
Actual Result: No data whatsoever is there, in any of the storages. It's all gone.
What am I doing wrong? Is popup not supposed to be able to save data?
Issues
If you put a breakpoint in the constructor of an extension on dev tools, it's likely that storage explorer won't show anything, because it hasn't loaded yet
In my constructor, I was loading the settings correctly from storage, but then immediately overwriting them with the default values because I was calling load() first, and it had become asynchronous, and further down in my code in my settings property setters were re-saving the default values, so by the time load() resolved itself to execute, it was just reading the (just) saved default values.
Solution
I brought the load code out of the constructor into an async function, and called that function right at the end of my constructor. In that function, I used await to make sure the settings were loaded from storage, then continued to set the settings properties.
Related
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.
For example, on page I have a button, which causes to fire XYZ function (which is already loaded inside namespace in external JS).
However, I wanted there to change only one function in that script only (not page), and reload that script again, so, that the BUTTON will fire the modified function..
How to do that?
Shouldn't be a problem.
You can use the console to redefine the function.
Just click F12, go to Console,
then type in your edited function and click enter.
Then click the button and the modified function will be executed.
Note When editing the function from the console, make sure that you are in the right context:
If you type the function name and get a function this means you can edit it. If you get undefined, this means you are not in the right context and should change the scope in which the function is defined in.
You can change scope in Chrome's console if needed by using this dropdown (for example when the code is run from an iframe):
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.
My DevTools extension injects script into the inspected window in order to parse and receive messages from-- normally on page load, but also when DevTools is first opened.
The relevant line in the background page is as follows:
chrome.tabs.executeScript(message.tabId,{ file: 'insert.js', runAt: 'document_idle' },function(results){console.log(results);});
This line normally displays [null] in the background console upon success-- and is successful both when opening DevTools in docked state, and when a user navigates to a new URL with DevTools in any state. It's only not working when DevTools is opened in an undocked state; in that case, the call is failing silently and results is returning undefined.
Permissions are "tabs", "http:///", "https:///"; and again, it's only not working in this one very specific case.
Is this a known issue with a workaround or should I consider this a Chromium bug?
The test case of your bug report contains a typo.
he onMessage event listener in your event page expects the tab ID to be available as message.tabId:
chrome.tabs.executeScript(message.tabId,{ file: 'insert.js', runAt: 'document_idle' });
However, in the devtools page, the message is being sent as "tabID" (note: capital D).
chrome.runtime.sendMessage({type: 'newpageload',tabID: chrome.devtools.inspectedWindow.tabId});
Because message.tabId is undefined in the event page, Chrome defaults to inserting the content script in the active tab of the current window. When the developer tools is undocked, this tab is (coincidentally) identical to the inspected tab, so you did not notice the error.
When the devtools are undocked, the current window is the devtools. Since you cannot script the developer tools, nothing appears to happen. If you read the value of chrome.runtime.lastError in the callback of chrome.tabs.executeScript, you would have noticed that you're trying to insert the script in the wrong window.
After changing the "tabId" to "tabID", the test case works as expected.
I have a strange problem with a browser action icon in Chrome. There is a default icon for browser action defined in manifest. The icon is displayed correctly. Then in a background page, under some conditions, I call:
chrome.browserAction.setIcon({path:"green_32.png", tabId:request.tabId});
This icon blinks for a moment, and then changes back to the default icon. The active tab and its id passed to setIcon remain the same during all the process.
Can someone suggest an idea why this can happen?
The reason why the icon was reset to default state every time is because I called setIcon before the tab finishes loading and obtains "complete" state.
I guess there should be some information about this in documentation on tabs or on browser actions, but I didn't find it: the default icon is actually applied - by-design - to a specific page after it finishes loading. I moved the call setIcon into tabs.onUpdated handler, and now custom icon persists.
This contradicts to my former understanding that the browser action icon is set on a per tab basis, regarless to a page loaded into the tab and its state.
#KonradDzwinel kindly provided a simple extension to test the case (look at the comments). I changed its background.js script to demonstrate this behaviour:
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.browserAction.setIcon({path: 'gfx/icon2.png', tabId: tab.id});
});
To reproduce this behaviour, on any tab press the browser action icon to get it changed. Then refresh the page. As a result the browser action icon reset back to default.
If this behaviour is explained in some documentation, please, write this in comments, and I'll update the answer. From what I have read so far, I was convinced that default icon is set for new tab at its creation time, and then any changes to it are solely under extension's control.