Content cracker Extension Chrome

Extension for displaying content identification text and links in your pages to relevant CMS content for easily access and edit.

Latest Version

Version

1.0

Update

September 1, 2022

Size

30.77KiB

Developer

Content cracker Extension

The extension requires your page to include data tag attributes populated with your content Ids like \"page.blt6107b41cf1a5b5ac\". Default data attribute is \"data-content-id\" or it could be change in options. It is then used to highlight the areas/blocks of the page and display link to relevant CMS page

To allow for correct url to be provided all required settings in extension options need to be entered.

Required settings:

Domain name - ex: app.contentstack.com
CMS API key - ex: blt21c9e6762a0fdd02
Locale - ex: en-gb

See how your data is used to build the url:
https://${domain-name}/#!/stack/${cms-api-key}/content-type/${contentType*}/${locale}/entry/${contentId}*/edit

*contentType is taken from a data tag attribute including Contentstack id in which the first part indicates the type for example: “pod” in “pod.blt6107b41cf1a5b5ac”.
*contentId is taken from the other part of the id for example: “blt6107b41cf1a5b5ac” in “pod.blt6107b41cf1a5b5ac”.

You can also select your preferred colour of highlight which may help in case default colour makes highlight not visible enough.

Data attributes

Include data attributes in your html wherever it suits your page design with values of CMS content id.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Content cracker", "description": "Extension for displaying content identification text and links in your pages to relevant CMS content for easily access and edit.", "version": "1.0", "manifest_version": 3, "background": { "service_worker": "background.js" }, "permissions": ["storage", "activeTab", "scripting"], "action": { "default_popup": "popup.html", "default_icon": { "16": "images/icon-16.png", "32": "images/icon-32.png", "48": "images/icon-48.png", "128": "images/icon-128.png" } }, "icons": { "16": "images/icon-16.png", "32": "images/icon-32.png", "48": "images/icon-48.png", "128": "images/icon-128.png" }, "options_page": "options.html" }