I have a basic chrome extension that fires when the user switches to a new active tab. In the background page the URL is examined and the extension icon changes based on the URL.
chrome.tabs.onActivated.addListener(function(tabInfo) {
chrome.tabs.get(tabInfo.tabId, function(tab) {
update_tab(...)
});
});
This works fine, but the problem I am facing is that by the time the function fires and the decision is made to update the icon, the user can switch tabs again, but the icon is changed based on the previous tab.
How can I handle this more reliability?
You can have per-tab browser action icons, so you don't need to track tab switching.
If you use chrome.browserAction.setIcon to update your icon, it takes an optional tabId parameter. Same applies to setTitle.
If you do this, you need not worry about tab activations; onUpdated will inform you of URL changes.
You could try adding the onUpdated listener too:
chrome.tabs.onUpdated.addListener(function(tabInfo) {
chrome.tabs.get(tabInfo.tabId, function(tab) {
update_tab(...)
});
});
Fires when the active tab in a window changes. Note that the tab's URL
may not be set at the time this event fired, but you can listen to
onUpdated events to be notified when a URL is set. https://developer.chrome.com/extensions/tabs
Related
I have a website with "add to homescreen" enabled - i.e. I have got a manifest.json file with "display": "standalone".
The problem I'm having is when I open the website via the homescreen shortcut, it will resume from when I last accessed it. I have to pull to refresh to make it fetch the latest content.
My question is, is it possible to make it do a refresh every time it is accessed?
If you'd like to take specific action inside of your web app whenever it moves from the "background" to the "foreground" again, you could listen for the appropriate events using the Page Lifecycle API.
The most straightforward way of doing this would probably be to listen for visibilitychange events, and programmatically refresh your data source when you detect that the current visibilityState has transitioned to 'visible'.
This could look like:
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
// Your refresh logic goes here.
}
});
I am building a chrome extension for all gmail tabs.
I want to run some scripts only when I am visiting some other tab in chrome where it is not enabled/matched. How can I do that?
I think you are opt to use chrome.tabs.onActivated.addListener. This listener
"Fires when the active tab in a window changes. Note that the tab's
URL may not be set at the time this event fired, but you can listen to
onUpdated events to be notified when a URL is set.
This listener is assigned in the background.js part of the extension. That's because background.js continues to listen to state changes of windows or tabs. Dont forget to include tab permissions when using this.
This SO thread might offer an insight also.
I'm looking for an event that can be fired just right before changing a tab?
I have already seen this post, and I have also looked into the tabSelect event in the firefox extension, but I couldn't find any event that can be fired just before the tab change.
Unfortunately there is no such event.
However you can watch, with a MutationObserver, the type attribute of selected tab's browser element (gBrowser.mCurrentBrowser). When it changes from content-primary to content-targetable it's a signal that a tab switch is in progress.
As paa already noted, there is no event that happens before a tab is selected. What you can use are tricks, e.g. the Object.watch() method (yes, using it isn't exactly recommended). It allows you to listen to changes of the gBrowser.tabContainer.selectedIndex property (the setter of this property is where the select event is being fired):
gBrowser.tabContainer.watch("selectedIndex", function(prop, oldval, newval)
{
// New tab being selected, do something here!
return newval;
});
The advantage of this approach: by returning oldval from the handler you can prevent the selection from taking place.
My Chrome Extension has a popup with a few links, which I would like to be opened in the current tab if it's a New Tab page, or open in a new tab otherwise. So I believe I need to know the active tab's URL. Or is there another way to identify a New Tab?
I'd like to use the "activeTab" permission rather than "tabs" - I want the user to see as few permissions listed as possible.
The only way I've found to identify the tab's URL is by using a background page and
chrome.browserAction.onClicked.addListener(function(tab))
But this is not compatible with having a popup defined in the manifest. I can set the popup page programatically, but I can't see a way to make the popup appear. Is there a way to do that?
When I have default_popup defined in the manifest I use
document.addEventListener('DOMContentLoaded', function ())
to launch the related code, so no reference to the active tab is available. Is there another way to run the code, or to get the active tab?
Thanks.
The activeTab permission allows you to "Get the URL, title, and favicon for that tab via an API that returns a tabs.Tab object". So, to get the current tab URL from the popup you can do:
chrome.tabs.query( {active:true, currentWindow: true}, function(tabs) {
currentUrl = tabs[0].url;
});
I am writing a Chrome Userscript (Greasemonkey) extension to display a confirmation dialog when the user clicks on Gmail's Send button (in the compose window etc.).
I have manged to attach to the click even of the button and show a dialog when the button is clicked, by using:
addEventListener("click", function(e) { ......... }, true);
But I cannot stop the email from being sent. I have tried using:
e.stopPropagation();
e.preventDefault();
return false;
How can I stop Gmail from sending the email?
I think that those mentioned by you can prevent default action that is built-in in browser, and stop propagation of event to parent elements in DOM hierarchy. You probably need to get the Gmail's event listener and do something with it - wrap it with your function (so, remove original event listener and bind your function, which displays a dialog and then invoke Gmail's one). Currently, when you only add an event listener, there are two independent event handlers.
Those posts might be useful:
How to find event listeners on a DOM node?
How to check if any JavaScript event listeners/handlers attached to an element/document?