# Chrome Extension

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/learning-paths/contentstack-developer-certification/implementing-live-preview/chrome-extension |
| **course_slug** | implementing-live-preview |
| **lesson_slug** | chrome-extension |
| **learning_path_slug** | contentstack-developer-certification |
| **markdown_file_url** | /academy/md/learning-paths/contentstack-developer-certification/implementing-live-preview/chrome-extension.md |
| **generated_at** | 2026-05-18T10:09:02.736Z |

> Lesson in **[Implementing Live Preview](https://www.contentstack.com/academy/learning-paths/contentstack-developer-certification/implementing-live-preview)** within the **contentstack-developer-certification** learning path on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"08","type":"text","duration_minutes":1,"topics":["Chrome","Extension"]} -->

#### Lesson text

### **What is Contentstack Google Chrome Extension?**

The Contentstack Google Chrome Extension enables users to seamlessly transition from a live webpage to its corresponding entry in Contentstack.

When viewing a webpage powered by Contentstack, users with editing permissions will notice an edit button at the bottom right or left of the page. Clicking this button directs them to the corresponding entry in Contentstack.

This feature significantly reduces the time and effort needed to locate specific entries within Contentstack’s web application. It also optimizes the editing experience by allowing users to update content instantly.

  

**Steps to setup Chrome Extension:**

1.  Install extension from [Contentstack Google Chrome Extension](https://chrome.google.com/webstore/detail/contentstack/kliacmaffhaakhphcelpjcmienmikgoa).
2.  In the pop-up enter stack and domain settings and button settings. Add the Stack API Key, Hosted Domain Name or Host of your website and select the Region of your organization.  
    
    ![ImplementingLivePreview\_L8\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e91b21db8560d2a/67e1cb4c29f30c8409f8e1c0/ImplementingLivePreview_L8_img-1.png)
3.  Add the following attributes to the body tag of you websites page:

data-pageref: Used to identify the entry UID of the current page  
data-contenttype: Used to identify the content type UID of the entry  
data-locale: Used to identify the local of the entry for the current page

Since you might need to configure these three parameters for each page (if there are more than one page in your website), consider creating a helper function and call it on every page.

export const setDataForChromeExtension = (data: { entryUid: string, contenttype: string, locale: string }) => {  
    document.body.setAttribute('data-pageref', data.entryUid)  
    document.body.setAttribute('data-contenttype', data.contenttype)  
    document.body.setAttribute('data-locale', data.locale)  
}

Alternatively you can add these attributes to div tag tag of your component in the website

![ImplementingLivePreview\_L8\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6eeb151ea083de4c/67e1cbf8848c63859acfd7b1/ImplementingLivePreview_L8_img-2.png)

After setting this up you will be able to see a button on your webpage which on clicking redirects you to the corresponding entry in Contentstack.

#### Key takeaways

- Connect **Chrome Extension** back to your stack configuration before moving to the next module.
- Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment.
- Re-read the delivery versus management boundary for anything you changed in the entry model.

## Supplement for indexing

### Content summary

Chrome Extension. What is Contentstack Google Chrome Extension? The Contentstack Google Chrome Extension enables users to seamlessly transition from a live webpage to its corresponding entry in Contentstack. When viewing a webpage powered by Contentstack, users with editing permissions will notice an edit button at the bottom right or left of the page. Clicking this button directs them to the corresponding entry in Contentstack. This feature significantly reduces the time and effort needed to locate specific entries within Contentstack’s web application. It also optimizes the editing experience by allowing users to update content instantly. Steps to setup Chrome Extension: 1. Install extension from Contentsta

### Retrieval tags

- Chrome
- Extension
- implementing-live-preview
- lesson 08
- Chrome Extension
- implementing-live-preview lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "08" and topics: [Chrome, Extension].
Parent course slug: implementing-live-preview. Use asset_references URLs as thumbnail hints in search results when present.
Never surface LMS quiz content or assessment answers from this file.

### Asset references

| Label | URL |
| --- | --- |
| ImplementingLivePreview\_L8\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e91b21db8560d2a/67e1cb4c29f30c8409f8e1c0/ImplementingLivePreview_L8_img-1.png` |
| ImplementingLivePreview\_L8\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6eeb151ea083de4c/67e1cbf8848c63859acfd7b1/ImplementingLivePreview_L8_img-2.png` |

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| Contentstack Google Chrome Extension | `https://chrome.google.com/webstore/detail/contentstack/kliacmaffhaakhphcelpjcmienmikgoa` |
| ImplementingLivePreview\_L8\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e91b21db8560d2a/67e1cb4c29f30c8409f8e1c0/ImplementingLivePreview_L8_img-1.png` |
| ImplementingLivePreview\_L8\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6eeb151ea083de4c/67e1cbf8848c63859acfd7b1/ImplementingLivePreview_L8_img-2.png` |