Connecting Chrome Extension with Python Backend

Chrome Extensions are very useful tools. A popular example is Grammarly, which suggests fix in our writing. There is no doubt there is some kind of Machine Learning magic going in the background to provide us with writing suggestions. As we all know, Python is one of the most used platforms in Machine Learning. So, if we ever want to build a chrome extension with some machine learning functionalities, Python is a great choice for a backend server. In this tutorial, we will see how to connect a chrome extension with Python Backend.

To keep things simple, we will be making a WikiSearch extension that takes a keyword and shows us a summary from Wikipedia. We will follow four simple steps:

1. Set up our (Django) server

We will use Django to build our backend server. We will be directly going into the details of setting up our server, for a more detailed description on Django, you can check out their official tutorial.

Let’s first install the required package. We will be using Wikipedia package to fetch the Wikipedia result.

pip install wikipedia

After setting up our Django environment, Let’s build an application wiki.

python manage.py startapp wiki

We will update the “mysite/urls.py” file so that our application is accessible.

urlpatterns = [
    path('wiki/', include('wiki.urls')),
    path('admin/', admin.site.urls),
]

Our Django server is now ready to go!

2. Build Our REST API

We will be communicating between our Chrome extension and Python Server using REST API. Our simple REST API will work by returning a JSONResponse given a query input. This is the most crucial yet simple part of our whole system.

To start off, we will add a “views.py” file in ‘wiki’ directory. Then, we will add a function that takes a GET request and sends a JSON response with the result fetched from Wikipedia.

Let’s update our “wiki/urls.py” to reflect our changes.

urlpatterns = [
    path('', views.index, name='index'),
    url(r'^get_wiki_summary/$', views.get_wiki_summary, name='get_wiki_summary'),
]

Now it’s time to test if our REST API is working. After running our Django server, let’s navigate to our “get_wiki_summary” page with a query of your wish. I will go with “meme”. My server was running on port 8000, so for my case the url is — http://127.0.0.1:8000/wiki/get_wiki_summary/?topic=“meme”

Query Result of our REST API

So it is working! Let’s now dive into our chrome extension.

3. Set up our Chrome Extension

We will be building a simple extension with a very basic frontend template that takes a text input. Again, we will discuss only the related parts of our tutorial. If you want to understand from core, Codevolution has an excellent series for understanding the basics of Chrome Extension.

Our frontend looks like this -

Our Simple FrontEnd

4. Set up Cross-Origin connection

Each running extension exists within its own separate security origin. To connect with our python server, that lives in our localhost:8000, We need to use Cross-Origin XMLHttpRequest.

Our workflow will be like this -

1. Our popup script will communicate with background script via Message Passing. (line 10)
2. Our Background script will send a GET request to our server with the input keyword and send it back to the popup. (line 12–15)
3. Our popup script will show the server reply as an alert/notification. (line 13–23)

Our basic setup is almost done! The last thing we need is to add Permission to access the Localhost in our manifest file. If you are using any dedicated server for hosting, (for example, Ngrok), you will need to add that in Permission as well.

"permissions": 
[  ...,
  "http://127.0.0.1:8000/",
   ...,  
   ...,   
   ...
]

Now let’s check out if it is working properly! After opening up our frontend, provide a keyword you want to search for. Let’s try “COVID19”, a major concern right now.

Our Query word

And Bingo! We will now be prompted with an alert/notification with our query summary!

Our Extension Alert

Our extension notification

Where To Next…

We have successfully built our very basic chrome extension with a Python Server. Now it is time to use this basic concept for making a full project. The basic idea is the same, we just need to modify our REST API to fit our needs accordingly. Instead of sending back a reply from Wikipedia, you have to use your Machine Learning model output or other related means. The entire code of this tutorial is available here!