How does Google Chrome display shopping carts on the start page?

You may have noticed the Chrome browser recently incorporated a feature on the start page that displays any active carts you have left behind at certain e-commerce websites:

Chromium (which powers both Chrome & Edge browsers) added support for this feature in the past year. But how does it work?

I wanted to get my shopping app to display here but to no avail. So here is what I learned.

First Clue

I started reading blog posts about the new feature, but most discussed the functionality without indicating how it works under the hood. The first clue I found was a link to this change request:

2897422: [Shopping] Add framework for shopping list metadata provider

This change introduces a framework for extracting meta tag information from the shopping cart webpage. The bookmarks UI page uses this meta tag to render the left-open shopping cart icons.

This find is enlightening and shows that when the browser navigates to a shopping cart webpage the Chromium engine will scrape the 'meta' tags from the HTML for relevant information like og:image, og:title, og:description, and product-specific information, including an image, which is how the cards in the Chrome cart can display specific information about the website and items in your cart.

But when I added the same meta tags to my shopping cart app running locally it wasn't showing up on Chrome's start page.

What gives?

Second Clue

The above change request indicates how Chromium can get detailed information about your cart. But how does it know to add something in the first place? For example, how can it tell that I'm on a checkout page instead of any other page?

The next clue came when digging through the above source code, and I noticed a few lines of code in the chrome/browser/browser_resources.grd file:

<if expr="not is_android">
  <!-- Chrome Cart -->
  <part file="cart/resources/cart_resources.grdp" />
</if>

So there is a cart directory that presumably has the logic for the actual cart itself. Not just the metadata information. Eureka!

https://chromium.googlesource.com/chromium/src/+/refs/heads/main/chrome/browser/cart

Digging through the above directory you can see the full implementation, including a local database that manages the cart items. After reading through the code for adding items to the database, I found my answer:

URL checkout page mapping

The URLs of the checkout pages at major e-commerce websites are hardcoded in the implementation - which aligns with the behavior I had been noticing:

• The cart is shown if you navigate to a full "review cart" page and not if you open a quick side-panel view that stays on the main product page.
• It doesn't work on websites outside this list, such as https://huckberry.com/

If this is hardcoded, it means any time I navigate to one of these URLs it should get tracked. To test this theory, I navigated directly to one of these URLs without going to the main page or adding any items to a cart. I chose Advanced Auto Parts: https://shop.advanceautoparts.com/web/OrderItemDisplay

And low and behold, it was added to the start page:

Interestingly Chromium seemed to think I had two items in my cart already even though I did not add anything to my cart. The Advanced Auto Parts website displayed recommended products on the checkout page that seem to have been captured by the meta tag scraper we looked at earlier, thinking they were items in a cart.

Final Thoughts

While the Chromium feature to display shopping carts on the start page is cool and exciting, it is still limited and a bit buggy.

For example, a new shopping cart must belong to the hard-coded list in Chromium's source code for it to appear. And for added carts, it does not always work 100% as you would expect.

Unfortunately, I could not get it to work for my sample shopping app. I hope in the future, there is a way for sites to register themselves as e-commerce websites and provide the checkout information to the browser programmatically.

Of course, if not done right, that could introduce many security vulnerabilities, which may be why they've opted for a hardcoded list of URLs they trust for now.

Nevertheless, it is a fantastic feature and interesting to see what the future holds.

The most exciting part is that this runs in the Chromium engine instead of a specific browser. This seems to indicate consideration for native cross-browser standardization on user experiences that will benefit end consumers of any browser.

The industry is heading toward more built-in and native browser support, which makes the jobs of frontend engineers much more exciting and ultimately provides better user experiences for consumers.