.png?width=667&height=667&ext=.png)
A Google Chrome Extension for Utilizing Kentico Kontent Content in the Browser
Introduction
This past week I was able to attend the Kentico Roadshow conference in Chicago. I attended a few different sessions, but the morning session by [A]'s founder Cruce Saunders and afternoon session by Get Started's founder Marty Drill got me thinking quite a bit about Content Modeling and the beginning phases of a web project. This process is something that we do often at BizStream and it typically involves creating a set of wireframes that illustrate how content might look on a page or view.
In fact, the very first task I had to do back at the office the next day was to review a set of wireframes for a new project we are working on. And it dawned on me in that meeting, that wireframing could be thought of as another channel for content to be used. What if we could quickly grab the content from Kentico Cloud, since it existed already, and leverage it in these wireframes instead of Lorem Ipsum text. And thus, my idea was born to create a browser extension to easily grab content from Kentico Cloud and simply copy and paste it into our browser based wireframing tool.
The Chrome Extension: Kentico Cloud Content Explorer
You can find the extension over at the Chrome Web Store via the link for the Kentico Cloud Content Explorer.
The only item that you need to get the extension working is to have your Kentico Cloud Project ID. You can get that by clicking on API Keys in the Kentico Cloud menu. Once you have your project id handy, simply click the extensions toolbar icon in Chrome, and enter it into the first textbox, aptly named Enter your Project ID. Once there, tab off of the field and the Content Type dropdown should be auto populated with the Kentico Cloud Content Types that your project has.
If the dropdown is empty or you receive an error, please go check your project’s Delivery API status, and ensure that it is Active. This has bit me once before… darn checkboxes. If you see values in the dropdown field that means everything is working.
From there, as you choose a Content Type, the Content Type Items dropdown opens up with values and you can choose a single item of the specific Content Type. After choosing an item you can then choose an item’s element (field) that you want to pull the end content from.
Right now, I am only supporting text and rich text fields in the extension. To be honest I am not sure how you would want to use images or other element types like Modular content yet.
How You Can Use the Extension with your Kentico Cloud Content
Basically, the idea boils down to being able to use the real text content that we have in Kentico Cloud as the text that goes into a wireframe or mockup. For this example I am using our real world Kentico Cloud based project for www.CaseStream.net (if you want to know more about how we created this site check out our case study over at the Kentico Cloud site). The content setup can be seen in the screenshot below.
Now let's say that I want to take the About Us content and start wireframing up a visual design in a browser based tool like UXPin (because that is the one we actually use at BizStream). Typically, someone on my team, or myself, would fire up UXPin and start wireframing away to come up with something like the following:
If you are in the web development world you have most likely seen this type of image before. It is pretty much a standard representation of a page. This wireframe does give you a good idea that we need a paragragh of text, an image, a caption, and maybe a Call to Action button label. But what it does not do is really give you a real world example of how much text or how long of a headline we really have, what if the content wraps to two lines? There is really just to much to be left to the imagination or left to the developer to infer and make possibly bad assumptions.
Using my new Chrome plugin I can simply copy and paste the content into the UXPin element.
And after I finish copying in all the text, the finished wireframe looks like:
I think this is pretty cool. Now I don't have to guess if I have enough content ready for this page or not. Luckily the text fits perfectly. (To be honest, I massaged the text around a bit to fit the screenshot, but I think you get the idea. Would you rather have all the Latin text and guess work? Or would you rather take a Content First approach and re-use the content you may already have as soon as possible in the discovery or early design phase of your project.
Source Code for the Extension
The rest of this blog post is about the technical side of the extension. I have created this GitHub repo for the source code to the extension over on my personal GitHub account. Feel free to grab the source code and make it your own or contribute to the tool to make it better.
Luckily, creating a Google Chrome Extension is pretty easy. If you check out the src directory, you can see that there are basically two main files, popup.html and popup.js. All of the user interface of the popup modal is there, and all of the functionality is driven by the JavaScript.
I think the thing that I am most surprised / happy about is the absolute minimal amount of code and effort that it takes to work with the Delivery API. This solution does not have any fancy third party libraries or extra bloat. In fact the code does not even need to have jQuery as a dependency. It is good ol' low level 1990's JavaScript (my favorite kind, angular be damned).
I mean look at that! It's barely 25 lines of code and leverages the vulnerable XMLHttpRequest object that is the basic bedrock of any ajax call. I love it. The code simply puts together the project id, content type code name and content type item code name to hit the Deliver REST API. Honestly, the code of the extension itself was much easier to complete then it was to get the actual files packed up so that Chrome would load it.
A word to the wise, read the full documentation about manifest.json. It is super important to getting an extension to work the correct way. I also chose to use VS Code to create the whole thing which was a total pleasure. VC Code is one of the nicest editors to use for front end development that I have ever seen.
And yes, it comes with a Dark Theme by default... However, let's be honest this is definitely a prototype / proof of concept. Eventually I would love to clean it up even more, and add more functionality which is a great segway...
Feedback and Conclusion
I'd love to hear from any developer or digital marketer out there if they find this tool useful. If so, I have many more ideas on how to enhance it and bring more functionality to those that like leveraging their Kentico Cloud content. Please let me know in the comments below or shoot me a tweet.
I definitely enjoyed building my first Chrome Extension and connecting it to Kentico’s new Headless CMS product. Thanks!
