FYI: Small changes to chrome.debugger.attach()

[Devlin Cronin]

Hi folks!

TL;DR: chrome.debugger.attach() will use the last committed URL of a tab.  If attaching to a new tab, wait for the tab to commit before attaching the debugger.

What's Changing

Beginning in Chrome 86.0.4224.0, the chrome.debugger.attach() function will use the last committed URL of a tab.  Previously, the debugger.attach() function would check the visible URL of a tab to see if it could connect to the tab.  Using the last committed URL provides stronger security, as the last committed URL is a better indication of the contents of the tab.

What You Should Check

If you use the debugger.attach() function, verify your extension works in Chrome Canary.  If you were using debugger.attach() on a new tab, it is possible that it will now be rejected.  You should instead wait for the tab to commit (or complete loading) before attaching.

For instance, the following code may fail.

chrome.tabs.create({url: 'https://example.com'}, (tab) => {

  // This may fail, since the tab is not guaranteed to have

  // committed at this point.

  chrome.debugger.attach({tabId: tab.id}, '1.3');

});

Instead, you can use the tabs.onUpdated() or the webNavigation.onCommitted() events to monitor for the tab load (the latter gives the most accurate timing).

chrome.webNavigation.onCommitted.addListener((details) => {

  // Make sure it's the tab you're interested in.

  if (!isRightTab(details))

    return;

  chrome.debugger.attach({tabId: details.tabId}, '1.3');

});

What if I need to attach before commit / by commit time?

If you need to attach to a tab before commit or exactly at commit (in which case attaching in response to the onCommitted event would be too late), you can attach the extension to an existing tab the extension is allowed to connect to, and then update the tab appropriately.  In many cases, simply connecting and then refreshing the page would work for this.  It's also worth noting that this was inherently racy before, as there was no guarantee that the tab may not have committed at a given point.

Please let us know if you have any questions!

Cheers,

- Devlin, on behalf of the Chrome Extensions team

[Joe Floe]

Hi Devlin,

What is the recommended  way for extension to pause initial navigation in the new tab until debugger is attached?

Here is the detailed description of the use case: 

Extension needs to attach debugger and do Fetch.enable command before initial navigation in new tab happens. This is needed to add authorithation info to the initial request in order to automatically log in the user.

New tab is open not by extension, but by user with clicking to <a target="_blank" >, so it is crucial for us to enable debugger in new tab before initial navigation.
Curently debugger is attaching too early when we do attach() from inside chrome.tabs.onCreated.

[Oliver Dunk]

Hi Joe,

Do you mind sharing more about exactly what parts of the request you modify and where the data comes from?

The debugger API is a particularly powerful one, so I'm wondering if something like declarativeNetRequest or webRequest.onAuthRequired may be a better option.

On your question specifically, could you call event.preventDefault when the link is clicked and then open the tab manually using the suggestion Devlin made? I'm thinking you would open a blank page, attach, and then update the URL.

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/5faeb9b9-18d8-423a-a2b7-8d6f87774793n%40chromium.org.

[Joe Floe]

Hi Oliver.

We have everything what we need inside  debugger API. The only problem is that we are not able to attach debugger early enough in order to modify initial request to the tab's URL.
What exactly we need to do on the new tab opened on target="_blank", before initial URL navigation started:

1. chrome.debugger.attach()
2. Send Fetch.enable command 

Later, on paused initial request on the request stage, we want to send Fetch.continueWithAuth , providing credentials to server.

We have no control over <a target="_blank" > link, since our extension may be use on different websites, so we are not able to do event.preventDefault. Also we need to support <form target="_blank" > as well.

Solution for us would be to pause initial navigation on the new tab untill we completed attaching debugger and sending Fetch.enable command, but we are not sure how to achieve it.

[Oliver Dunk]

We have no control over <a target="_blank" > link, since our extension may be use on different websites, so we are not able to do event.preventDefault. Also we need to support <form target="_blank" > as well.

For the former, could you inject a content script into each page?

I suspect form support would be harder. I'm not immediately sure if that's possible with the APIs as they are today.

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

[Joe Floe]

Yes, we can inject a content script into each page

[Oliver Dunk]

Ok, that seems like a possible solution then I think?

You should be able to attach a global click listener in a content script injected on each page. This will then allow you to call event.preventDefault() to prevent the browser's native behaviour and open a new tab which you can attach the debugger to.

Let me know if that makes sense :)

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

[Joe Floe]

Hi Oliver,

Thanks for the proposed solution, we will check it. 

The only downside that I see for us is that probably calling  event.preventDefault() may impact our user's website logic, and we try not to modify the website behavior with our extension.