CRX id
jfcfmlcbjaloijgkjhfkfioonngengnm
jfcfmlcbjaloijgkjhfkfioonngengnm
Description from extension meta
Displays HTML, CSS, and JavaScript source code of the current page.
Image from store
Description from store
Dive deep into the building blocks of the web with Source Code Viewer! This powerful Chrome extension provides an unparalleled, clean, and organized way to inspect the full source code of any website you visit. Whether you're a web developer, a student learning the ropes, a security enthusiast, or just curious about how your favorite sites are constructed, this tool is designed for you.
Forget endlessly sifting through the browser's developer tools to find individual script or style files. Source Code Viewer Deluxe intelligently extracts not only the main HTML document but also all linked external CSS stylesheets and JavaScript files, presenting each in its own dedicated, easy-to-navigate tab. Inline styles and scripts are also captured and displayed in their respective categorized tabs.
Key Features:
Comprehensive Code Extraction:
HTML: View the complete documentElement.outerHTML of the current page.
CSS:
Individual External Files: Each <link rel="stylesheet" href="..."> file is fetched and displayed in a separate, clearly labeled tab (e.g., "CSS 1 (styles.css)", "CSS 2 (theme.css)").
Inline Styles: Each <style> block from the HTML is extracted and presented in its own tab (e.g., "Inline CSS 1", "Inline CSS 2").
Source Comments: Fetched external files include a comment indicating their original URL.
JavaScript:
Individual External Scripts: Every <script src="..."> file is fetched and displayed in a separate tab (e.g., "JS 1 (main.js)", "JS 2 (analytics.js)").
Inline Scripts: Non-empty inline <script> blocks (with appropriate JavaScript MIME types) are extracted and shown in individual tabs (e.g., "Inline JS 1").
Source Comments: Fetched external scripts include a comment indicating their original URL.
User-Friendly Interface & Navigation:
Clean Tabbed Layout: A sleek, modern, dark-themed interface allows you to effortlessly switch between HTML, and numerous CSS and JavaScript source files.
Scrollable Tab Bar: If a page loads many external files, the tab bar becomes horizontally scrollable, ensuring all sources remain accessible.
Informative Tab Naming: Tabs are clearly named using the filename for external resources or numbered for inline blocks, making identification quick and easy. Full URLs are often available in the tab or header title tooltip.
Intuitive Design: Designed for clarity and ease of use, minimizing clutter and maximizing code readability.
Powerful Utility Functions:
One-Click Copy: Each code pane features a dedicated "Copy" button with an icon, allowing you to instantly copy the entire content of that specific HTML, CSS, or JavaScript block to your clipboard.
Smooth "Copied!" Notification: A non-intrusive, animated notification appears briefly in the corner to confirm that the code has been successfully copied.
Loading Indicator: A clear "Loading source code..." message is displayed while the extension fetches and processes the data.
Graceful Error Handling:
If the extension cannot access a page (e.g., chrome:// URLs, browser internal pages), a user-friendly error message is shown.
If an individual external CSS or JS file fails to load (e.g., 404 error, network issue), a comment indicating the failure will be included in its respective code pane, allowing other files to still be displayed.
Why Use Source Code Viewer Deluxe?
Rapid Inspection: Get an immediate overview of all code assets a webpage is using without complex DevTools navigation.
Enhanced Learning: Perfect for students and aspiring developers to see real-world examples of how websites are built, how styles are organized, and how scripts interact.
Debugging & Analysis: Quickly check the exact version of a script or stylesheet being served, or examine inline code snippets.
Competitor & Third-Party Code Analysis: Understand the technologies and structure of other websites or how third-party widgets are implemented.
Consolidated View: Provides a single, focused interface for all primary front-end code types.
How to Use:
Install the Extension: Add Source Code Viewer Deluxe to your Chrome browser from the Web Store.
Navigate to a Webpage: Open the website whose source code you wish to inspect.
Click the Extension Icon: Click the Source Code Viewer Deluxe icon in your Chrome toolbar.
Explore the Code: The popup window will appear, initially showing a loading message, then populating with tabs for HTML and all detected CSS and JavaScript sources.
Click on a tab (e.g., "HTML", "CSS 1 (main.css)", "JS 2 (api.js)") to view its content.
Scroll the tab bar horizontally if there are many tabs.
Copy Code: Click the "Copy" button within any code pane to copy its contents to your clipboard. A notification will confirm the action.
Important Notes & Limitations:
Dynamic Content: The extension captures the source code as it exists at the moment the extension script runs. Content dynamically generated or modified by JavaScript after this initial capture may not be reflected.
Server Configurations & Network Issues: While the extension attempts to fetch all external resources, server-side configurations (like very restrictive Cross-Origin Resource Sharing (CORS) policies or firewalls) or network connectivity problems might prevent some files from being loaded. The extension will generally indicate such failures within the specific code pane.
Minified/Bundled Code: The extension displays the code as it is served by the web server. If the CSS or JavaScript is minified or bundled, you will see the minified/bundled version, not the original pre-processed source files (unless source maps are directly linked and the server serves original files, which this extension does not specifically process).
Browser-Protected Pages: For security reasons, Chrome extensions cannot access or inject scripts into certain pages like chrome:// URLs (e.g., settings, extensions page) or other browser-internal pages. An error message will be displayed in such cases.
Permissions:
activeTab: Allows the extension to access information about the currently active tab (like its URL) when you click the extension icon.
scripting: Enables the extension to inject its content script into the active tab. This script is responsible for extracting the HTML and identifying CSS/JS sources.
host_permissions (<all_urls>): This permission is crucial for the injected content script to use the fetch API to retrieve the content of external CSS and JavaScript files referenced by the webpage, regardless of the domain they are hosted on. This ensures a comprehensive view of all linked resources.
We are committed to providing a useful and reliable tool. If you encounter any issues or have suggestions for new features, please let us know!