{"id":7595,"date":"2025-02-19T17:25:01","date_gmt":"2025-02-19T10:25:01","guid":{"rendered":"https:\/\/danielepais.com\/journal\/?p=7595"},"modified":"2025-02-19T17:25:01","modified_gmt":"2025-02-19T10:25:01","slug":"how-to-make-your-own-html-cleaner-chrome-extension","status":"publish","type":"post","link":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/","title":{"rendered":"How to Make your Own HTML Cleaner Chrome Extension"},"content":{"rendered":"<p style=\"text-align: center;\">Below is a step-by-step guide on how to build a simple HTML Cleaner <a href=\"https:\/\/danielepais.com\/journal\/build-your-own-chrome-extension-editorial-plan-prompt-generator-privacy-first-no-subscriptions\/\">Chrome<\/a> Extension.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/ywAAAAAAQABAAACAUwAOw==\" fifu-lazy=\"1\" fifu-data-sizes=\"auto\" fifu-data-srcset=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/51029cfe0603\/html-cleaner-chrome-extension.webp?p=7595&w=75&h=0&c=0 75w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/320c2c88902a\/html-cleaner-chrome-extension.webp?p=7595&w=100&h=0&c=0 100w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/9f53c0fff447\/html-cleaner-chrome-extension.webp?p=7595&w=150&h=0&c=0 150w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/17b63e4b20d0\/html-cleaner-chrome-extension.webp?p=7595&w=240&h=0&c=0 240w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/4904a4d2a5a9\/html-cleaner-chrome-extension.webp?p=7595&w=320&h=0&c=0 320w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/55d0a10b30cb\/html-cleaner-chrome-extension.webp?p=7595&w=500&h=0&c=0 500w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/aafd3d3f004a\/html-cleaner-chrome-extension.webp?p=7595&w=640&h=0&c=0 640w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/b3d87c270a8e\/html-cleaner-chrome-extension.webp?p=7595&w=800&h=0&c=0 800w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/53f104698de5\/html-cleaner-chrome-extension.webp?p=7595&w=1024&h=0&c=0 1024w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/0bff999141c0\/html-cleaner-chrome-extension.webp?p=7595&w=1280&h=0&c=0 1280w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/34f6d79db401\/html-cleaner-chrome-extension.webp?p=7595&w=1600&h=0&c=0 1600w\" class=\"aligncenter\" title=\"HTML Cleaner Chrome Extension\" fifu-data-src=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLUNsZWFuZXItQ2hyb21lLUV4dGVuc2lvbi5qcGc\/ebc79f70c2f4\/html-cleaner-chrome-extension.webp?p=7595\" alt=\"HTML Cleaner Chrome Extension\" width=\"850\" height=\"400\" \/><\/p>\n<p>In short, this is a Google Chrome extension that runs on your local machine and allows you to paste raw HTML, strip it of unwanted tags and attributes, and then copy the cleaned result. This tool is useful for quickly tidying up HTML that contains extra classes, inline styles, or script tags that you don\u2019t need.\u00a0<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ac820a60c7ab\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #18bc9c;color:#18bc9c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #18bc9c;color:#18bc9c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ac820a60c7ab\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Introduction\" >Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Folder_Structure\" >Folder Structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Create_an_HTML_Cleaner_Chrome_Extension_and_Run_it_Locally\" >Create an HTML Cleaner Chrome Extension and Run it Locally<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Step_1_Create_the_Manifest_File_manifestjson\" >Step 1: Create the Manifest File (manifest.json)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Step_2_Create_the_Popup_HTML_popuphtml\" >Step 2: Create the Popup HTML (popup.html)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Step_3_Create_the_Script_File_popupjs\" >Step 3: Create the Script File (popup.js)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Step_4_Load_the_Extension_in_Chrome\" >Step 4: Load the Extension in Chrome<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Step_5_Use_the_Extension\" >Step 5: Use the Extension<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Why_Run_a_Chrome_Extension_Locally\" >Why Run a Chrome Extension Locally?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Customization_Ideas\" >Customization Ideas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cleaning up HTML can be time-consuming if you manually remove every class, style, or script. Using a custom Chrome extension simplifies the process: just paste your raw HTML, click \u201cCLEAN,\u201d and then copy the cleaned output. This tutorial walks you through creating such an extension from scratch.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>A basic understanding of HTML, CSS, and JavaScript.<\/li>\n<li>Google Chrome installed on your machine.<\/li>\n<li>Icons (optional) if you want your extension to have a unique icon in the browser toolbar (16&#215;16, 48&#215;48, 128&#215;128 PNGs).<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Folder_Structure\"><\/span>Folder Structure<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Create a folder where you\u2019ll keep all extension-related files. For instance:<\/p>\n<p>html-cleaner-extension<br \/>\n\u251c\u2500\u2500 manifest.json<br \/>\n\u251c\u2500\u2500 popup.html<br \/>\n\u251c\u2500\u2500 popup.js<br \/>\n\u2514\u2500\u2500 icons (optional folder for icon images)<\/p>\n<p>You can name the folder anything you like (for example, \u201chtml-cleaner-extension\u201d).<\/p>\n<p>Alright, let&#8217;s get our hands dirty (with code).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Create_an_HTML_Cleaner_Chrome_Extension_and_Run_it_Locally\"><\/span>Create an HTML Cleaner Chrome Extension and Run it Locally<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Create_the_Manifest_File_manifestjson\"><\/span>Step 1: Create the Manifest File (manifest.json)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Chrome extensions require a manifest.json file to define their configuration. Here is an example of a Manifest V3 file that sets up the extension name, version, popup, and icons:<\/p>\n<pre id=\"code-snippet-source-68\" class=\"code-snippet-source\"><code class=\"language-php\">{\n  &quot;name&quot;: &quot;HTML Cleaner Extension&quot;,\n  &quot;version&quot;: &quot;1.0&quot;,\n  &quot;manifest_version&quot;: 3,\n  &quot;description&quot;: &quot;A simple tool to paste raw HTML, clean it, and copy the result.&quot;,\n  \n  &quot;icons&quot;: {\n    &quot;16&quot;: &quot;icons\/icon16.png&quot;,\n    &quot;48&quot;: &quot;icons\/icon48.png&quot;,\n    &quot;128&quot;: &quot;icons\/icon128.png&quot;\n  },\n  \n  &quot;action&quot;: {\n    &quot;default_popup&quot;: &quot;popup.html&quot;,\n    &quot;default_icon&quot;: {\n      &quot;16&quot;: &quot;icons\/icon16.png&quot;,\n      &quot;48&quot;: &quot;icons\/icon48.png&quot;,\n      &quot;128&quot;: &quot;icons\/icon128.png&quot;\n    }\n  }\n}\n<\/code><\/pre>\n<p><strong>Explanation:<\/strong><\/p>\n<ul>\n<li>manifest_version: Must be set to 3 for modern Chrome extensions.<\/li>\n<li>name, version, description: Basic metadata.<\/li>\n<li>icons: Optional but recommended. Points to icon files you\u2019d place in an icons subfolder.<\/li>\n<li>action: Defines what happens when the user clicks the extension\u2019s icon. default_popup is set to popup.html, meaning Chrome will display that file in a popup window. default_icon sets the icons that appear in the toolbar and extensions page.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Create_the_Popup_HTML_popuphtml\"><\/span>Step 2: Create the Popup HTML (popup.html)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This file defines the user interface of the extension\u2019s popup. It contains two textareas (one for input, one for output) and two buttons (one to clean, one to copy).<\/p>\n<pre id=\"code-snippet-source-69\" class=\"code-snippet-source\"><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n  &lt;title&gt;HTML Cleaner Extension&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      font-family: sans-serif;\n      margin: 0;\n      padding: 0.75rem;\n      width: 400px;\n      box-sizing: border-box;\n    }\n    h2 {\n      margin: 0 0 0.5rem;\n      font-size: 1.2rem;\n    }\n    textarea {\n      width: 100%;\n      height: 120px;\n      box-sizing: border-box;\n      margin-bottom: 0.5rem;\n    }\n    <a href=\"https:\/\/danielepais.com\/journal\/build-a-multi-language-floating-newsletter-button-as-a-wordpress-mu-plugin\/\">button<\/a> {\n      margin-right: 8px;\n      padding: 6px 12px;\n      font-size: 0.9rem;\n      cursor: pointer;\n    }\n    .row {\n      margin-bottom: 0.5rem;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h2&gt;HTML Cleaner&lt;\/h2&gt;\n  &lt;div class=&quot;row&quot;&gt;\n    &lt;textarea id=&quot;inputHTML&quot; placeholder=&quot;Paste your raw HTML here...&quot;&gt;&lt;\/textarea&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;row&quot;&gt;\n    &lt;button id=&quot;cleanBtn&quot;&gt;CLEAN&lt;\/button&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;row&quot;&gt;\n    &lt;textarea id=&quot;outputHTML&quot; placeholder=&quot;Cleaned HTML will appear here...&quot; readonly&gt;&lt;\/textarea&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;row&quot;&gt;\n    &lt;button id=&quot;copyBtn&quot;&gt;COPY CLEANED CODE&lt;\/button&gt;\n  &lt;\/div&gt;\n\n  &lt;script src=&quot;popup.js&quot;&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p><strong>Explanation:<\/strong><\/p>\n<ul>\n<li>Two textareas:\n<ul>\n<li>inputHTML: Where you paste raw HTML that needs cleaning.<\/li>\n<li>outputHTML: Displays the cleaned HTML (set to readonly so users can\u2019t accidentally modify it).<\/li>\n<\/ul>\n<\/li>\n<li>Two buttons:\n<ul>\n<li>cleanBtn: Executes the cleaning logic.<\/li>\n<li>copyBtn: Copies the cleaned result to the clipboard.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Create_the_Script_File_popupjs\"><\/span>Step 3: Create the Script File (popup.js)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This JavaScript file performs the cleaning of HTML and handles button clicks:<\/p>\n<pre id=\"code-snippet-source-70\" class=\"code-snippet-source\"><code class=\"language-php\">\/\/ List of allowed tags\nconst ALLOWED_TAGS = [\n  &#039;HTML&#039;, &#039;HEAD&#039;, &#039;BODY&#039;,\n  &#039;TITLE&#039;, &#039;META&#039;,  \/\/ Optional, if you want minimal head info\n  &#039;P&#039;, &#039;BR&#039;, &#039;HR&#039;,\n  &#039;STRONG&#039;, &#039;EM&#039;, &#039;B&#039;, &#039;I&#039;, &#039;U&#039;, &#039;SMALL&#039;, &#039;SPAN&#039;,\n  &#039;UL&#039;, &#039;OL&#039;, &#039;LI&#039;,\n  &#039;TABLE&#039;, &#039;TR&#039;, &#039;TD&#039;, &#039;TH&#039;,\n  &#039;A&#039;, &#039;IMG&#039;,\n  &#039;H1&#039;, &#039;H2&#039;, &#039;H3&#039;, &#039;H4&#039;, &#039;H5&#039;, &#039;H6&#039;\n];\n\n\/\/ Allowed attributes for particular tags\nconst ALLOWED_ATTRIBUTES = {\n  &#039;A&#039;: [&#039;href&#039;, &#039;title&#039;],\n  &#039;IMG&#039;: [&#039;src&#039;, &#039;alt&#039;, &#039;title&#039;, &#039;width&#039;, &#039;height&#039;]\n};\n\n\/\/ Tags that you want to remove entirely, including their content\nconst REMOVE_TAGS = [&#039;SCRIPT&#039;, &#039;STYLE&#039;, &#039;IFRAME&#039;, &#039;LINK&#039;, &#039;META&#039;, &#039;NOSCRIPT&#039;, &#039;EMBED&#039;, &#039;OBJECT&#039;];\n\n\/**\n * Cleans the given HTML string.\n *\/\nfunction cleanHTML(rawHTML) {\n  \/\/ Parse the HTML string into a DOM\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(rawHTML, &#039;text\/html&#039;);\n\n  \/\/ 1. Remove specific tags (script, style, etc.)\n  REMOVE_TAGS.forEach(tag =&gt; {\n    doc.querySelectorAll(tag).forEach(el =&gt; el.remove());\n  });\n\n  \/\/ 2. Remove all comment nodes\n  removeComments(doc);\n\n  \/\/ 3. Unwrap disallowed tags (keep content, remove tag)\n  unwrapDisallowedTags(doc);\n\n  \/\/ 4. Strip attributes from allowed tags, removing everything else\n  stripAttributes(doc);\n\n  \/\/ Return the cleaned HTML\n  return doc.documentElement.outerHTML;\n}\n\n\/**\n * Removes all HTML comments from the document.\n *\/\nfunction removeComments(doc) {\n  const walker = doc.createTreeWalker(doc, NodeFilter.SHOW_COMMENT, null);\n  const toRemove = [];\n  let current;\n  while ((current = walker.nextNode())) {\n    toRemove.push(current);\n  }\n  toRemove.forEach(node =&gt; node.remove());\n}\n\n\/**\n * For elements not in ALLOWED_TAGS, remove the tag but keep its children.\n *\/\nfunction unwrapDisallowedTags(doc) {\n  let changed = true;\n  while (changed) {\n    changed = false;\n    const allElements = doc.querySelectorAll(&#039;*&#039;);\n    allElements.forEach(el =&gt; {\n      if (!ALLOWED_TAGS.includes(el.tagName.toUpperCase())) {\n        changed = true;\n        while (el.firstChild) {\n          el.parentNode.insertBefore(el.firstChild, el);\n        }\n        el.remove();\n      }\n    });\n  }\n}\n\n\/**\n * Removes any attributes not explicitly allowed for each tag.\n *\/\nfunction stripAttributes(doc) {\n  const allElements = doc.querySelectorAll(&#039;*&#039;);\n  allElements.forEach(el =&gt; {\n    const tagName = el.tagName.toUpperCase();\n    const allowed = ALLOWED_ATTRIBUTES[tagName] || [];\n    const removeList = [];\n    for (let i = 0; i &lt; el.attributes.length; i++) {\n      const attrName = el.attributes[i].name;\n      if (!allowed.includes(attrName)) {\n        removeList.push(attrName);\n      }\n    }\n    removeList.forEach(attr =&gt; el.removeAttribute(attr));\n  });\n}\n\n\/**\n * When user clicks CLEAN:\n * 1. Grab raw HTML from input box.\n * 2. Clean it.\n * 3. Display cleaned result in output box.\n *\/\ndocument.getElementById(&#039;cleanBtn&#039;).addEventListener(&#039;click&#039;, () =&gt; {\n  const rawHTML = document.getElementById(&#039;inputHTML&#039;).value;\n  const cleaned = cleanHTML(rawHTML);\n  document.getElementById(&#039;outputHTML&#039;).value = cleaned;\n});\n\n\/**\n * When user clicks COPY:\n * 1. Select the text in the output box.\n * 2. Copy it to the clipboard.\n *\/\ndocument.getElementById(&#039;copyBtn&#039;).addEventListener(&#039;click&#039;, () =&gt; {\n  const outputField = document.getElementById(&#039;outputHTML&#039;);\n  outputField.select();\n  outputField.setSelectionRange(0, 99999); \/\/ for <a href=\"https:\/\/danielepais.com\/journal\/devlop-app-build-fullstack-mobile-apps-with-ai\/\">mobile<\/a> devices\n  document.execCommand(&#039;copy&#039;);\n  alert(&#039;Cleaned HTML copied to clipboard!&#039;);\n});\n<\/code><\/pre>\n<p><strong>Explanation of Key Parts:<\/strong><\/p>\n<ul>\n<li>ALLOWED_TAGS: Lists the tags you want to keep in the final output.<\/li>\n<li>ALLOWED_ATTRIBUTES: Defines which attributes are permitted on specific tags. For example, only href and title are kept for &lt;a&gt; tags.<\/li>\n<li>REMOVE_TAGS: Defines tags you want to fully remove, including their child content (like &lt;script&gt; or &lt;style&gt;).<\/li>\n<li>unwrapDisallowedTags: Any element not in ALLOWED_TAGS is removed, but its child text or elements are preserved.<\/li>\n<li>stripAttributes: Removes all attributes except those listed in ALLOWED_ATTRIBUTES.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Load_the_Extension_in_Chrome\"><\/span>Step 4: Load the Extension in Chrome<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Open Chrome and go to chrome:\/\/extensions\/.<\/li>\n<li>Enable Developer Mode by flipping the toggle in the top right corner.<\/li>\n<li>Click the \u201cLoad Unpacked\u201d button.<\/li>\n<li>Navigate to your html-cleaner-extension folder and select it.<\/li>\n<li>The extension should now appear in your list of installed extensions.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Use_the_Extension\"><\/span>Step 5: Use the Extension<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>Pin the extension if desired, so its icon is visible in your toolbar.<\/li>\n<li>Click on the extension icon to open the popup window.<\/li>\n<li>Paste your raw HTML into the top box.<\/li>\n<li>Click the \u201cCLEAN\u201d button. Unwanted tags, attributes, and comments are removed.<\/li>\n<li>Check your cleaned HTML in the output box.<\/li>\n<li>Click \u201cCOPY CLEANED CODE\u201d to copy the cleaned version to your clipboard.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Why_Run_a_Chrome_Extension_Locally\"><\/span>Why Run a Chrome Extension Locally?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Running the extension locally (as opposed to installing from the Chrome Web Store) comes with several advantages:<\/p>\n<ol>\n<li>\n<p><strong>Offline Usage<\/strong><\/p>\n<ul>\n<li>You can continue using the tool even without an internet connection, since all code is stored locally on your machine.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong><a href=\"https:\/\/danielepais.com\/journal\/understanding-the-role-of-back-end-development-in-web-applications\/\">Security<\/a><\/strong><\/p>\n<ul>\n<li>You fully control and can inspect the code yourself. There\u2019s no need to trust a third-party developer or worry about malicious updates, because it never touches any external servers.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Ease of Updates<\/strong><\/p>\n<ul>\n<li>You can quickly modify any part of the code (e.g., adding new allowed tags or attributes) without waiting for a store approval process. Simply edit the files, reload the extension, and test your changes right away.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Faster Debugging<\/strong><\/p>\n<ul>\n<li>Since you own all the code and resources, you can open the browser\u2019s DevTools for the extension\u2019s popup, debug any issues on the fly, and immediately see the results.<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>Privacy<\/strong><\/p>\n<ul>\n<li>Your pasted HTML never leaves your local computer. This is especially important if you work with sensitive or proprietary content.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Locally running your Chrome extension gives you maximum flexibility and peace of mind. You control updates, features, and security, all without needing to rely on the public Chrome Web Store.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Customization_Ideas\"><\/span>Customization Ideas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>If you need to allow certain new tags or attributes, add them to ALLOWED_TAGS or ALLOWED_ATTRIBUTES.<\/li>\n<li>If you want to keep certain tags instead of removing them entirely (for instance, &lt;iframe&gt; content), either remove it from REMOVE_TAGS or add it to ALLOWED_TAGS.<\/li>\n<li>If you prefer to remove disallowed tags and their children entirely (rather than preserving inner text), you can replace the unwrapping logic with a simple el.remove().<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/ywAAAAAAQABAAACAUwAOw==\" fifu-lazy=\"1\" fifu-data-sizes=\"auto\" fifu-data-srcset=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/da96afce9d93\/html-cleaner-chrome-extension.webp?p=7595&w=75&h=0&c=0 75w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/9b796176b6dc\/html-cleaner-chrome-extension.webp?p=7595&w=100&h=0&c=0 100w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/010b87a18907\/html-cleaner-chrome-extension.webp?p=7595&w=150&h=0&c=0 150w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/d89ce9d8275d\/html-cleaner-chrome-extension.webp?p=7595&w=240&h=0&c=0 240w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/ce2177ddd02f\/html-cleaner-chrome-extension.webp?p=7595&w=320&h=0&c=0 320w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/8558e2e60c1e\/html-cleaner-chrome-extension.webp?p=7595&w=500&h=0&c=0 500w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/dc2660b5c2c9\/html-cleaner-chrome-extension.webp?p=7595&w=640&h=0&c=0 640w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/9111a595400f\/html-cleaner-chrome-extension.webp?p=7595&w=800&h=0&c=0 800w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/5a97e37637fa\/html-cleaner-chrome-extension.webp?p=7595&w=1024&h=0&c=0 1024w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/5ac10c6ef9b0\/html-cleaner-chrome-extension.webp?p=7595&w=1280&h=0&c=0 1280w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/87cf10b6b2a3\/html-cleaner-chrome-extension.webp?p=7595&w=1600&h=0&c=0 1600w\" class=\"aligncenter\" title=\"HTML cleaner chrome extension UI\" fifu-data-src=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wMi9IVE1MLWNsZWFuZXItY2hyb21lLWV4dGVuc2lvbi5wbmc\/cfaa8eb49ae5\/html-cleaner-chrome-extension.webp?p=7595\" alt=\"HTML cleaner chrome extension UI\" width=\"638\" height=\"632\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>By following these steps, you create a handy Chrome extension that cleans up pasted HTML in seconds. This saves you the hassle of manually stripping out classes, event handlers, or other extraneous elements from HTML snippets. With minimal code adjustments, you can customize the set of allowed tags and attributes for your particular use case.<\/p>\n<p>Feel free to share this tutorial so that others looking to simplify or sanitize HTML can benefit from a quick and convenient tool right inside Chrome. Enjoy cleaner code with just a couple of clicks!<\/p>\n<div class=\"boxlink\">GET YOUR FREE COPY: <a title=\"Download the FREE DIY Chrome Extension to Instantly Clean HTML Code \ud83e\uddfc\" href=\"https:\/\/danielepais.com\/journal\/free-downloads\" target=\"_blank\" rel=\"noopener\" data-wpel-link=\"internal\">Download the FREE DIY Chrome Extension to Instantly Clean HTML Code \ud83e\uddfc<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..<\/p>\n","protected":false},"author":1,"featured_media":7611,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[1128,949,561],"tags":[],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Daniele Pais\"\/>\n\t<meta name=\"google-site-verification\" content=\"googleb91c9505ed997b99\" \/>\n\t<meta name=\"msvalidate.01\" content=\"AD1C96C338E051848BE08C67378B20CA\" \/>\n\t<meta name=\"keywords\" content=\"content creation,free downloads,web development\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Daniele Pais Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How to Make your Own HTML Cleaner Chrome Extension |\" \/>\n\t\t<meta property=\"og:description\" content=\"Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/02\/HTML-Cleaner-Chrome-Extension.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/02\/HTML-Cleaner-Chrome-Extension.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2025-02-19T10:25:01+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2025-02-19T10:25:01+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@daniele_pais\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How to Make your Own HTML Cleaner Chrome Extension |\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2017\/10\/daniele-pais-digital-design.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#article\",\"name\":\"How to Make your Own HTML Cleaner Chrome Extension |\",\"headline\":\"How to Make your Own HTML Cleaner Chrome Extension\",\"author\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/HTML-Cleaner-Chrome-Extension.jpg\",\"width\":850,\"height\":400,\"caption\":\"HTML Cleaner Chrome Extension\"},\"datePublished\":\"2025-02-19T17:25:01+07:00\",\"dateModified\":\"2025-02-19T17:25:01+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#webpage\"},\"articleSection\":\"Content Creation, Free Downloads, Web Development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"name\":\"Web\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"position\":2,\"name\":\"Web\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"name\":\"Web Development\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"position\":3,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#listItem\",\"name\":\"How to Make your Own HTML Cleaner Chrome Extension\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"name\":\"Web\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#listItem\",\"position\":4,\"name\":\"How to Make your Own HTML Cleaner Chrome Extension\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"name\":\"Web Development\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\",\"name\":\"Daniele Pais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniele Pais\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/\",\"name\":\"Daniele Pais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniele Pais\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#webpage\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/\",\"name\":\"How to Make your Own HTML Cleaner Chrome Extension |\",\"description\":\"Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/HTML-Cleaner-Chrome-Extension.jpg\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#mainImage\",\"width\":850,\"height\":400,\"caption\":\"HTML Cleaner Chrome Extension\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-make-your-own-html-cleaner-chrome-extension\\\/#mainImage\"},\"datePublished\":\"2025-02-19T17:25:01+07:00\",\"dateModified\":\"2025-02-19T17:25:01+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#website\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/\",\"name\":\"Phuket Web Design\",\"description\":\"Digital Print\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How to Make your Own HTML Cleaner Chrome Extension |","description":"Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..","canonical_url":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/","robots":"max-image-preview:large","keywords":"content creation,free downloads,web development","webmasterTools":{"google-site-verification":"googleb91c9505ed997b99","msvalidate.01":"AD1C96C338E051848BE08C67378B20CA","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#article","name":"How to Make your Own HTML Cleaner Chrome Extension |","headline":"How to Make your Own HTML Cleaner Chrome Extension","author":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"publisher":{"@id":"https:\/\/danielepais.com\/journal\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/02\/HTML-Cleaner-Chrome-Extension.jpg","width":850,"height":400,"caption":"HTML Cleaner Chrome Extension"},"datePublished":"2025-02-19T17:25:01+07:00","dateModified":"2025-02-19T17:25:01+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#webpage"},"isPartOf":{"@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#webpage"},"articleSection":"Content Creation, Free Downloads, Web Development"},{"@type":"BreadcrumbList","@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal#listItem","position":1,"name":"Home","item":"https:\/\/danielepais.com\/journal","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","name":"Web"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","position":2,"name":"Web","item":"https:\/\/danielepais.com\/journal\/category\/web\/","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","name":"Web Development"},"previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","position":3,"name":"Web Development","item":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#listItem","name":"How to Make your Own HTML Cleaner Chrome Extension"},"previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","name":"Web"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#listItem","position":4,"name":"How to Make your Own HTML Cleaner Chrome Extension","previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","name":"Web Development"}}]},{"@type":"Person","@id":"https:\/\/danielepais.com\/journal\/#person","name":"Daniele Pais","image":{"@type":"ImageObject","@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniele Pais"}},{"@type":"Person","@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author","url":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/","name":"Daniele Pais","image":{"@type":"ImageObject","@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniele Pais"}},{"@type":"WebPage","@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#webpage","url":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/","name":"How to Make your Own HTML Cleaner Chrome Extension |","description":"Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/danielepais.com\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#breadcrumblist"},"author":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"creator":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/02\/HTML-Cleaner-Chrome-Extension.jpg","@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#mainImage","width":850,"height":400,"caption":"HTML Cleaner Chrome Extension"},"primaryImageOfPage":{"@id":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/#mainImage"},"datePublished":"2025-02-19T17:25:01+07:00","dateModified":"2025-02-19T17:25:01+07:00"},{"@type":"WebSite","@id":"https:\/\/danielepais.com\/journal\/#website","url":"https:\/\/danielepais.com\/journal\/","name":"Phuket Web Design","description":"Digital Print","inLanguage":"en-US","publisher":{"@id":"https:\/\/danielepais.com\/journal\/#person"}}]},"og:locale":"en_US","og:site_name":"Daniele Pais Blog","og:type":"article","og:title":"How to Make your Own HTML Cleaner Chrome Extension |","og:description":"Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..","og:url":"https:\/\/danielepais.com\/journal\/how-to-make-your-own-html-cleaner-chrome-extension\/","og:image":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/02\/HTML-Cleaner-Chrome-Extension.jpg","og:image:secure_url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/02\/HTML-Cleaner-Chrome-Extension.jpg","og:image:width":850,"og:image:height":400,"article:published_time":"2025-02-19T10:25:01+00:00","article:modified_time":"2025-02-19T10:25:01+00:00","twitter:card":"summary","twitter:site":"@daniele_pais","twitter:title":"How to Make your Own HTML Cleaner Chrome Extension |","twitter:description":"Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. In short, a Google Chrome extension that runs on your local machine..","twitter:image":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2017\/10\/daniele-pais-digital-design.png"},"aioseo_meta_data":{"post_id":"7595","title":"#post_title |","description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"HTML Cleaner Chrome Extension","score":72,"analysis":{"keyphraseInTitle":{"score":9,"maxScore":9,"error":0},"keyphraseInDescription":{"score":9,"maxScore":9,"error":0},"keyphraseLength":{"score":9,"maxScore":9,"error":0,"length":4},"keyphraseInURL":{"score":1,"maxScore":5,"error":1},"keyphraseInIntroduction":{"score":9,"maxScore":9,"error":0},"keyphraseInSubHeadings":{"score":3,"maxScore":9,"error":1},"keyphraseInImageAlt":{"score":9,"maxScore":9,"error":0},"keywordDensity":{"score":0,"type":"low","maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"created":"2025-02-16 12:46:53","updated":"2025-06-11 19:15:07","ai":null,"seo_analyzer_scan_date":null},"fifu_redirection_url":"https:\/\/battlemotors.com\/blogs\/news\/swana-at-wastecon-with-battle-motors","_links":{"self":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts\/7595"}],"collection":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/comments?post=7595"}],"version-history":[{"count":0,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts\/7595\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/media\/7611"}],"wp:attachment":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/media?parent=7595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/categories?post=7595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/tags?post=7595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}