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.
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.
We have two options to add Python into a chrome extension:
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.
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.
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
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 :-)
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).
Leave a comment and share if you liked it
#python #rapydscript #chrome plugin