☰

Google Search with Obsidian

Search Obsidian while searching on Google and display the results on the right side of the page.

// ==UserScript==
// @name         Google Search with Obsidian
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Search Obsidian while searching on Google and display the results on the right side of the page.
// @author       maidong
// @match        https://www.google.com.hk/*
// @match        https://www.google.com/*
// @grant        GM_log
// @license      MIT
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==


(function($) {
    'use strict';

   // http server endpoint, start based with obsidian-vault directory
   var local_static_file_server="http://localhost:17890/"
   var omnisearch_server="http://127.0.0.1:51361/"
   var max_search_resut=10

   // Function to call the Obsidian search API
   function searchObsidian(keyword) {
       // Make an HTTP request to the Obsidian search API
       // Replace the authorization token and API endpoint with your own
       $.ajax({
           url: omnisearch_server+'search?q=' + encodeURIComponent(keyword),
           headers: {
               'Content-Type': 'application/json'
           },
           success: function(data) {
               // Process the response and display the results on the right side of the page
               displayResults(data);
           },
           error: function(error) {
               GM_log('Error calling Obsidian search API: ' + error);
           }
       });
   }

    // Function to display the search results
    function displayResults(results) {
        // Remove any existing search results
        $('#obsidian-results').remove();

        // Create a container for the search results
        var container = $('<div>').attr('id', 'obsidian-results')
        .css({'position': 'fixed',
              'top': '135px',
              'right': '0',
              'padding': '10px',
              'height': '1160px',
              'width': '500px',
              'background-color': '#fff',
              'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
              'padding': '16px',
              'z-index': '9999'
             });

        // Create an iframe to render the search results
        var iframe = $('<iframe>').attr('srcdoc', getIframeContent(results))
        .css({'width': '100%', 'height': '100%', 'border': 'none'});

        container.append(iframe);
        $('body').append(container);
    }

    // Function to generate the HTML content for the iframe
    function getIframeContent(results) {
        var html = "<html><head><style>body {padding:0;margin:0;background:0 0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}</style></head><body>";

        var count = 0;
        // Loop through the search results and create a result element for each
        $.each(results, function(index, result) {
            if (count >= max_search_resut) {
                return false;
            }
            html += '<div style="margin-bottom: 16px;">';
            html += '<h3 style="font-size: 18px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">';
            html += '<a target="_blank" href="' +local_static_file_server+ result.path + '">' + result.basename + '</a></h3>';
            var excerpt = result.excerpt.length > 100 ? result.excerpt.substring(0, 100) + '...' : result.excerpt;
            html += '<span style="font-size: 14px; color: #70757a; display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">';
            html += excerpt + '</span>';
            html += '</div>';
            count++;
        });


        html += '</body></html>';
        return html;
    }

    // Get the keyword from the URL parameters
    var urlParams = new URLSearchParams(window.location.search);
    var keyword = urlParams.get('q');

    // Call the Obsidian search API
    searchObsidian(keyword);
})(jQuery);