Build your own Chrome Extension
A small side project, 30th Jun 2022
Identifying the need!
We all wish to build our own programme or software. Perhaps leaving a mark or a footprint are goals for those to love to code! However, there must be a purpose in every act we make. Thus, a software (in our case a Chrome Extension) should have purpose and not just a random chunk of codes.
One day, I found out that my girlfriend, Emily is not hydrating herself enough. In fact, she drank only a single cup of water in a single day. I realised that there was a Chrome Extension released called Release
Modern HTML/CSS/JavaScript are very powerful tools to create contents, introduce innovations and communicate in the world wide web. Today I want to introduce the new and alternative tool called PyScript that was developed by the Anaconda Engineers in 2022. Although it is still an early stage, this tool comprises of amazing features that will surprise you. Let's find it out!
What is PyScript?
PyScript is a front-end framework developed to integrate Python and web. As you all know, Python is a prgramming language that has a fascinating and easily understandable syntax being loved by a huge community. With increasing usage of Python in the field of machine learning and data science, we were however, not able to utilise Python in the browser. This amazing PyScript aims to bring all of the features of Python into the our browser. Hence, this framework allows users to create rich Python applications in the brower using HTML's interface and powered by Pyodide, WASM, and modern web technologies.

- Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration
- Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
- Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
- Environment management: Allow users to define what packages and files to include for the page code to run
- Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
- Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python

To fully utilise PyScript, we first need to import the JavaScript file into our HTML document. (You can import these two lines below!)
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
However, does this mean PyScript is running on JavaScript? Not really! It works by Pyodide and WebAssembly. Pyodide is a Python distribution for the brower and it is a port of CPython, which is an interpreter of Python but compiled to WebAssembly. Since WebAssembly is a binary code format, browsers could also understand as well. So Python is using WebAssembly to embed a CPython interpreter in the browser and this allows Python communicate with HTML.
#1st Method
<py-script>
print("Hello World")
<py-script>
#2nd Method
<py-script src="/python-file.py"><py-script>
Alternatively, we can directly load Python REPL (Read Eval Print Loop) into HTML!
<py-repl id="my-repl" auto-generate="true">
print("Hello World")
</py-repl>
Examples
This is a Panel KMeans Clustering Demo that was embedded and coded by PyScript & Katana ML.
You can find more examples are available at https://pyscript.net/examples/.
My Thoughts on PyScript
PyScript was only developed 3 months ago and remain in an early stage of its application. As you noticed from above, it takes some time to load on the browers and not the best choice for heavy computation processes. Despite the limitations, many of us, including myself have been waiting for this feature to be released. I strongly believe that all of us are currently appreciating this framework and sending gratitude towards the Anaconda Team. Now it possess humongous potential to bring changes in the front-end developer community as well as the machine learning / data science communities. Especially in academia, researchers can employ PyScript to display their ML projects using visualisation tools or output the results of their code. Thus, making AI and ML more powerful. Perhaps we could utilise this in the Web 3.0 framework in the future one day!
For more information and new updates please visit the official website of PyScript!