☰

Greasy Fork is available in English.

Friendly Sidebar Display of Custom Search API Results

Enhance your Google search experience by displaying additional search results from the Google Custom Search API in a convenient sidebar. Perfect for power users who want more information at their fingertips.

// ==UserScript==
// @name         Friendly Sidebar Display of Custom Search API Results
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Enhance your Google search experience by displaying additional search results from the Google Custom Search API in a convenient sidebar. Perfect for power users who want more information at their fingertips.
// @author       Your Name
// @match        https://www.google.com/search?*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==


(function () {
    'use strict';

    // Add custom styles for the sidebar
    GM_addStyle(`
        #custom-search-sidebar {
            position: fixed;
            right: 0;
            top: 0;
            width: 30%; /* Adjust width as needed */
            height: 100%;
            background-color: white;
            overflow-y: auto;
            border-left: 1px solid #ccc;
            z-index: 9999;
            padding: 10px;
            box-sizing: border-box;
        }
        #settings-form {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 10000;
            display: none; /* Initially hidden */
        }
        #show-settings {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 10001;
        }
    `);
    // Function to load settings with a default value for dateRestrict
    function loadSettings() {
        return {
            apiKey: localStorage.getItem('apiKey') || '',
            searchEngineId: localStorage.getItem('searchEngineId') || '',
            dateRestrict: localStorage.getItem('dateRestrict') || '' // Default to 'm1' if not set
        };
    }

    // Function to save settings
    function saveSettings(apiKey, searchEngineId, dateRestrict) {
        localStorage.setItem('apiKey', apiKey);
        localStorage.setItem('searchEngineId', searchEngineId);
        localStorage.setItem('dateRestrict', dateRestrict);
    }

    // Function to create settings form
    function createSettingsForm() {
        const form = document.createElement('div');
        form.id = 'settings-form';
        form.innerHTML = `
        <input type="text" id="api-key-input" placeholder="API Key" value="${loadSettings().apiKey}">
        <input type="text" id="search-engine-id-input" placeholder="Search Engine ID" value="${loadSettings().searchEngineId}">
        <button id="save-settings">Save</button>
    `;
        document.body.appendChild(form);

        document.getElementById('save-settings').addEventListener('click', function () {
            const apiKey = document.getElementById('api-key-input').value;
            const searchEngineId = document.getElementById('search-engine-id-input').value;
            saveSettings(apiKey, searchEngineId);
            form.style.display = 'none'; // Hide the form after saving settings
        });
    }

    // Create a button to show/hide the settings form
    const showSettingsButton = document.createElement('button');
    showSettingsButton.id = 'show-settings';
    showSettingsButton.textContent = 'Settings';
    document.body.appendChild(showSettingsButton);

    showSettingsButton.addEventListener('click', function () {
        const form = document.getElementById('settings-form');
        form.style.display = form.style.display === 'none' ? 'block' : 'none';
    });

    // Create settings form on script load
    createSettingsForm();


    // Extract the search query from the URL
    const params = new URLSearchParams(window.location.search);
    const query = params.get('q');

    // Create the sidebar div
    const sidebar = document.createElement('div');
    sidebar.id = 'custom-search-sidebar';
    document.body.appendChild(sidebar);

    // Use the settings to construct the initial API request URL
    const { apiKey, searchEngineId, dateRestrict } = loadSettings();
    const requestUrl = `https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${searchEngineId}&q=${encodeURIComponent(query)}&dateRestrict=${dateRestrict}`;

    // ...之前的代码...

    // Make the API request
    GM_xmlhttpRequest({
        method: 'GET',
        url: requestUrl,
        onload: function (response) {
            const results = JSON.parse(response.responseText);
            displayResults(results);
        },
        onerror: function (error) {
            console.error('API Request failed', error);
        }
    });

    // ...之前的代码...

    // Function to display results in the sidebar
    function displayResults(data) {
        const sidebar = document.getElementById('custom-search-sidebar');

        // Save the date restrict select element and remove it temporarily from the sidebar
        const dateRestrictSelect = document.getElementById('date-restrict-select');
        if (dateRestrictSelect && dateRestrictSelect.parentNode) {
            dateRestrictSelect.parentNode.removeChild(dateRestrictSelect);
        }

        // Clear existing results
        sidebar.innerHTML = '';

        // Re-add the date restrict select element to the sidebar
        if (dateRestrictSelect) {
            sidebar.appendChild(dateRestrictSelect);
        }

        if (data.items && data.items.length > 0) {
            const list = document.createElement('ul');
            list.style.listStyle = 'none';
            list.style.padding = '0';
            list.style.margin = '0';

            data.items.forEach(item => {
                const listItem = document.createElement('li');
                listItem.style.marginBottom = '10px';

                const title = document.createElement('div');
                title.style.fontWeight = 'bold';
                title.textContent = item.title;

                const link = document.createElement('a');
                link.href = item.link;
                link.textContent = item.displayLink;
                link.style.display = 'block';
                link.style.marginBottom = '5px';
                link.style.color = '#1a0dab';
                link.target = '_blank';

                const snippet = document.createElement('div');
                snippet.textContent = item.snippet;

                listItem.appendChild(title);
                listItem.appendChild(link);
                listItem.appendChild(snippet);

                list.appendChild(listItem);
            });

            sidebar.appendChild(list);
        } else {
            sidebar.textContent = 'No results found.';
        }
    }

    // ...之后的代码...


    // ...之前的代码...

    // Function to create the date restrict selector within the sidebar
    function createDateRestrictSelectorInSidebar() {
        const selector = document.createElement('select');
        selector.id = 'date-restrict-select';
        selector.innerHTML = `
        <option value="">Any time</option>
        <option value="d1">Past 24 hours</option>
        <option value="d7">Past week</option>
        <option value="m1">Past month</option>
        <option value="y1">Past year</option>
    `;

        // Pre-select the saved date restrict option
        const savedDateRestrict = loadSettings().dateRestrict;
        if (savedDateRestrict) {
            selector.value = savedDateRestrict;
        }

        // Event listener to update results on change
        selector.addEventListener('change', function () {
            const dateRestrict = selector.value;
            console.log(dateRestrict)
            saveSettings(loadSettings().apiKey, loadSettings().searchEngineId, dateRestrict);
            updateSearchResults();
        });

        // Add the selector to the sidebar
        const sidebar = document.getElementById('custom-search-sidebar');
        sidebar.insertBefore(selector, sidebar.firstChild);
    }

    // Function to update search results
    function updateSearchResults() {
        // Extract the search query from the URL
        const params = new URLSearchParams(window.location.search);
        const query = params.get('q');

        console.log(loadSettings())
        // Get updated settings
        const { apiKey, searchEngineId, dateRestrict } = loadSettings();

        // Construct the API request URL
        const requestUrl = dateRestrict
            ? `https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${searchEngineId}&q=${encodeURIComponent(query)}&dateRestrict=${dateRestrict}`
            : `https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${searchEngineId}&q=${encodeURIComponent(query)}`;

        // Make the API request and update the sidebar
        GM_xmlhttpRequest({
            method: 'GET',
            url: requestUrl,
            onload: function (response) {
                const results = JSON.parse(response.responseText);
                displayResults(results);
            },
            onerror: function (error) {
                console.error('API Request failed', error);
            }
        });
    }

    // ...之前的代码...


    // Call this function to create the date restrict selector inside the sidebar
    createDateRestrictSelectorInSidebar();

    // Rest of your script...


})();