Extract Android Chrome Tabs via USB Debugging

While only partially security related, I finally learned out to get my Android Chrome tabs to my desktop.

Android Chrome Tabs – Introduction

For those of you like me, you’ll open a tab from Twitter/Slack/Reddit/etc. on your phone, and then want to get it to your other machine(s).

My elegant solution recently has been to copy the URL, message it to myself on Slack, and then close the tab. This is far from efficient, and I either end up with 100 Slack messages, 100 tabs, or both.

After finally performing a bit of research (Googling and trying things), I found a way to get all the tabs off of my device without rooting it.

Connecting the Device

First, enable USB debugging on your device. To do this, you to Settings -> System -> Developer Options. If you do not have Developer Options enabled yet, then go to Settings -> About Phone. Scroll down in this menu until you see “Build number”. Click this button 7 times, and you should see that you’ve enabled the developer settings.

Next, connect the device to your computer’s USB port. Apologies for the awkward picture, but it is hard for my phone to take a picture of itself (for now). If you receive a warning about allowing USB debugging, then click Yes/Allow.

Once you’ve connected the phone and enabled USB debugging, open up Chrome on your computer.

Inside of Chrome, go to Developer Tools -> More tools -> Remote devices.

Make sure that “Discover Devices” in checked. If it is not, check it and then reconnect the USB device (making sure to allow debugging).

Once this is complete, the Android device should show up as connected.

For more information on remote debugging, you can visit the following Google developers page.

Downloading the Tabs

First, make sure that the Remote devices tab of the Developer Tools window has focus.

Next, open ANOTHER Developer Tools window from inside of the remote devices tab. You can do this by pressing CTRL + SHIFT + I.

Once the extra window is open, you can use the following JavaScript in the console to copy your tabs to the clipboard.

tabs = document.querySelectorAll('div /deep/ div /deep/ div /deep/ div /deep/ div /deep/ .device-page-list .vbox')
str = '';
for (i = 0; i < tabs.length; i++){
    if (tabs[i].querySelector('.device-page-url .devtools-link') != null){
      str += '- ['+tabs[i].querySelector('.device-page-title').textContent + '](' + tabs[i].querySelector('.device-page-url .devtools-link').getAttribute('href') +')\n'
    } else {
      console.log(tabs[i])
    }
}
copy(str)

Note that this code will grab the title, as well as the URL for all of your open tabs. This code will work for regular, as well as incognito tabs as well. Finally, you can modify the code (or grab a different one from the StackOverflow link) if you wish for the output to print as opposed to placed on the clipboard.

Updated Code!

As of January 2020, the above JavaScript no longer grabs the correct divs, and will return a blank string.

That said, I have updated the code, and you can find it below.

tabs = Array.from(document.querySelector('div /deep/ div /deep/ div /deep/ div /deep/ div /deep/ div /deep/ div.vbox.flex-auto').shadowRoot.querySelectorAll('.devices-view .device-page-list .vbox'), s => ({name: s.querySelector('.device-page-title').textContent, url: s.querySelector('.device-page-url .devtools-link').getAttribute('href')}))
str = '';
for (i = 0; i < tabs.length; i++){
    if (tabs[i].name != null){
      str += '- [' + tabs[i].name + '](' + tabs[i].url + ')\n'
    } else {
      console.log(tabs[i])
    }
}
copy(str)

Android Chrome Tabs – Conclusion

While I hope to only use this method occasionally, it definitely saved me a lot of time over my Slack messaging method.

Let me know if you know an even more efficient method, or if you sync tabs across multiple devices somehow.