JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Cross-Account Document Search</title>
    <style>
        .container { max-width: 800px; margin: 20px auto; padding: 20px }
        .result-item { padding: 10px; border-bottom: 1px solid #ddd; cursor: pointer }
        .result-item:hover { background: #f5f5f5 }
        #results { height: 500px; overflow-y: auto; margin-top: 20px }
    </style>
</head>
<body>
    <div class="container">
        <h2>Search Documents Across Google Accounts</h2>
        <input type="text" id="searchInput" placeholder="Enter search terms...">
        <button onclick="searchDocuments()">Search</button>
        
        <div id="results"></div>
        
        <!-- API Configuration Section -->
        <div style="margin-top: 50px">
            <h3>API Setup Instructions</h3>
            <ol>
                <li>Create Google Cloud projects for each account :cite[7]</li>
                <li>Enable "Google Drive API" and "Google Docs API" in each project</li>
                <li>Generate OAuth 2.0 Client IDs (not API keys) for web application :cite[7]</li>
            </ol>
        </div>
    </div>

    <script>
        // Initialize Google API client
        function initClient() {
            gapi.client.init({
                apiKey: 'YOUR_API_KEY',
                clientId: 'YOUR_CLIENT_ID',
                discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
                scope: "https://www.googleapis.com/auth/drive.readonly"
            });
        }

        async function searchDocuments() {
            const query = document.getElementById('searchInput').value;
            const resultsContainer = document.getElementById('results');
            resultsContainer.innerHTML = 'Loading...';

            try {
                // First account search
                const response1 = await gapi.client.drive.files.list({
                    q: `name contains...