Background

I am a developer. Sometimes I need to view some JSON files in my browser but the JSON file is minified. I need a tool to format it for better readability.

What is the plan?

Make a Chrome extension to automatically format the JSON content in the browser.

How to start?

Installed these tools on your machine.

1. Node.js + NPM
2. Visual Studio Code  (or any IDE you prefer)

I will use  Typescript  +  Webpack  in the project.

What to do?

1. Create a new directory and open it with  Visual Studio Code .
2. Create a file named  manifest.json . This file describes your Chrome extension.
3. Put in the following contents:

{
    "name": "Simple JSON Viewer",
    "version": "1.0",
    "description": "Format the JSON in the browser",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "*://*/*"
            ],
            "js": [
                "dist/content.js"
            ]
        }
    ],
    "icons": {
        "128": "images/json.png"
    }
}

• name : Name of your Chrome extension.
• version : Version of your Chrome extension.
• description : Description for your Chrome extension.
• manifest_version : Version of the manifest file. Must be 2.
• content_scripts : Scripts to be injected to the website.
  • matches : Only apply to website with matching URLs.
  • js : Javascript file to be injected.
• icons : Icons for your Chrome extension

4. Create a file named  package.json . This file contains the Javascript dependencies required by your project.
5. Put a empty JSON object in it. We will use  npm  to add dependencies later.

{}

6. Create a file named  tsconfig.json . We will use Typescript to write our codes. This is the configuration file for Typescript compiler.
7. Put in the following contents:

{
    "compilerOptions": {
        "sourceMap": true,
        "target": "ES6",
        "outDir": "./dist"
    }
}

• sourceMap : True to generate source map so we can see the Typescript source code when debugging in Chrome.
• target : Tell the compiler to output ES6 compatible Javascript.
• outDir : Generate the output files in  ./dist  directory. The source code is located in  ./src  directory.

8. Open a terminal window in Visual Studio Code (Ctrl+`) and type this command to install the required dependencies for development work:

npm install --save-dev @types/chrome webpack webpack-cli typescript ts-loader

• @types/chrome : Typescript definition file to use Chrome APIs.
• webpack : Webpack.
• webpack-cli : CLI for Webpack.
• typescript : Typescript compiler.
• ts-loader : Webpack plugin to compile Typescript files.

9. Create a file named  webpack.config.js . This is the configuration file the Webpack compiler.
10. Put in the following contents:

const path = require('path');

module.exports = {
    entry: {
        background: './src/background.ts',
        popup: './src/popup.ts',
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
};

• entry : Entry points of the project. We generate a background script and a script file for popup.html here.
• output : The output configuration for the Webpack compiler. We generate the output in  ./dist  directory and name them according to the entry names.
• resolve : To support non-Javascript files.
• module : Processing rules for loader module. We enable the ts-loader module here to compile the Typescript files.

11. Create a file named  content.ts  in . /src  directory. The Webpack compiler will generate  content.js  in  ./dist  directory.
12. This file will be injected to the website when the website is loaded. We use it to detect whether or not the content is JSON. If yes then we will format it.
13. Put in the following contents:

function formatJson() {
    ...
}

try {
    formatJson();
} catch (err) {
    // ignore error
}

14. The logic will be put in formatJson function. Any error will be discarded.
15. In Chrome, non-HTML content will have the following DOM structure:

16. You can see that it's a single pre element in the body .
17. Add these codes to the formatJson function to detect it:

    let body = document.body;
    if (body.childNodes.length != 1)
        return undefined;

    let content = body.firstChild as HTMLElement;
    if (content.tagName != 'PRE' || content.childNodes.length != 1)
        return undefined;

    let child = content.firstChild;
    if (child.nodeType != Node.TEXT_NODE)
        return undefined;

18. Since this applies to all non-HTML content, which mean the content might not be a JSON.
19. Add these codes after the previous codes to do a simple checking on the JSON content:

    let json = child.nodeValue.trim();
    if (!(json.charAt(0) == '{' && json.charAt(json.length - 1) == '}') &&
        !(json.charAt(0) == '[' && json.charAt(json.length - 1) == ']'))
        return undefined;

20. If the content is surrounded by {} or [] , then it should be a JSON content.
21. Now we can format the code.
22. I'm using only browser Javascript functions to do the formatting, you can use any other libraries you want.
23. Add these codes after the previous codes to format the JSON content:

    let parsed = JSON.parse(child.nodeValue);
    let formatted = JSON.stringify(parsed, undefined, 2);

24. Add these codes after the previous codes to hide the old content and show formatted content in the browser:

    let output = document.createElement('pre');
    output.innerText = formatted;
    content.style.display = 'none';
    body.appendChild(output);

25. Open a terminal window in Visual Studio Code (Ctrl+`) and type this command to build the project:

npx webpack --build

26. You should see  ./dist  directory is created.

How to test it?

1. You can refer to this post to load the extension in Chrome with Developer mode.
2. Load a JSON file from the browser and you should see the JSON is nicely formatted ( example ).

3. You can see the sample on Chrome web store .
4. Source code is here: https://github.com/chimin/chrome-extension-jsonviewer