☰

Google Search with Obsidian

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

  1. // ==UserScript==
  2. // @name         Google Search with Obsidian
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Search Obsidian while searching on Google and display the results on the right side of the page.
  6. // @author       maidong
  7. // @match        https://www.google.com.hk/*
  8. // @match        https://www.google.com/*
  9. // @grant        GM_log
  10. // @license      MIT
  11. // @require      https://code.jquery.com/jquery-3.6.0.min.js
  12. // ==/UserScript==
  13.  
  14.  
  15. (function($) {
  16.     'use strict';
  17.  
  18.    // http server endpoint, start based with obsidian-vault directory
  19.    var local_static_file_server="http://localhost:17890/"
  20.    var omnisearch_server="http://127.0.0.1:51361/"
  21.    var max_search_resut=10
  22.  
  23.    // Function to call the Obsidian search API
  24.    function searchObsidian(keyword) {
  25.        // Make an HTTP request to the Obsidian search API
  26.        // Replace the authorization token and API endpoint with your own
  27.        $.ajax({
  28.            url: omnisearch_server+'search?q=' + encodeURIComponent(keyword),
  29.            headers: {
  30.                'Content-Type': 'application/json'
  31.            },
  32.            success: function(data) {
  33.                // Process the response and display the results on the right side of the page
  34.                displayResults(data);
  35.            },
  36.            error: function(error) {
  37.                GM_log('Error calling Obsidian search API: ' + error);
  38.            }
  39.        });
  40.    }
  41.  
  42.     // Function to display the search results
  43.     function displayResults(results) {
  44.         // Remove any existing search results
  45.         $('#obsidian-results').remove();
  46.  
  47.         // Create a container for the search results
  48.         var container = $('<div>').attr('id', 'obsidian-results')
  49.         .css({'position': 'fixed',
  50.               'top': '135px',
  51.               'right': '0',
  52.               'padding': '10px',
  53.               'height': '1160px',
  54.               'width': '500px',
  55.               'background-color': '#fff',
  56.               'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
  57.               'padding': '16px',
  58.               'z-index': '9999'
  59.              });
  60.  
  61.         // Create an iframe to render the search results
  62.         var iframe = $('<iframe>').attr('srcdoc', getIframeContent(results))
  63.         .css({'width': '100%', 'height': '100%', 'border': 'none'});
  64.  
  65.         container.append(iframe);
  66.         $('body').append(container);
  67.     }
  68.  
  69.     // Function to generate the HTML content for the iframe
  70.     function getIframeContent(results) {
  71.         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>";
  72.  
  73.         var count = 0;
  74.         // Loop through the search results and create a result element for each
  75.         $.each(results, function(index, result) {
  76.             if (count >= max_search_resut) {
  77.                 return false;
  78.             }
  79.             html += '<div style="margin-bottom: 16px;">';
  80.             html += '<h3 style="font-size: 18px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">';
  81.             html += '<a target="_blank" href="' +local_static_file_server+ result.path + '">' + result.basename + '</a></h3>';
  82.             var excerpt = result.excerpt.length > 100 ? result.excerpt.substring(0, 100) + '...' : result.excerpt;
  83.             html += '<span style="font-size: 14px; color: #70757a; display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">';
  84.             html += excerpt + '</span>';
  85.             html += '</div>';
  86.             count++;
  87.         });
  88.  
  89.  
  90.         html += '</body></html>';
  91.         return html;
  92.     }
  93.  
  94.     // Get the keyword from the URL parameters
  95.     var urlParams = new URLSearchParams(window.location.search);
  96.     var keyword = urlParams.get('q');
  97.  
  98.     // Call the Obsidian search API
  99.     searchObsidian(keyword);
  100. })(jQuery);