Below is a step-by-step guide on how to build a simple HTML Cleaner Chrome Extension. 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’t need. Introduction 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 “CLEAN,” and then copy the cleaned output. This tutorial walks you through creating such an extension from scratch. Prerequisites A basic understanding of HTML, CSS, and JavaScript. Google Chrome installed on your machine. Icons (optional) if you want your extension to have a unique icon in the browser toolbar (16x16, 48x48, 128x128 PNGs). Folder Structure Create a folder where you’ll keep all extension-related files. For instance: html-cleaner-extension ├── manifest.json ├── popup.html ├── popup.js └── icons (optional folder for icon images) You can name the folder anything you like (for example, “html-cleaner-extension”). Alright, let's get our hands dirty (with code). Create an HTML Cleaner Chrome Extension and Run it Locally Step 1: Create the Manifest File (manifest.json) 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: [code_snippet_source id=68] Explanation: manifest_version: Must be set to 3 for modern Chrome extensions. name, version, description: Basic metadata. icons: Optional but recommended. Points to icon files you’d place in an icons subfolder. action: Defines what happens when the user clicks the extension’s 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. Step 2: Create the Popup HTML (popup.html) This file defines the user interface of the extension’s popup. It contains two textareas (one for input, one for output) and two buttons (one to clean, one to copy). [code_snippet_source id=69] Explanation: Two textareas: inputHTML: Where you paste raw HTML that needs cleaning. outputHTML: Displays the cleaned HTML (set to readonly so users can’t accidentally modify it). Two buttons: cleanBtn: Executes the cleaning logic. copyBtn: Copies the cleaned result to the clipboard. Step 3: Create the Script File (popup.js) This JavaScript file performs the cleaning of HTML and handles button clicks: [code_snippet_source id=70] Explanation of Key Parts: ALLOWED_TAGS: Lists the tags you want to keep in the final output. ALLOWED_ATTRIBUTES: Defines which attributes are permitted on specific tags. For example, only href and title are kept for <a> tags. REMOVE_TAGS: Defines tags you want to fully remove, including their child content (like <script> or <style>). unwrapDisallowedTags: Any element not in ALLOWED_TAGS is removed, but its child text or elements are preserved. stripAttributes: Removes all attributes except those listed in ALLOWED_ATTRIBUTES. Step 4: Load the Extension in Chrome Open Chrome and go to chrome://extensions/. Enable Developer Mode by flipping the toggle in the top right corner. Click the “Load Unpacked” button. Navigate to your html-cleaner-extension folder and select it. The extension should now appear in your list of installed extensions. Step 5: Use the Extension Pin the extension if desired, so its icon is visible in your toolbar. Click on the extension icon to open the popup window. Paste your raw HTML into the top box. Click the “CLEAN” button. Unwanted tags, attributes, and comments are removed. Check your cleaned HTML in the output box. Click “COPY CLEANED CODE” to copy the cleaned version to your clipboard. Why Run a Chrome Extension Locally? Running the extension locally (as opposed to installing from the Chrome Web Store) comes with several advantages: Offline Usage You can continue using the tool even without an internet connection, since all code is stored locally on your machine. Security You fully control and can inspect the code yourself. There’s no need to trust a third-party developer or worry about malicious updates, because it never touches any external servers. Ease of Updates 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. Faster Debugging Since you own all the code and resources, you can open the browser’s DevTools for the extension’s popup, debug any issues on the fly, and immediately see the results. Privacy Your pasted HTML never leaves your local computer. This is especially important if you work with sensitive or proprietary content. 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. Customization Ideas If you need to allow certain new tags or attributes, add them to ALLOWED_TAGS or ALLOWED_ATTRIBUTES. If you want to keep certain tags instead of removing them entirely (for instance, <iframe> content), either remove it from REMOVE_TAGS or add it to ALLOWED_TAGS. 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(). Conclusion 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. 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! GET YOUR FREE COPY: Download the FREE DIY Chrome Extension to Instantly Clean HTML Code 🧼
