Building Chrome Extension Day 3 - jQuery Ajax API Calls

Hi Everyone,

Welcome to the third post of the building a Chrome extension MVP series.

Last time, I figured out how to inject an HTML code to any web page I want.

Today, I want to make significant progress and achieve an important feature of my Chrome Extension MVP. And that is the ability to call a remote API and fetch the data by using jQuery Ajax. So let's get into it.

Add API URL To Manifest Permissions

First, let's edit manifest.js and configure it to allow a connection from a remote API. Since I don't a remote API developed, I will use a dummy API at https://jsonplaceholder.typicode.com/ as a replacement.

I add the URL of the API to permissions configuration like so.

"permissions": [
    "https://jsonplaceholder.typicode.com/"
]

Add AJAX Get Method

Then in insert_html.js file, add an Ajax code, that will call our dummy API.

$.ajax({
    type: 'GET',
    url: "'https://jsonplaceholder.typicode.com/todos/1'",
    success:function(data){
        console.log(data);
    }
});

Reloading chrome extension in the Extensions tab reveals an error.

jquery-3.4.1.min.js:2 (anonymous function)

Uncaught TypeError: Cannot read property 'defaultValue' of null

Uncaught ReferenceError: $ is not defined 

A mysterious error, that says nothing. Looking at the developer console helps me to find out the root cause.

<p><b>404.</b> <ins>That’s an error.</ins>
<p>The requested URL <code>/'https://jsonplaceholder.typicode.com/todos/1'</code> was not found on this server.  <ins>That’s all we know.</ins>

API could not be reached because of the typo in the URL. So I remove the slash in front of the URL path and try to reload extension one more time.

This time, I get a 200 response, which tells me that the URL works, but the response body is empty.

There is nothing I can do from my side and the only way out is to try another dummy API. The second google search result points to the http://dummy.restapiexample.com/api/v1/employees so let's try that.

Unfortunately, the response returns 500. Something is wrong with the server.

I won't waste time troubleshooting and try the next dummy API I find, https://reqres.in/api/users?page=2. Maybe it will be a lucky one.

To be 100% sure, I will append response content to the google search bar.

$.ajax({
    type: 'GET',
    url: "https://reqres.in/api/users?page=2",
    success:function(data){
        $(".RNNXgb").append(data);
    }
});

Reloading the chrome extension show nothing on google.com. Maybe I need to stringify the JSON response?

$.ajax({
    type: 'GET',
    url: "https://reqres.in/api/users?page=2",
    success:function(data){
        $(".RNNXgb").append(JSON.stringify(data));
    }
});

Yes! It works!

The Next Steps

In just three days, I achieved 80% of the core functionalities my Chrome Extension MVP should have. Fetch the data from the remote API and insert it into currently opened web page.

That's it. Nothing complicated.

What lies ahead is developing the rest, the remaining 20%, which will take 80% of the total development time. I am not sure yet if want to bore you with documenting my progress when working on Flask backend and HTML front-end.

Maybe when I face an interesting challenge along the way. We will see. See you in the next post!