Over a million developers have joined DZone.

Chrome Extension for Microdata

DZone's Guide to

Chrome Extension for Microdata

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

A while back I read an interesting blog post on Microdata. While I encourage you to read the article I just linked to, the basic gist of the feature is that it provides a way to create metadata for your HTML content. By embedding certain properties into your HTML you can create search engine/robot friendly data for your content. I'm not sure how much this is actually being used in the wild (see my resources links at the bottom), but it seemed like a pretty cool thing.

Back in November I posted a blog entry about how you could parse an HTML page for microdata in Chrome. (There is a much clearer API that is - unfortunately - not supported by Chrome yet.) I thought it might be nice to take that code and package it up into a proper extension. The idea being that you could add microdata to your HTML page and then use Chrome Dev Tools to see how a robot might read it.

Here is a screen shot to give you an idea of what I'm talking about. The site in question is Southern African Travel.

Here is another example where microdata is used for the reviews at CTS Wholesale Sunglasses.

For now, you have to manually open dev tools and select the tab, but I'm considering adding an icon next to the URL bar that flags when it sees microdata being used.

If you want to install this extension, simply go here. The icon is from The Noun Project, courtesy of Ed jones. (Original Icon)

Ok, if you don't care how Chrome Extensions are developed, you can stop reading now. What follows is some technical background on the extension and why I almost pulled out all my hair last night.

I've blogged before about the difficult in handling "communication" in Chrome Extensions before. By that I mean having part A talk to park B. Chrome Extensions have rules related to security and context that can make it extremely difficult to get things working. In this extension, the biggest issue was getting the content script (a JavaScript file which can run in the context of the current page) talking to my "devtools" script (where I'd be able to update the content of my panel). There is documentation at Google on this, but nothing that covers this specific use case. In fact, panels in general are pretty poorly documented. To be honest I don't know who to complain too and figure it wouldn't help much anyway. I'm hoping my extensions help out.

I ended up dropping the content script and instead making use of an evaluation technique shared with me by John J. Barton. It worked perfectly. If you want to read more about his workaround, checkout our discussion thread on the Google group.


Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}