JSON-LD Viewer Chrome Extension

A Google Chrome Extension that displays a preview of the JSON-LD content of the active webpage.


Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

This Google Chrome Extension was formed through my overuse of checking the JSON-LD content of other websites as well as my own. I had to continuously open Developer Tools, switch to the Elements tab, search for application/ld+json and then copy out the JSON-LD content to review in a code editor.

This process grew frustrating with each iteration and I decided to make my life easier by creating this extension that allows you to view the JSON-LD content of a webpage in a popup without needing to open Developer Tools at all.

This has been both a fun learning process, as it's my first interaction with the Google Chrome Extensions API, and a great way to resolve a tedious, repetitive development process.

I hope this extension is as helpful for you as it has been for me.

(back to top)

Built With

• 
• 
• 

(back to top)

Getting Started

Follow these instructions to set up the extension either via the Chrome Web Store or built locally from your machine.

Install via Chrome Web Store

1. Open the extension in the Chrome Web Store here
2. Click "Add to Chrome"

Build it yourself

1. Clone the repo

   git clone https://github.com/kingsthwaiteJ/jsonld-viewer-chrome-extension.git
   

2. Install NPM packages

   npm install
   

3. Build the extension

   npm run production
   

4. Open Chrome and head to chrome://extensions/
5. Enable "Developer Mode"
6. Click "Load unpacked extension"
7. Select the "dist" folder

(back to top)

Usage

After this extension has been added to chrome, there is no further set up required. Whenever you open a new tab and click on the extension icon from your extensions bar, the popup will appear with the JSON-LD content of the active page.

You can then browse through the content using the embedded JSON viewer, or copy the JSON-LD content and review it in another application.

(back to top)

Roadmap

• View the JSON-LD of the active webpage cleanly ✅
• Copy the JSON-LD of the activer webpage ✅
• Add welcome page that opens on extension install
• Localisation + Internationalisation
• Links from JSON-LD content to JSON-LD definitions

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/featureName)
3. Commit your Changes (git commit -m 'Added a new feature')
4. Push to the Branch (git push origin feature/featureName)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Acknowledgments

Use this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!

• Font Awesome for providing their awesome icons
• json-viewer-js for creating and maintaining an awesome JSON viewer

(back to top)