Add a popup to accept json string and pretty print it.

Prompt: > change the chrome extension to accept json in a text box and then pretty print it ``` This code is similar to the previous example, but it's modified to work as a Chrome extension. The HTML is in popup.html, and the JavaScript is in content.js. The manifest file is also included. The JavaScript code works the same way as before, but it's now embedded in the content.js file, which is loaded into the extension popup when it's opened. The manifest file specifies the extension's name, version, description, and permissions. It also sets the default title and popup for the extension's browser action. ```
vrajat · May 1, 2023 · 288dbba · 288dbba
1 parent b3d71ef
commit 288dbba
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 26 deletions.
diff --git a/extension/content.js b/extension/content.js
@@ -1,21 +1,22 @@
 // content.js
 
-// Get all the elements on the page
-let elements = document.getElementsByTagName("*");
+// Get the input and output elements
+let inputElement = document.getElementById("json-input");
+let outputElement = document.getElementById("output");
 
-// Iterate through the elements and modify their text
-for (let i = 0; i < elements.length; i++) {
-  let element = elements[i];
+// Get the pretty print button and add a click event listener
+let prettyPrintButton = document.getElementById("pretty-print-button");
+prettyPrintButton.addEventListener("click", function() {
+  // Get the JSON input from the text box
+  let jsonString = inputElement.value;
 
-  // Only modify elements with text content
-  if (element.innerText.length > 0) {
-    let text = element.innerText;
+  // Parse the JSON
+  let jsonObject = JSON.parse(jsonString);
 
-    // Modify the text
-    text = text.toUpperCase();
+  // Pretty print the JSON
+  let prettyJsonString = JSON.stringify(jsonObject, null, 2);
 
-    // Write the modified text back to the element
-    element.innerText = text;
-  }
-}
+  // Write the pretty printed JSON to the output element
+  outputElement.innerText = prettyJsonString;
+});
 
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,16 +1,12 @@
 {
-  "manifest_version": 2,
-  "name": "My Text Modifier Extension",
+  "name": "JSON Pretty Print",
   "version": "1.0",
-  "description": "A Chrome extension that modifies text on web pages.",
-  "permissions": [
-    "activeTab"
-  ],
-  "content_scripts": [
-    {
-      "matches": ["*://*/*"],
-      "js": ["content.js"]
-    }
-  ]
+  "manifest_version": 2,
+  "description": "This extension allows you to pretty print JSON.",
+  "permissions": ["activeTab"],
+  "browser_action": {
+    "default_title": "JSON Pretty Print",
+    "default_popup": "popup.html"
+  }
 }
 
diff --git a/extension/popup.html b/extension/popup.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>JSON Pretty Print</title>
+  </head>
+  <body>
+    <h1>JSON Pretty Print</h1>
+    <form>
+      <label for="json-input">JSON:</label>
+      <textarea id="json-input" name="json-input"></textarea>
+      <button type="button" id="pretty-print-button">Pretty Print</button>
+    </form>
+    <div id="output"></div>
+    <script src="content.js"></script>
+  </body>
+</html>
+