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!

Share it!

0 0 vote
Article Rating