Austin Dudzik

Austin Dudzik

Earn Microsoft Rewards from any search engine (w/JavaScript)

Earn Microsoft Rewards from any search engine (w/JavaScript)

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

TL;DR

With some simple JavaScript, you an easily earn Microsoft Rewards from any search engine. Use the code template below, save it to your system, and set it as a custom search engine inside your browser with the below URL structure.

Template: gist.github.com/austin-dudzik/419789777b251..

Tutorial: zapier.com/blog/add-search-engine-to-chrome

file://C:/search/rewards.html?q=%s&p=google

I'm sure most of you are already familiar with Microsoft Rewards, the free program that rewards you for completing web search's and other interactions using Microsoft's Bing search engine and a Microsoft account. This is a nice little incentive to using Bing over the more popular Google search engine, but what if you'd rather use Google while still earning rewards? Today, I'll demonstrate how to build an extremely simple script that will do just so, using a combination of JavaScript and jQuery.

For this tutorial, I've designed an efficient and simple script that should work with any modern browser, as long as it supports the use of setting a custom search engine. It's actually less than 60 lines of code! Follow along below as I document the development process of this script and then I'll share the full code you can use yourself.

The Concept

If you haven't already known, the Bing search results page is able to be embedded within an iframe, which makes this entire concept possible to achieve in the first place. We'll create a basic HTML document with some JavaScript that creates a hidden iframe, loads up the Bing search results page for your desired search, and once completed, redirects to your desired search engine. The code may look more confusing than it is, but once it's integrated, you won't have to worry about it.

1. Getting the URL parameters

Of course to get this working, we'll need to grab an inputted URL parameter to use for our searches. For this script, I'm using an additional parameter as well, allowing for some easy customization to switch the default search engine provider.

Let's take a look at the code for this...

var urlParams = new URLSearchParams(window.location.search);

var searchParam = urlParams.get('q');
var searchProvider = urlParams.get('p');

This part isn't so bad and should be pretty straight-forward to understand. First, we're initializing a new URLSearchParams object, which will allow us to work with the query string of the URL. Then, we can use this new object to grab our two parameters from the URL. These are named searchParam, which holds the search query, and searchProvider, which will hold the name of the search engine to use. That's about all you need to understand here.

2. Create the iframe

Now we must create the iframe that will load up the Bing search results page behind the scenes. This is one of the easiest steps and simply uses jQuery to create the new iframe element and apply some attributes to it.

$("<iframe>").attr({ src: "https://bing.com?q=" + searchParam,
id: "bingSearch" }).css("display", "none").appendTo("body");

As you can see above, the first little chunk is creating a new iframe element, which is the reason for it being wrapped in brackets. Then, we're setting a few attributes for the iframe. The first one is src, which is the URL we're going to be embedding into the iframe. This includes the Bing search URL, along with our search query appended to the end. We then give the iframe an id to reference it later, and then set some css attributes to set its display value to none. Finally, we append the iframe element to the body of the document.

3. Add text to the page (optional)

This step is completely optional, but if you'd like to display a bit of text on the screen before you're redirected, you can do so with the line of code below:

$("<p>").text("Loading...").appendTo("body");

Here, we're simply creating a new paragraph element, adding "Loading..." text to it, and appending it to the body, like we did with the iframe. Nothing too difficult here.

4. Adding the search engine logic

This step gets a bit more complicated, but you can easily copy this code right into your version of the script. I'll explain in a second...

switch (searchProvider) {
    case "google":
        providerUrl = "https://google.com/search?q=";
        break;
    case "yahoo":
        providerUrl = "https://search.yahoo.com/search?p=";
        break;
    case "baidu":
        providerUrl = "http://www.baidu.com/s?wd=";
        break;
    case "aol":
        providerUrl = "https://search.aol.com/aol/search?q=";
        break;
    case "ask.com":
        providerUrl = "https://www.ask.com/web?q=";
        break;
    case "duckduckgo":
        providerUrl = "https://duckduckgo.com/?q=";
        break;
    case "yandex":
        providerUrl = "https://yandex.com/search/?text=";
        break;
    default:
        providerUrl = searchProvider;
}

To summarize, this code is utilizing JavaScript's switch functionality and comparing the set search provider to one in the predefined list. I've added the most popular search engines here so you can easily switch between providers without needing to find the specific search URL. If the provider is not on the list, the script will attempt to use the inputted provider as a URL, where you can use any provider in the script, as long as you provide the right URL structure. Sounds a lot more complicated than it is, but I'll show you some examples in a bit.

5. Handling the redirect

$("#bingSearch").on("load", function () {
    window.location.replace(providerUrl + searchParam);
})

In its essence, this code snippet will first check if the Bing search results iframe has finished loading, and once it has, JavaScript will redirect your browser to the search provider you specified, with the search query intact. As you can see here, this is why we set an id to the iframe, so we can identify it and check for when it finishes loading.


And that is about it! Now, you can take a look at the entire completed script.

Note that I've wrapped the code around jQuery's ready() function, which will load the script when the document has fully loaded, otherwise, the script may fail to run. It's important to add, but didn't necessarily deserve it's own step.

 <script>
// Run when the document is ready
$(document).ready(function () {
        // Create a new variable to grab search params
        var urlParams = new URLSearchParams(window.location.search);
        // Get the specific query
        var searchParam = urlParams.get('q');
        var searchProvider = urlParams.get('p');
        // Create hidden iframe and load Bing search
        $("<iframe>").attr({ src: "https://bing.com?q=" + searchParam, id: "bingSearch" }).css("display", "none").appendTo("body");
        // Add loading message to page
        $("<p>").text("Loading...").appendTo("body");
        // Logic to decide which provider to use
        switch (searchProvider) {
            case "google":
                providerUrl = "https://google.com/search?q=";
                break;
                case "yahoo":
                    providerUrl = "https://search.yahoo.com/search?p=";
                    break;
                case "baidu":
                    providerUrl = "http://www.baidu.com/s?wd=";
                    break;
                case "aol":
                    providerUrl = "https://search.aol.com/aol/search?q=";
                    break;
                case "ask.com":
                    providerUrl = "https://www.ask.com/web?q=";
                    break;
                case "duckduckgo":
                    providerUrl = "https://duckduckgo.com/?q=";
                    break;
                case "yandex":
                    providerUrl = "https://yandex.com/search/?text=";
                    break;
                default:
                    providerUrl = searchProvider;
        }
        // Once Bing search has loaded...
        $("#bingSearch").on("load", function () {
            // Redirect to Google results
            window.location.replace(providerUrl + searchParam);
        })
});
</script>

What to do next?

Now that you have the script, you can easily implement it into an HTML file, which you'll be using next with your browser. Below is a complete integration:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Loading...</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        // Run when the document is ready
        $(document).ready(function () {
            // Create a new variable to grab search params
            var urlParams = new URLSearchParams(window.location.search);
            // Get the specific query
            var searchParam = urlParams.get('q');
            var searchProvider = urlParams.get('p');
            // Create hidden iframe and load Bing search
            $("<iframe>").attr({ src: "https://bing.com?q=" + searchParam, id: "bingSearch" }).css("display", "none").appendTo("body");
            // Add loading message to page
            $("<p>").text("Loading...").appendTo("body");
            // Logic to decide which provider to use
            switch (searchProvider) {
                case "google":
                    providerUrl = "https://google.com/search?q=";
                    break;
                case "yahoo":
                    providerUrl = "https://search.yahoo.com/search?p=";
                    break;
                case "baidu":
                    providerUrl = "http://www.baidu.com/s?wd=";
                    break;
                case "aol":
                    providerUrl = "https://search.aol.com/aol/search?q=";
                    break;
                case "ask.com":
                    providerUrl = "https://www.ask.com/web?q=";
                    break;
                case "duckduckgo":
                    providerUrl = "https://duckduckgo.com/?q=";
                    break;
                case "aol":
                    providerUrl = "https://yandex.com/search/?text=";
                    break;
                default:
                    providerUrl = searchProvider;
            }
            // Once Bing search has loaded...
            $("#bingSearch").on("load", function () {
                // Redirect to Google results
                window.location.replace(providerUrl + searchParam);
            })
        });
    </script>
</body>
</html>

Save this as a new file on your PC with a .html extension and save it somewhere in which it won't get accidentally moved or deleted. For my example, I'll save it in a new folder in my C:\ drive.

C:\search\rewards.html

Now I have the file saved in a location where I'm less likely to lose the file.

Integrating into the browser

This step varies from browser to browser, but the process is similar and tutorials can be found all over the internet if you're not sure where to start. Here's a tutorial specific to Google Chrome and it should be almost identical in Microsoft Edge too.

https://zapier.com/blog/add-search-engine-to-chrome/

I'm not going to walk-through the process of adding a new search engine to your browser since this tutorial could go on forever, but I'll show you a few examples below of how to set up the search engine URL.

Basic URL integration:

file://C:/search/rewards.html?q=%s&p=google

Above is the most basic example of the URL that can be saved as a custom search engine in your browser. Of course, your file probably isn't in the same location as mine, but you get the point. The URL references the HTML file on your system, and then %s is used as a placeholder for the search query. (Your browser will tell you what to use specifically.) Finally, the search provider is added to the end, in this case being Google.

Additional integrations:

Yahoo: file://C:/search/rewards.html?q=%s&p=yahoo

Baidu: file://C:/search/rewards.html?q=%s&p=baidu

AOL: file://C:/search/rewards.html?q=%s&p=aol

Ask.com: file://C:/search/rewards.html?q=%s&p=ask.com

DuckDuckGo: file://C:/search/rewards.html?q=%s&p=duckduckgo

Yandex: file://C:/search/rewards.html?q=%s&p=yandex

Custom: file://C:/search/rewards.html?q=%s&p=https://amazon.com/s?k=

This is about all you need to know in order to add the URL to your browser, and by setting the new custom search engine as your search engine default, all of your searches will be performed through this script.

Now, it's important to understand that using this implementation will delay your searches by a few seconds, as the script must first load Bing's search results and then redirect you to your destination. Depending on your internet connection and Bing's reliability will determine how fast the redirection occurs. Nonetheless, you're still earning points for your searches, so a few extra seconds shouldn't be of concern anyways!

If you enjoyed this tutorial, feel free to give it a like!

Cheers! ✌

#javascript#jquery#microsoft#search#html5
 
Share this