Get Google's Search Results (Extension-Free)

Published on February 5, 2022

In this tutorial, we will go through how to get search results from Google without a WebViewer or an extension. We will need an API key and some more complicated stuff. If you are a beginner, I do not suggest you to read this - this is very complicated.

I made this tutorial according to this post posted by me. That is in all text, so in this tutorial, we will do it according to that.

⚠️ DISCLAIMER: The API key is only used in this tutorial and will not be used elsewheere. Please create your own API key.

🏷️ Tags: #api, #json, #tutorials-and-guides, #google

Step 1. Get An API key.

  1. Go to https://console.developers.google.com. If you are an advanced app developer, you will play around with this a lot, so be sure to be familiar before we get started.

  2. Click on the drop-down menu on the top-left corner. This opens a dialog box with all of your Google projects.

3. Click on 'New Project' for in the dialog. Unlike App Inventor projects, it is not necessary to create one project for each app, so we will create a project for ALL of our apps that use Google Search API.

4. Name this project 'Google Search Project' and click 'CREATE'.

5. Your project will take some time to load. Make sure the loading icon will be a check mark after loading.

6. Close the tab and open Custom Search JSON API | Programmable Search Engine | Google Developers.

7. Scroll down until you see the 'Get a Key' button. Click it.

8. You will see a new dialog. Select 'Google Search Project' in the drop down and click 'Next'.

9. After loading, you will see a new dialog with a new API key. Click on 'Copy' and open docs.new on a new tab.

10. Paste your API key onto the new Google Document. Do not close either the API key tab or the Google Docs tab.

11. Click the 'Done' button.

12. Go to the Programmable Search Engine Dashboard.

13. Click on 'Add'.

14. You will see a control screen. Edit the properties as follows.

15. Complete the reCaptcha (I'm not a robot) task and click Create.

16. Your search engine is now created. Click on the 'Copy' icon and paste the text into the Google Document that we just created.

Step 2. Designing our API request URL.

  1. Quick check, your Google Doc's text should look something like this.

Let me highlight some text for you so that you won't go into any trouble.

2. From the code above, the key parameter is highlighted in red and the cx parameter is highlighted in blue. The q parameter is the text people will search, which will be highlighted in orange as follows. I use the Great Wall of China as an example.

The start of the URL is

https://www.googleapis.com/customsearch/v1/siterestrict

So our get request URL is:

Step 3. Testing and analyzing our URL.

  1. Try to go the the URL on Google. You will see a WHOLE SCREEN of JSON code.

As you can see, the JSON is a dictionary of dictionaries. We want the results under the key item. I changed the URL to MrBeast instead of the Great Wall of China because that is too long.

Step 4. Trying out our URL in MIT App Inventor!

We will need:

  • Two Web components to get and return the API, and also to analyze the JSON,

  • A Label to show the result,

  • A TextToSpeech to speak the result.

Use these blocks (draggable).

The index for result was set to 3 because I want the third result. However, in some cases, there isn't a third result, so be careful!

Do you know how to know if no search results are found? If no results are returned, formattedTotalResults under searchInformation in the JSON will be 0, but I will leave it to you guys to think about it.

Downloads

Tests

Tested successfully on the AI Companion on Xiaomi 5G 11 NE Lite.

💬 Messages

⚙️ ✏️ EDITED 02.21.2022 - The site owner added some minor edits in the page.

⚙️ 🔒 CLOSED 02.21.2022 - This tutorial will not receive any further updates in the future unless opened.