Search code examples
google-chromepush-notificationtabswindowfocus

Chrome Notification onClick go to Tab


I have a simple chrome extension that sends a notification (https://developer.chrome.com/docs/extensions/reference/notifications/) from the extension's background script. Upon clicking on the notification, a content script is executed via the chrome.tabs.query function using a url match. Inside the script I've been trying everything to focus the tab it's running on, with no success.

background.js:

const focusTab = () => {
  chrome.tabs.query({ url: 'myUrlMatch'}, tabs => {
    chrome.tabs.executeScript(tabs[0].id, { file: 'focustab.js' });
  });
}
// I'm calling focusTab from the chrome.notifications.onClicked listener callback. From the click until inside the below f() function everything works.

focustab.js:

function f() {
  window.focus();
  window.parent.focus();
  window.parent.parent.focus(); //just to make sure
}

setTimeout(f, 0); //superstition coming from angularJS

I cannot believe it's impossible to focus the tab a notification is originating from. I've read conflicting things about the permissions one has when it comes to navigating with windows and tabs in modern browsers. I'm reading a lot about window.focus() but nothing seems to be happening at all when I try playing around with that in chrome.

This is a fairly logical interaction in my eyes, to expect a notification click to take you to the tab it's coming from. Just how it works with iOS push notifications.

What am I doing wrong to get something so trivial not to work? I've read that due to security concerns browsers don't allow you to focus/switch a tab etc. I understand this makes sense in the general context of running js code, but in this specific context of clicking a notification, we clearly have a type of user consent and intention here, we even have a specific 'notifications' permission in the extension's manifest file. This must be possible.

Any help would be appreciated


Solution

  • The original poster, as well as another user, have rightfully come to the following conclusion:

    Pure JS solutions don't have the power to do this for security reasons[, logically]

    A good Security StackExchange thread about this can be found here. The appendix "logically" (OP used that word beautifully in this context) is very fitting - I think we don't need to talk about the threats that could occur if pure JavaScript had the possibilities to solve OP's question, no matter the user consent or not (as he was referring to).


    Anyhow, the solution in this specific case is to use chrome.tabs.highlight() and chrome.windows.update() from the background script. Credit to @rails_has_elegance.

    chrome.tabs.highlight(highlightInfo: object, callback: function), click here for documentation.

    chrome.tabs.update(tabId?: number, updateProperties: object, callback: function), once again click here for a full insight to the documentation.


    For further reading purposes I highly suggest taking a look at e.g. this StackOverflow question which deals with a similar problem. Note: The first answer of the user @Mohamd Mansour is deprecated - the current pendant to the gone window.focus() is the mentioned chrome.tabs.highlight() which, if you read the description of chrome.tabs.highlight(), is also slightly mentioned:

    Highlights the given tabs and focuses on the first of group. Will appear to do nothing if the specified tab is currently active.