Start Online research with new text

Hi here,

I would love to have a possibility to create a new research on the internet right from where I am. A bit like:

  1. Do the shortcut
  2. A window asks for the research I'd like to do
  3. My default browser comes up with the result, either on DuckDuckGo, Google, Bing, Amazon, whatever you want.

This would REALLY be a game-changer for my workflow! Thanks a lot!!

You’ve just described something called a launchbar app, or search bar app, or launcher, of which there are many, many available, the two most well-known and cemented in this niche being Alfred, and Launchbar.

They do exactly what you described done to the tee, and a thousand things much more powerful.

There are some free open-source ones as well, available via GitHub, all extensible.

And, finally, you can create your exact game-changing search bar yourself, using Better Touch Tool's Show Floating WebView action, which allows you to create completely customisable interfaces with HTML/JavaScript/CSS, bind this to a hotkey, and have it perform actions or functions as you so desire.

I went ahead and created one tonight, which does exactly what you want. Here's a GIF demonstrating it in action:

I attached it to the hotkey ⟨SHIFT+ENTER⟩. It took me a while (a few hours), as I've never done this before, but it wasn't too overwhelming.

Here's the HTML document if you want to make use of it to make your own. If you following what I've described here about its set up, i.e. the WebView action, attached to a keyboard shortcut; then you can double-click the WebView action to open the setup options dialog, and link this file to it. With respect to the width and height options, you should set these to the same dimensions as your full screen resolution.

HTML Code
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        body {
            font-family: Andale Mono, Menlo, monospace;
        }

        * {
            box-sizing: border-box;
        }

        .overlay {
            height: 100%;
            width: 100%;
            display: block;
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            background-color: rgba(15,15,15,0.0);
            opacity: 1;
        }

        .overlay-content {
            position: fixed;
            top: 25%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 50%;
            height: 50px;
            text-align: center;
            margin-top: 0px;
            border: none;
            background-color: rgba(125, 125, 90, 0.0);
            opacity: 1;
            z-index: 10;
            box-shadow: 0 15px 20px 0px rgba(150, 150, 150, 0.4);
        }

        .overlay input[type=text] {
            padding: 12px;
            font-size: 20px;
            border: 1px solid palevioletred;
            border-radius: 5px 0 0 5px;
            border-right: 0;
            float: left;
            width: 90%;
            height: 100%;
            background-color: dimgray;
            opacity: 0.8;
            color: white;
            font-family: Hack, Menlo, monospace;
            font-weight: 300;
            z-index: 100;
        }

        .overlay input[type=text]:focus {
            outline: none;
        }

        .overlay button {
            float: left;
            width: 10%;
            height: 100%;
            padding: 12px;
            background-color: dimgray;
            opacity: 0.8;
            color: palevioletred;
            font-size: 21px;
            border: 1px solid palevioletred;
            border-radius: 0 5px 5px 0;
            border-left: 0;
            cursor: pointer;
            z-index: 100;
        }
        
        .fa {
            color: palevioletred;
            opacity: 0.8;
        }
    </style>

</head>

<body>

    <div id="bgOverlay" class="overlay">
        <div class="overlay-content" onblur="checkFocus()">
            <form id="queryForm" onSubmit="doSearch()">
                <input type="text" placeholder="Search..." id="query" onfocusout="setFocusToInput()" autofocus />
                <button id="searchBtn"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        var bg = document.getElementById("bgOverlay");
        var content = document.getElementsByClassName("overlay-content")[0];
        var searchbar = document.getElementById("queryForm");
        var input = document.getElementById("query");
        var searchbtn = document.getElementById("searchBtn");
        
        input.addEventListener('keydown', (event) => {
            if (event.keyCode == 27) { closeSearchBar(); return; }
        });
        
        bg.addEventListener('click', (event) => {
            if (event.target == bg) { closeSearchBar(); return; }
        });
        
        searchGoogle = (searchStr) => {
                return {
                    "BTTPredefinedActionType": 195,
                    "BTTPredefinedActionName": "Run Apple Script (async in background)",
                    "BTTInlineAppleScript": "open location \"https:\/\/google.co.uk\/search?q=" + encodeURIComponent(searchStr) + "\""
                }
        }

        function BTTInitialize() {
            setFocusToInput();
        }

        function BTTWillCloseWindow() {

        }

        checkFocus = () => {
            const visibleElements = [searchbar, input, searchbtn];
            
            if (!visibleElements.includes(document.activeElement)) { closeSearchBar(); }
        }
        
        setFocusToInput = () => {
            input.focus();
        }

        closeSearchBar = () => {
            window.BTT.callHandler('trigger_named', {
                closeFloatingHTMLMenu: 1
            });
        }

        doSearch = () => {
            let query = input.value;
            if (query == '') return;
            
            window.BTT.callHandler('trigger_action', {
                json: JSON.stringify(searchGoogle(query)),
                closeFloatingHTMLMenu: 1
            });
        }
    </script>
</body>

</html>
4 Likes

Great, thank you for your answer!!
In fact, I already knew Alfred and LaunchBar, but both of these programs go way beyond what I need. So until now I used ⌘space to open spotlight, tap my research, and then pass it to my default internet browser via ⌘B.

Thanks a lot for the HTML you made!! I knew this function, it was one of the big newcomers of the update this summer, but my scripting abilities are kinda limited :wink: thank you very much!!!

awesome, I think many people would be interested in this. Maybe post it in the preset sharing section?

I think this should be done by the author himself! Really a great job!

Another question, how could I launch a research with duckdockgo?
If I replace

                "BTTInlineAppleScript": "open location \"https:\/\/google.co.uk\/search?q=" + encodeURIComponent(searchStr) + "\"",

With

                "BTTInlineAppleScript": "open location \"https:\/\/duckduckgo.com\/search?q=" + encodeURIComponent(searchStr) + "\"",

I get a research in "Meanings". To get a web research, I'd have to add

&ia=web

at the end of the link. How to?

Sorry if my question is basic level, it's literally the first time I touch HTML xD
Would this work with the bangs! from DDG? Like, if I search for "groundhog i!" I'd get images with groundhogs?

Thanks for the time and consideration!! :+1:t3:

EDIT: fun fact, if I cancel the research either by pressing the button again or by clicking outside the window, iTunes will skip to the next song x)

That's fine, you can just switch the parameter order, so that the search query still comes at the end (purely to make it easier to append the variable to the string, and for no other reason):

"BTTInlineAppleScript": "open location \"https:\/\/duckduckgo.com\/?ia=web&q=" + encodeURIComponent(searchStr) + "\""

Yup, absolutely!

GIF: A Gopher Image Search With DuckDuckGo

searchbar

Wow, that's so random. I have no idea why. You could try pressing ⟨ESC⟩, as I bound that key to the search box to enable one to close the window that way. But it comes with a beep, which gets irritating after many, many times of hearing it as I did when testing.

You, Sir, are kinda the hero of the day :smiley: Thank you very very much!!
In fact, I realise now that "cancelling" the script brings up again the last performed action - this morning I just skipped a song. But if you switch from fullscreen Safari to Finder with BTT settings, bring up the HTML, and cancel it, you'll be back in Safari. Nevertheless, this script is pure gold! Thank you so much!! :partying_face::+1:t3:

This could work too, but how do I change it to search to Youtube :thinking:

Edit: got it only problem is the text from previous search remains, adding additional action cmd+A highlights the whole page.

I find the idea superb, and I think it can be adapted to each person. I tried (with my level) to set up this great shortcut proposed by CJK. But it only works once, when I restart the shortcut, nothing happens. Does anyone know why ?