Hello!

> 

Hi! I am Moiz Sohail

Thought I should get myself a nice place to share my projects. So here it is. If you like my works hit me up and then we can work on something great together.

Contact Me Here

Portfolio

Checkout a few of my projects

Startup

Vlancer

A freelancing platform for university students to make some extra bucks.

Android

DementiaCare+

Pakistan's first ever assistant for dementia caretakers.

Tensorflow

MemeCleaner

No more full storage and no more sitting on your phone for hours cleaning up you gallery. Meme cleaner does it for you

Services

My capabilities

    Flutter Development

    2 Projects

    Nuxt/Vue Development

    3 Projects

    Wordpress

    3 Projects

    Next/React Development

    3 Projects

    Writing

    My Blogs

    Chrome Extension In React With NPM Modules: Part 3

    Welcome to the final part of the series Chrome Extension In React With NPM Modules. Do go over Part 1 and Part 2 before continuing. Adding Our MooModule Let’s update our Home.tsx. I have added comments to highlight any new changes. https://medium.com/media/d8a2e15eeeb52c8159b6c461c3bd76da/hrefFinally, update your content.ts https://medium.com/media/857e460cc4fbb70141de3b0d3e819246/hrefIf in case, you are getting Use compiler option ‘ — downlevelIteration’ to allow iterating of iterators just goto tsconfig.json and change the target key to “es6”. Now build your app. You may have to reload the extension from the extensions tab and even reload the page to inject the new content script. I tried it on this page. Just Some Bonus Let’s try to add connect our keyboard shortcut with our content script. In the previous article if you remember we added the following lines in the background.ts. https://medium.com/media/d4258ff1ac2343ca18c895f6aee70468/hrefWhat this does is it listens for any keyboard command described in the manifest.json and handles its execution by sending a message to the content script. Before we go further, I thought I should introduce the concept of persistence in the chrome extension. The API for this is chrome.storage.sync.set and chrome.storage.sync.get. Their functionality is pretty self-descriptive so I won’t delve deeper into it. Now let’s update our content.ts. https://medium.com/media/6f43fa6611346c46e16d2df0770a5f60/hrefGreat! Now our extension remembers the last executed text. If we punch in the keyboard combination it will execute our mooExtension. If the shortcut doesn’t work, go to chrome://extensions/shortcuts and see if the shortcut is set. If not it’s probably taken up by something else in your system. Update it with the new shortcut. And try it on the image below. We’re Done https://medium.com/media/d815a5dd6cf409869c93c78377ce08ab/hrefThe Potential Now whenever I learn something, I always think in terms of what you can actually build. For me, it was just automating a couple of forms so that I do not have to fill them in again and again. Or maybe a tool that remembers your current progress of your favorite anime on some streaming site in case if you come back to it months after. If you are looking for something complicated, you can try integrating it into your desktop python application. Just like IDM. The possibilities are endless. Full code is here also check out my portfolio while you’re at it. Chrome Extension In React With NPM Modules: Part 3 was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

    Chrome Extension In React With NPM Modules: Part 2

    Welcome back, this is part 2 of the previous article Chrome Extension In React With NPM Modules: Part 1. https://medium.com/media/2f961d262e0e6fc91e05072c2f6b6c9a/hrefLet’s Go Let’s get the dependencies ready. npm i @rollup/plugin-typescript --save-devnpm i @rollup/plugin-node-resolve --save-devnpm i rollup @types/chrome --save-dev Our Rollup Config Add the following piece of code to the root directory of your project. This is the rollup config that will tell our rollup bundler what files to bundle. This is an important piece of code. And, I think it’s best if we can spend some time on it. https://medium.com/media/bd45953747adc6fd58455e57d6485018/hrefAccording to our config file, our bundler takes in content.ts and background.ts and converts them into content.js and background.js. But what’s iife? And what’s nodeResolve in the plugins? Calm down. One at a time. Firstly there are different ways to format a file using rollup. And one of them happens to be iife. iife – A self-executing function, suitable for inclusion as a <script> tag. (If you want to create a bundle for your application, you probably want to use this.). "iife" stands for "immediately-invoked Function Expression" Still don’t get it? Basically, if you have a content.ts file and it is importing certain helper functions from say helper.ts. The imported functions in the helper.ts will all be bundled into one big file. That’s it. This is where nodeResolve comes in. In our case, what happens if we try to import cowsay.js from the node_modules directory, it will be unable to do so. The nodeResolve plugin allows the rollup to find these npm modules and, with the help of iife, bundles it all up into one giant ball of code. Tada! That’s the secret. The Barebones Create a file called type.ts your src directory. https://medium.com/media/bf5011c2fd0c3c6f2329fac1c6bef063/hrefCreate a folder called chrome in the src directory and place the content.ts file in it. https://medium.com/media/3e6cb166b47f9e0bd5611827e488f085/hrefIn the same directory create background.ts. We will be using this to handle keyboard shortcuts. https://medium.com/media/953d7cd21d623f1d7f2a43a9bd922801/hrefYou will be getting an exception Cannot find module ../messaging. Add this in the src directory as messaging.ts. This is just a helper function I created to allow for communication with content_script. https://medium.com/media/75c66592fd5d5f64f1e93c7e15003e47/hrefWait? What communication? I don’t know if you have noticed this by now but there is a clear boundary for each script. Background script handles some stuff and has access to some stuff. And content script handles and accesses something else as well. All of these scripts work together to make up a chrome extension. And for that, they need to communicate with each other. Going back to the piece of code in messaging.ts, let’s give you some insight into it so that you can modify it according to you. Since the content script lives in each tab, our background script queries for the active tab and sends the message to the respective content script. Moving on, let’s update our manifest.json to tell the script where the content and background script are. https://medium.com/media/70cb21a231054028fed7e4f87ad16099/hrefAlso, don’t forget to add && rollup --config rollup.config.js in the build script. The build script will look like the following piece of code. "build": "INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false react- scripts build && rm -rf dist/* && mv build/* dist && rollup --config rollup.config.js", This isn’t the best way to write a script. Well, a better way to write it will be to put this all in a separate file and just run that from there. I just don’t want you to worry about that for now. You can do that later onwards as you start building your own extensions. After this, just build the code and check if there aren’t any errors during the build process. It’s time for Part 3 This is the final part where we will complete our extension. If you don’t intend to learn how to integrate our Mooo Module you are good to go. But if you are interested and want to learn a thing or two, do go over part 3 of this series. I will be covering topics like persistent storage that might prove helpful. Full code is here also check out my portfolio while you’re at it Chrome Extension In React With NPM Modules: Part 2 was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

    Chrome Extension In React With NPM Modules: Part 1

    Chrome extensions have become a part of our lives and they simplify a lot of tasks. Still, the resources on it are still very limited. Most of the tutorials out there cover building extensions with vanilla Javascript. This greatly limits the scale and flexibility of these extensions. So in this tutorial, we will be learning about how to build our chrome extension with React. But then again, you must be wondering how is this article any different from the numerous how to get started on “Chrome Extension With React”. For starters, I will teach you how to integrate your favorite node modules directly into your extension. I have been able to do this after scrounging the internet for several days, and so I thought I should share what I learned. https://medium.com/media/cb5bc396a8da1121cfd4c90d0067b89d/hrefThe Prerequisites Before we begin, you need to be aware of how popup, content_script, and background_script interact with each other to make up a chrome extension. If you don’t please check out this Traversy Media’s video. Besides, there are plenty of videos on youtube that you can check out to get started. Moreover, you need a basic understanding of React before you begin with this tutorial. Key Components There are three components that make up a chrome extension: Content Script, Background Script (now known as service workers), and popup. Popup This is something most of us are familiar with. This is basically the small container that pops up whenever you click on the icon near your extension area. This is something that we can easily create with ReactJs. Not just that, integrating NPM modules like bootstrap and fakerJS in this part is very easy. Example of the Popup: Adblock PopupContent Script This is the piece of code that is injected into your current tab. For example, in the Twitter page below, if you want to change the background color or maybe fetch the usernames, the content script is the only part of your chrome extension that is able to do so. Photo by Luke Chesser on UnsplashBackground Script The background script is the place where you want to run long-term tasks. For example, a timer functionality that you want to execute irrespective of the page you are on. Another functionality that the background script offers is the ability to handle keyboard shortcuts. This and the content script is the place where things start to get complicated for our React app. For example, you are trying to create an app that automatically replaces usernames with other fake names. And you know that the best place to get fake usernames is through an npm library called fakerJS. The Npm support in our React app is only limited to the popup file. But obviously, I wouldn’t make you read till here just to tell you this. This is where rollup comes in. Rollup is a javascript bundler and we will use it to combine pieces of code into a larger file. Well, let’s not get overwhelmed. We will tackle all these problems one by one. Getting Started Let’s get our React project ready, npx create-react-app chrome-extension-tutorial --template typescriptcd chrome-extension-tutorial npm install react-bootstrap bootstrap@5.1.3npm i npm-watch We will be building a chrome extension that replaces all tweets with the following cowsay generated art. _________________( I'm a moooodule ) ----------------- o ^__^ o (oO)\_______ (__)\ )\/\ U ||----w | || || I know it’s a bit dumb but it's just to introduce you to the concept of integrating npm modules into your project without getting bogged into details. You can choose whatever library you like for this tutorial. Also, update your public/manifest.json. We will be using the latest manifest version at the time of writing this article. https://medium.com/media/582b6b0a8dd184454ca8c4e3b54b1f21/hrefAlso, update your package.json. https://medium.com/media/c3d4663ce2469f5f943fd98975771c67/hrefNow if you enter npm run build into your terminal it will build a chrome extension. I also added an npm run dev functionality that automatically rebuilds the app when you make any changes to your app. This makes debugging easier. You will have to install Extension Reloader to quickly reload any new changes after build. Adding our extension to chrome Goto extensions tab (just enter chrome://extensions/ as your URL in your new tab) and enable by clicking on the Developer Mode radio button on the top right. You will get these three new options click on load unpacked and navigate to your project. Click select once you have the dist folder in your root directory selected. There you go we have our Mooo Extension ready. Now if you click on this extension. You will get this tiny little popup at the top. If you get till here. Congrats your setup works. Customizing our Popup Update your App.tsx with the following code. https://medium.com/media/f9ebe4cbbbd2a220b5e88ec274cd7571/hrefNow create a folder called components in the src directory and put Home.tsx in it. https://medium.com/media/d2076cd78447bf7ed325dc47154bbf18/hrefAnd finally, clean up your App.css and leave out only the .App class selector. This is where you will decide the size of your popup. Punch in whatever values you need. Results Yay! Our new popup is ready to go. It’s getting too loooong Let’s continue building the rest of the application in part 2. Full code repos if you want to skip to it. Also check out my portfolio too: https://moizsohail.github.io Please let me know if you think you need a video for this. I am thinking about starting a youtube channel, but I need a sufficient audience before I do so. Chrome Extension In React With NPM Modules: Part 1 was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

    Let's Make Something Great Together

    moizsohail@live.co.uk