Contentful Sidekick

Overview

The Contentful Sidekick is a Chrome extension that assists end users in finding and editing content quickly on highly nested pages. It is specifically designed for websites that use multiple pieces of content to compose a page. By adding a sidebar with navigation and edit links to each content item, the Sidekick simplifies the content editing process.

Features

• Improved Content Navigation: The Sidekick adds a sidebar that allows users to easily navigate through the different content items on a page.
• Quick Editing: Edit links are provided for each content item, enabling users to quickly make changes without searching for the relevant section.
• HTML Attribute Enablement: To use the Sidekick, users need to add specific HTML attributes to the elements they want to enable editing for.

Installation

To install the Contentful Sidekick, follow these steps:

1. Download the released version of the extension from the Chrome Web Store.
2. Before using the Sidekick, ensure it is enabled by adding HTML attributes to your page.
3. Add the necessary data attribute to the element you want to enable editing for. Typically, this is placed on an element that corresponds to a different content model.
4. Add the required tags to your top meta tags and HTML element. It is recommended to do this on a staging or preview environment.
   • For purely visual grouping items, you can omit the tags, but for best future functionality, it is advised to use all the tags.
5. If you are using a React app, you can use the LastRev Sidekick Utility to quickly add these tags.
6. After enabling the Sidekick and adding the necessary tags, your page will display a sidebar with the navigation and edit links for each content item.

For development purposes, follow these additional steps:

1. Clone the repository.
2. Run yarn install to install the required dependencies.
3. Run yarn dev to create a watch process that will rebuild all files to /dist/chrome whenever a file is changed.
4. Open chrome://extensions/ in Chrome.
5. Turn on Development Mode in the upper right corner.
6. Choose “Load Unpacked” and navigate to the /dist/chrome folder in the project directory.
7. The extension should now be visible in your browser.

Please note that even though the webpack automatically rebuilds the files, you need to refresh the extension in chrome://extensions/ to load the changes.

Summary

The Contentful Sidekick is a helpful Chrome extension for users of Contentful who need to easily find and edit content on complex and nested pages. By adding a sidebar with navigation and edit links, the Sidekick streamlines the content editing process. The installation process requires enabling the Sidekick by adding specific HTML attributes to the desired elements. For developers, a development environment setup is provided, including instructions for loading the extension into Chrome and making changes to the extension files. Overall, the Contentful Sidekick is a useful tool for enhancing the content editing experience.