> For the complete documentation index, see [llms.txt](https://fredhopper.gitbook.io/product-discovery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fredhopper.gitbook.io/product-discovery/building-the-front-end-experience-with-xo/setting-up-the-chrome-extension.md).

# Setting up the Chrome extension

The Chrome extension helps understand and manage the recommendations rules. What rule retrieved those products? Why? What value has variable X or Y?

Perform the following two-step integration:

1. Call the API to display recommendations to your website as usual. Each API call has a unique ID, there:

<figure><img src="https://3916646904-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfLO8j00CcKdYax4GPUyE%2Fuploads%2FTXNvjnPbT3M8FKGeTFAC%2Fchrome-extension.png?alt=media&amp;token=97fd47bc-5890-4b98-bcce-7aede1592faf" alt=""><figcaption></figcaption></figure>

Store it so you can use it in the frontend.

2. Through JavaScript, push the unique ID into the dedicated Early Birds object that will be read by the extension:

```javascript
window.ebRecoIds = window.ebRecoIds || [];
window.ebRecoIds.push('#RECOID#')
```

\#RECOID# is to be replaced by the unique ID you got in the first step.

{% hint style="info" %}
If you have multiple recommendations areas on the same page, you will need to replicate those steps for each area.
{% endhint %}

The Chrome extension is now able to read what was displayed by Early Birds on the page.