Want to run XSLT in Chrome? This guide walks you through multiple methods, including using XML with XSLT references, JavaScript-based transformations, and Chrome extensions. Learn how to display transformed XML as HTML effortlessly!

Introduction

Extensible Stylesheet Language Transformations (XSLT) is a powerful language used for transforming XML documents into different formats such as HTML, text, or other XML structures. While many browsers support XSLT processing natively, Google Chrome has limited support due to security reasons. However, you can still run XSLT in Chrome using a few workarounds.

In this guide, we will explore different methods to run XSLT transformations in Chrome, including:

Using an XML file with an XSLT reference using the chrome target parameter
Using an XML file with an XSLT reference using Webserver
Running XSLT transformation using JavaScript
Using browser extensions

Let's Start, first prepare the data.xml and transform.xsl

library.xml:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<students>
    <student id="S001">
        <name>John Doe</name>
        <age>21</age>
        <major>Computer Science</major>
        <courses>
            <course code="CS101">
                <courseName>Intro to Programming</courseName>
                <credits>3</credits>
                <grade>A</grade>
            </course>
            <course code="CS102">
                <courseName>Data Structures</courseName>
                <credits>4</credits>
                <grade>B+</grade>
            </course>
        </courses>
    </student>
    <student id="S002">
        <name>Jane Smith</name>
        <age>22</age>
        <major>Mathematics</major>
        <courses>
            <course code="MATH101">
                <courseName>Calculus I</courseName>
                <credits>4</credits>
                <grade>B</grade>
            </course>
            <course code="MATH102">
                <courseName>Linear Algebra</courseName>
                <credits>3</credits>
                <grade>A-</grade>
            </course>
        </courses>
    </student>
    <student id="S003">
        <name>Sam Johnson</name>
        <age>20</age>
        <major>Physics</major>
        <courses>
            <course code="PHYS101">
                <courseName>Mechanics</courseName>
                <credits>4</credits>
                <grade>C+</grade>
            </course>
            <course code="PHYS102">
                <courseName>Electromagnetism</courseName>
                <credits>3</credits>
                <grade>B+</grade>
            </course>
        </courses>
    </student>
</students>

transform.xsl:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
    <!-- Output as HTML with UTF-8 encoding -->
    <xsl:output method="html" encoding="UTF-8"/>
    
    <!-- Template to match the root element -->
    <xsl:template match="/">
        <html>
            <head>
                <title>Student Information</title>
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        margin: 20px;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                    }
                    table, th, td {
                        border: 1px solid black;
                    }
                    th, td {
                        padding: 10px;
                        text-align: left;
                    }
                    input[type="text"], select {
                        width: 100%;
                        padding: 5px;
                        margin: 5px 0;
                    }
                </style>
            </head>
            <body>
                <h1>Student Information</h1>
                <!-- Loop through all students and create a table -->
                <xsl:apply-templates select="students/student"/>
            </body>
        </html>
    </xsl:template>

    <!-- Template to process each student -->
    <xsl:template match="student">
        <h2>Student: <xsl:value-of select="name"/></h2>
        <form action="#" method="post">
            <!-- Display Student Details in Textboxes -->
            <table>
                <tr>
                    <th>Name</th>
                    <td><input type="text" name="name" value="{name}"/></td>
                </tr>
                <tr>
                    <th>Age</th>
                    <td><input type="text" name="age" value="{age}"/></td>
                </tr>
                <tr>
                    <th>Major</th>
                    <td><input type="text" name="major" value="{major}"/></td>
                </tr>
            </table>
            
            <h3>Courses</h3>
            <table>
                <tr>
                    <th>Course Code</th>
                    <th>Course Name</th>
                    <th>Credits</th>
                    <th>Grade</th>
                </tr>
                <!-- Loop through each course -->
                <xsl:apply-templates select="courses/course"/>
            </table>
            <hr/>
        </form>
    </xsl:template>

    <!-- Template to process each course -->
    <xsl:template match="course">
        <tr>
            <!-- Display Course Code in a Select List -->
            <td>
                <select name="courseCode">
                    <option value="{@code}" selected="selected"><xsl:value-of select="@code"/></option>
                    <option value="CS101">CS101</option>
                    <option value="MATH101">MATH101</option>
                    <option value="PHYS101">PHYS101</option>
                    <option value="CS102">CS102</option>
                    <option value="MATH102">MATH102</option>
                    <option value="PHYS102">PHYS102</option>
                </select>
            </td>
            <!-- Course Name as a Read-Only Textbox -->
            <td><input type="text" value="{courseName}" readonly="readonly"/></td>
            <!-- Credits as a Textbox -->
            <td><input type="text" name="credits" value="{credits}"/></td>
            <!-- Grade as a Textbox -->
            <td><input type="text" name="grade" value="{grade}"/></td>
        </tr>
    </xsl:template>

</xsl:stylesheet>

expected output:

xslt and xml output

Method 1: Using an XML File with an XSLT Reference using the chrome target parameter

If you try to open data.xml directly in Chrome by double-clicking, it may not process the XSLT due to your chrome setting. To enable this:

Step 1: Create `the chrome shortcut on deskop`

Run XSLT in Chrome: Chrome Shortcut

Step 2: Update the chrome properties ( `shortcut)`

Add the --allow-file-access-from-files in the Target field as shown below:

Run XSLT in Chrome: Chrome properties

Step 3: Open the data.xml file

Place data.xml, and transform.xsl in the same directory.
Open file:///C:/abc/XSLT/XSLT/XSLT2/data.xml in Chrome.
The transformed content will be displayed.

Method 2: Using an XML File with an XSLT Reference

If you try to open data.xml directly in Chrome by double-clicking, it may not process the XSLT due to local file restrictions. To bypass this:

Use a Local Web Server

Run a simple HTTP server in the folder containing the XML and XSL files.
If you have Python installed, run:

python -m http.server 8000

Open Chrome and navigate to:
http://localhost:8000/data.xml
The XML will be transformed using transform.xsl and displayed as an HTML page.

Method 3: Running XSLT in Chrome Using JavaScript

If Chrome blocks XSLT processing via XML stylesheets, you can manually apply the transformation using JavaScript.

Step 1: Create `index.html`

This file will load an XML and XSLT file, apply the transformation using JavaScript, and display the result.

Example index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XSLT Transformation in Chrome</title>
</head>
<body>
    <h2>Book Catalog</h2>
    <div id="output"></div>

    <script>
        function loadXMLDoc(filename) {
            return new Promise((resolve, reject) => {
                let xhttp = new XMLHttpRequest();
                xhttp.open("GET", filename, true);
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        resolve(this.responseXML);
                    }
                };
                xhttp.onerror = () => reject("Failed to load " + filename);
                xhttp.send();
            });
        }

        async function applyXSLT() {
            let xml = await loadXMLDoc("data.xml");
            let xsl = await loadXMLDoc("transform.xsl");

            if (window.ActiveXObject || "ActiveXObject" in window) {
                // For IE
                let ex = xml.transformNode(xsl);
                document.getElementById("output").innerHTML = ex;
            } else if (document.implementation && document.implementation.createDocument) {
                let xsltProcessor = new XSLTProcessor();
                xsltProcessor.importStylesheet(xsl);
                let resultDocument = xsltProcessor.transformToFragment(xml, document);
                document.getElementById("output").appendChild(resultDocument);
            }
        }

        applyXSLT();
    </script>
</body>
</html>

Step 2: Run the Code

Place index.html, data.xml, and transform.xsl in the same directory.
Open file:///C:/abc/XSLT/XSLT/XSLT2/index.html in Chrome.
The transformed content will be displayed.

Method 3: Using a Chrome Extension

If you frequently work with XSLT in Chrome, you can use an extension.

Step 1: Install an XSLT Processing Extension

Go to the Chrome Web Store.
Search for "XSLT Processor" or "XML & XSL Viewer".
Install the extension.

Step 2: Open Your XML File

Click on the extension and select “Load XML with XSLT”.
Choose your XML file.
The extension will apply the XSLT transformation and display the output.

Conclusion

Although Chrome has limited built-in XSLT support, you can still run XSLT transformations using:

Using an XML file with an XSLT reference (using the chrome target parameter)
Direct XML with an XSLT reference (requires a local web server)
JavaScript-based transformation (more flexible)
Browser extensions (convenient for frequent users)

Following these methods, you can efficiently process XML using XSLT in Chrome. Welcome to the Integration Galaxy.

How to Run XSLT in Chrome: A Step-by-Step Guide