fluxresource believes in being positive, helpful, and a source of joy in the world. We strive to bring out the best in ourselves and others through our products, which is why we launched [name of your company].
On this blog, you’ll find content that focuses on helping you live your best life. We aim to inspire you and make it clear (in case it wasn’t already) that you are a force to be reckoned with.
If this sounds like what you’re looking for—welcome! You’re in the right place.
Create Chrome Extension For Website
If you are a Google Chrome user, you’ve probably used some extensions in the browser.
Have you ever wondered how to build one yourself? In this article, I will show you how you can create a Chrome extension from scratch.
Table Of Contents
What is a Chrome Extension?
What will our Chrome Extension Look Like?
How To Create a Chrome Extension
Creating a manifest.json file
Conclusion
What is a Chrome Extension?
A chrome extension is a program that is installed in the Chrome browser that enhances the functionality of the browser. You can build one easily using web technologies like HTML, CSS, and JavaScript.
Creating a chrome extension is similar to creating a web application, but it requires a manifest.json file which we will discuss in the last section of this post.
What Will our Chrome Extension Look Like?
covid_report
Latest Covid Report of UK-Chrome Extension
As you can see, the above chrome extension displays the latest data on Coronavirus (COVID-19) in the UK. We will be looking into how to create this extension in this blog post.
Here, we will be using the https://api.coronavirus.data.gov.uk/v1/data API in order to fetch data. We will only display the latest record for the simplicity of this post.
The complete source code of this project can be found on GitHub.
How to Create a Chrome Extension
First of all, we need to create an empty folder where we will add our HTML, CSS, and JavaScript files.
Inside the folder, let’s create an index.html file with this HTML boilerplate code:
Covid-19 Stats- UK
Now, let’s add a link to the Bootstrap CDN in the head tag. We will be using the Bootstrap framework here so that we don’t have to write some extra CSS in this example.
Covid-19 Stats- UK
In the demo, we saw that the records are displayed as a table. So now we need to work on creating a table.
Covid-19 Stats- UK
Covid Latest Report-UK
| Date | Country | Confirmed | Deaths |
|---|---|---|---|
The code above creates a table with a width of 450px. There are four different headings in a table: Date, Country, Confirmed, and Deaths.
Here, you can see that each table data td has been assigned different IDs. We will be using the value of these IDs in JavaScript to update the table data. Also, here we have loaded the JavaScript in the end after loading all the HTML content.
Now, since the table has been displayed, we need to work on writing JavaScript in order to fetch data from the API.
Let’s create a script.js file and add the following code:
async function fetchData() {
const res=await fetch (“https://api.coronavirus.data.gov.uk/v1/data”);
const record=await res.json();
document.getElementById(“date”).innerHTML=record.data[0].date;
document.getElementById(“areaName”).innerHTML=record.data[0].areaName;
document.getElementById(“latestBy”).innerHTML=record.data[0].latestBy;
document.getElementById(“deathNew”).innerHTML=record.data[0].deathNew;
}
fetchData();
Now, let’s break down the above code:
Here we are using the async function called fetchData.
The data is being fetched from the https://api.coronavirus.data.gov.uk/v1/data API.
The JSON data is stored in a variable called record.
The HTML content of td with ids date, areaName, latestBy and deathNew are updated by the corresponding values of API.
If we check the browser, we will be able to see the following result.
covid_browser
Latest Covid Report of UK – Browser Preview
The data is being fetched from the API and it keeps on updating as soon as the data in API changes.
Manifest.json File
As we discussed earlier, building a Chrome extension is similar to building any web application. The only difference is that the Chrome extension requires a manifest.json file where we keep all the configurations.
The manifest.json file contains all the necessary information required to build the Chrome extension. It is the first file the extension checks and everything is loaded from this single file.
Now, let’s create a manifest.json file in the root folder and add the following code:
{
“name”: “Covid-19 Stats UK”,
“version”: “1.0.0”,
“description”: “latest covid data of UK”,
“manifest_version”: 3,
“author”: “Sampurna Chapagain”,
“action”:{
“default_popup”: “index.html”,
“default_title”: “Latest Covid Report”
}
}
Manifest.json
Our manifest.json file contains the value of name, version, description, manifest_version (3 in this case, which is the latest manifest version), author, and action fields. In the action field, there’s the value for default_popup which contains the path to the HTML file which is index.html in this example.
You can have a look here to see all configurations of a manifest.json file.
Now, since we’ve also added the manifest.json file we are ready to add this project as an extension in our Chrome browser.
For that, we need to go to Select More Tools and then choose Extensions from the browser menu as shown in the picture below:
Untitled-design–1-
Navigating to extensions in Chrome
After choosing Extensions, it redirects to the extensions page in Chrome. Make sure to enable the Developer mode here.
Untitled-design–1–1
Once that’s done, you need to click the Load unpacked button which will allow us to load our project in the Chrome extension store.
Now, the extension is available in our Chrome extension store. You can also pin the extension in the browser as shown in the gif below:
pin_extension
Pin extension to the browser
This extension works only in your browser. If you want to publish it on the Chrome Web Store, you can follow this link.
Conclusion
If you have some HTML, CSS, and JavaScript knowledge, you can easily build Chrome extensions. I hope after reading this blog post, you will create some cool extensions.
how to create chrome extension using python
Google Chrome extension created with Python (serverless, method B). (click to zoom)Google Chrome plugins are written in HTML, JavaScript and and CSS. If you have never written a Chrome plugin before I suggest chrome extensions documentation
You can use Python instead of JavaScript and in this tutorial we will show you how to do that.
In a hurry? Download the code from this site:
Download Extension Code
(and scroll down to Method B)
Create an Google Chrome Plugin
To start, we will have to create a manifest file: manifest.json.
| { “manifest_version”: 2, “name”: “Python Chrome Plugin”, “description”: “This extension runs Python code.”, “version”: “1.0”, “browser_action”: { “default_icon”: “icon.png”, “default_popup”: “popup.html” }, “permissions”: [ “activeTab”, “https://ajax.googleapis.com/” ] } |
Create a file called popup.html
| <!doctype html> <!– This page is shown when the extension button is clicked, because the “browser_action” field in manifest.json contains the “default_popup” key with value “popup.html”. –> <html> <head> <title>Getting Started Extension’s Popup</title> <style> body { font-family: “Segoe UI”, “Lucida Grande”, Tahoma, sans-serif; font-size: 100%; } #status { /* avoid an excessively wide status text */ white-space: pre; text-overflow: ellipsis; overflow: hidden; max-width: 400px; } </style> <!– – JavaScript and HTML must be in separate files: see our Content Security – Policy documentation[1] for details and explanation. – – [1]: https://developer.chrome.com/extensions/contentSecurityPolicy –> <script src=”popup.js”></script> </head> <body> <div id=”status”></div> <img id=”image-result” hidden> </body> </html> |
Finally get an icon and save it as icon.png. Open chrome://extensions and press developer mode. Press “load unpacked extension”, select your directory and press ok.
Adding Python to the Chrome extension
We have two options to add Python into a chrome extension:
- Method A: Include Brython in an iframe (requires server)
- Method B: Compile Python to Javascript using Rapydscript (best, serverless, pure extension.)
Method A: Python (Brython) in iframe
Now that you have the basics right we can add Python to the code. To run Python in the browser you have several options including Brython and emcascripten. We decided to give Brython a try. We will run the Brython script from a server. Change popup.html to:
| <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> <meta charset=”iso-8859-1″> <style> body { margin: 0 !important; padding: 0 !important; width: 800; } #frame { overflow: hidden; width:790; height:324; } </style> </head> <body onLoad=””> <iframe src=http://brython.info/console.html id=”frame” seamless=”seamless” scrolling=”no”></iframe> </body> </html> |
Once you restart your plugin you will have a Python (Brython) interpreter inside your Google Chrome.
<caption id=”attachment_483” align=”alignnone” width=”1000”]
Python inside Google Chrome
Running your own scripts
To run your own script simply change the url inside the popup.html frame:
| <iframe src=”BRYTHON SCRIPT URL” id=”frame” seamless=”seamless” scrolling=”no”></iframe> |
The script should run on your own server. You can run any Brython script from the web. Using Brython you can simply type Python code inside the script tags. Have a look at this Brython examples or simply browse the gallery.
Method B: Compile Python to Javascript. (no server, pure extension)
There are several tools to compile Python to Javascript. Rapydscript works fine, Pyjs does not work well with chrome (requires special parameter on start).
Install Rapydscript with:
sudo apt-get install npm sudo ln -s /usr/bin/nodejs /usr/bin/node sudo npm install rapydscript |
Download the code from this site:
Download Extension Code
Change the file /src/hello.py to you needs:
# Example Python script # (for rapydscript, a python to javascript compiler) #def doHelloMessage(): # alert(‘hello’) #doHelloMessage() # modify html page document.getElementById(“result”).innerHTML = ‘Compiled Python script in Chrome’ # write into log console.log(‘hello from python’) |
Run:
./make.sh |
You can find your extension in /compiledpythonextension/. Load it in chrome as unpackaged extension and see it working 🙂
Concluding:
Chrome plugins are created using HTML, JavaScript and CSS. We can use Python to create normal Chrome extensions using a Python to Javascript compiler (Rapydscript).
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines