Free tool: Get AI Overview sources in one click

min read



I don’t know about you, but I’m getting pretty overwhelmed with the way Google Search results look these days. I guess it is partly my fault since I opted into Google’s Generative AI experiment. I imagine most people that are taking part in the experience are primarily involved in SEO, and out of curiosity want to understand how the SGE works.

So, to help me wrap my head around the Generative AI results I decided to create a bookmarklet that could quickly extract all of the sources that are used to build them. I thought I’d share it with the community in case it helps anyone with their own research.

Get the free bookmarklet

  1. On Chrome, type @bookmarks into your browser bar
  2. Click on the three dots in the upper right corner
  3. Click ‘Add new bookmark
  4. Call it whatever you like, and copy the code below into the ‘URL‘ field.
javascript:(function(){const links=document.querySelectorAll('div[jsname="s2gQvd"] a');const uniqueUrls=new Set();const extractedInfo=[];links.forEach(link=>{const href=link.getAttribute('href');const ariaLabel=link.getAttribute('aria-label')||'';const divTextElement=link.closest('div[jsname="s2gQvd"]').querySelector('div[style="font-family:inherit;-webkit-line-clamp:2"]');const divText=divTextElement?divTextElement.textContent.trim():'';if(href&&!uniqueUrls.has(href)){uniqueUrls.add(href);const anchorText=href.startsWith('/')?window.location.origin+href:href;const decodedAnchorText=decodeURIComponent(anchorText);const cleanAnchorText=decodedAnchorText.replace(/(#:~:text=)(.*)/,(_,prefix,text)=>`${prefix}<strong>${text}</strong>`);extractedInfo.push({href:href,anchorText:cleanAnchorText,ariaLabel:ariaLabel,divText:divText});}});if(extractedInfo.length>0){const formattedHtml=extractedInfo.map(info=>`<li><a href="${info.href}" target="_blank">${info.ariaLabel}</a>: ${info.anchorText}</li>`).join('');const blob=new Blob([`<ul style="line-height: 2rem;">${formattedHtml}</ul>`],{type:'text/html'});const url=URL.createObjectURL(blob);const newWindow=window.open();newWindow.document.write(`<ul style="line-height: 2rem;">${formattedHtml}</ul>`);newWindow.document.close();}else{console.log('No unique URLs found for <a> elements within <div[jsname="s2gQvd"]> on this page.');}})();

How to use the bookmarklet

Once the bookmarklet is added, it should be readily available to use in your bookmarks bar. All you need to do from there is perform a search on Google for your desired term, generate the SGE, then click on the bookmarklet to extract the sources.

Gather SGE sources

A quick Google Search for ‘capital one venture x‘ returns a Generative AI panel. It is important the the SGE is generated for the bookmarklet to effectively extract everything. So make sure you click the ‘Generate’ button first.

Once generated we can then use the bookmarklet to extract a list of the sources that have been used to build the information in the panel.

A new window will open up a list of sources in sequential order that they appear in the SGE, with links pointing directly to the source. I included the ‘aria-label’ for each page as well.

Off the bat I can see that NerdWallet and CNN are being sourced for two separate articles. Great exposure for them, and something that would be interesting to dig into understanding what these articles are doing independently to earn such prominence.

Gather Videos

This bookmarklet will also gather the results from the Videos section:

Here’s what that looks like:

Gather Filters

This bookmarklet will also gather the filters that commonly appear around results with commercial intent. So if you’re planning an alligator party you can quickly collect a list of the filters on the sidebar and tabs.

Let me know how it helped

The Generative AI experiment is scheduled to end in December, but hopefully this will help those of you out there with testing in the meantime.

Let me know on the old socials if you found it useful! (@jamesmcnulty).