How to build a Chrome Extension to analyze the text as you write


Not long ago, I started writing on Medium as a part-time gig to alternate with my freelance work. Not being a native English speaker, I found using chrome extensions like Grammarly really helpful. (In case you don’t know it yet, it is a digital writing tool that uses artificial intelligence and natural language processing to help with grammar checking, spell checking, plagiarism detection and suggestions about clarity, formality, tone, and vocabulary). Anyway, I don’t use all of its features because it has different plans (Free, Premium for individuals and Premium for business) or at least I didn’t have the necessity of using those features yet. So I thought of developing my own chrome extension implementing only the features I need, in order to learn the possibilities this technology offers.

Extensions are not only for Google Chrome though. Other popular browsers like Microsoft Edge and Mozilla Firefox support extensions as well, but extensions are the same for everyone: they are small applications built using HTML, CSS, and JavaScript, packaged in a specific way along with configuration files.

They need to follow the Web Extension API standard, which is supported by Chromium-based browsers such as Google Chrome, Microsoft Edge, Mozilla Firefox, and Microsoft Edge.

What’s a Chrome Extension for?

Chrome extensions are not only for text analysis. They can interact with the tabs of your Chrome browser using permissions, detect URL matches, inject code (HTML, JavaScript, CSS for example), do API calls, and so on.

If we give a look to the Chrome Web Store, we can check all the different categories:

Image for post

Categories on the Chrome Web Store

What are we going to build?

We will build an extension to count words and characters on a text field or input as we type, and to calculate the total of money you will gain (For freelance writers, for example) setting the price per word (PPW). We will call it ChETA, which stands for Chrome Extension for Text Analysis, which in my native Argentina means cool/awesome.

Our extension will look like the following, while opened from the Extensions tab:

Image for post

We will ask the user to locate the input he wants to use. Then, he will need to write _ _(add it anywhere on the input or replacing the content, it’s the same) on it and click Start. Optionally, he will be able to set a price per word (PPW from now on).

For example, on Google’s input:

Image for post

Preview: Before clicking Start on ChETA

And when clicking Start, we will inject into the page HTML code the things we need to start listening inputs change using a floating container:

Image for post

Preview: After clicking Start on ChETA

Extension Architecture

Extensions are made of different components that interacts with each other. Components can include background scriptscontent scripts, an options pageUI elements, and various logic files. Extensions components are created with web development technologies: HTML, CSS, and JavaScript. An extension’s components will depend on its functionality and may not require every option.

  1. manifest.json: Describes what’s in the source package. It defines where the browser could find the background, content script, popup, and options pages. It also describes the permissions required by the extension (For example to allow the extension to check all tabs, only current tab, use storage, and so on)
  2. background.js: A script or piece of code that is launched when the extension starts, and won’t be terminated until the extension is removed or the browser shutdowns. This file has access to all chrome APIs, and other parts are limited to it. This script does not include a UI and does not have access to the DOM.
  3. popup.html: The UI which is displayed when the user clicks on ‘Browser Action’, which is the button right to the browser address bar where the extensions are located. Most extensions need a popup as entry, but they can also be developed to be called using right-click on pages.
  4. options: It’s an optional part of the extension, which not all extensions include. It is used as a configuration UI for the extension, in order to enable multiple views.
  5. content script: A script or piece of code that runs in a tab with a specific URL pattern, defined in manifest.json. If the URL matches with the manifest description, the browser will launch the content script. It will be terminated when the URL changes or when the tab closes. It is needed to manipulate the DOM.
  6. URL matching can be useful when we need to launch our script on specific URLs or specific instances of a web flow.

For this tutorial, we will use React.js to build the extension. The source code is available on Github ( to follow along.

Let’s build the extension

First, we will create the react app and remove unnecessary files we won’t use:

npx create-react-app cheta-extension
cd cheta-extension/
cd src/
rm -rf setupTests.js serviceWorker.js logo.svg index.css App.test.js App.js App.css

We will install node-sass, which is not mandatory but it will help us write quicker CSS code:

npm i node-sass — save

Now we will replace the manifest.json located in the **public/ **folder, which is related to React.js, for the following code corresponding to the manifest.json concept explained above:

 “name”: “ChETA: Chrome Extension for Text Analysis”,
 “version”: “1.0.0”,
 “manifest_version”: 2,
 “description”: “ChETA: Chrome Extension for Text Analysis”,
 “icons”: {
 “512”: “logo512.png”
 “permissions”: [“activeTab”],
 “browser_action”: {
 “default_icon”: “logo512.png”,
 “default_popup”: “popup.html”

_Note: The logo512.png file can be found on the repository: _Link here

As explained before, the initial point of a Chrome Extension should be a popup.html, so we will create a build script to rename our index.html generated by React build to popup.html.

#programming #software-development #productivity #google #react

What is GEEK

Buddha Community

How to build a Chrome Extension to analyze the text as you write

OpenCV putText() - Writing Text on Images

Hello fellow learner! In this tutorial, we will learn how to write string text on Images in Python using the OpenCV putText() method. So let’s get started.

Table of Contents

What is the OpenCV putText() method?

OpenCV Python is a library of programming functions mainly aimed at real-time computer vision and image processing problems.

OpenCV contains putText() method which is used to put text on any image. The method uses following parameters.

  • img: The Image on which you want to write the text.
  • text: The text you want to write on the image.
  • org: It is the coordinates of the Bottom-Left corner of your text. It is represented as a tuple of 2 values (X, Y). X represents the distance from the left edge and Y represents the distance from the top edge of the image.
  • fontFace: It denotes the type of font you want to use. OpenCV supports only a subset of Hershey Fonts.
  • fontScale: It is used to increase/decrease the size of your text. The font scale factor is multiplied by the font-specific base size.
  • color: It represents the color of the text that you want to give. It takes the value in BGR format, i.e., first blue color value, then green color value, and the red color value all in range 0 to 255.
  • thickness (Optional): It represents the thickness of the lines used to draw a text. The default value is 1.
  • lineType (Optional): It denotes the type of line you want to use. 4 LineTypes available are
  • LINE_4
  • LINE_8 (Default)
  • bottomLeftOrigin (Optional): When true, the image data origin is at the bottom-left corner. Otherwise, it is at the top-left corner. The default value is False.

#python modules #opencv #opencv puttext() #writing text on images #opencv puttext() - writing text on images #puttext() - writing text

Arvel  Miller

Arvel Miller


9 Chrome Extensions To Make Your Life Easier

It’s 2021 and I am brought here some fresh new chrome extensions. And no, I will not be covering popular ones like Grammarly, uBlock Origin, Dark Reader, etc.

#chrome-extension #google-chrome #chrome #web-development #developer

Adam Jaco

Adam Jaco


How to Build Your First Chrome Extension in 5 Minutes


The Chrome web browser is very extensible. It seems like there is a plugin for just about everything you could ever possibly want.

Have you ever wanted to create your own Chrome extension? Have you ever wondered how difficult the process would be? Well, it turns out it is a lot easier than you ever imagined.

Image for post

source: My Computer

What is a Chrome Extension?

A Chrome extension is just some HTML, CSS, and JavaScript that allows you to add some functionality into the Chrome browser through some APIs.

Let’s get started!

#development #javascript #chrome #programming #chrome-extension

Dock  Koelpin

Dock Koelpin


Step-by-Step Guide to Building and Launching your Chrome Extension

While building my first chrome extension, Foragear- Quick Search Tool, I struggled to find an article that covered the entire ideating, building, and launching process of chrome extensions. To make the lives of future chrome extension builders easier, here is an all-in-one guide to help you through the process.

Hopefully, this saves you the time of looking through and synthesizing information from multiple articles.

The article is broken down into the following sections:

  1. Ideating: why Chrome extensions and what to build
  2. Building: viewing the code of similar extensions
  3. Building: Chrome extension architecture
  4. Building: Chrome APIsBuilding: testing and troubleshooting
  5. Launching: navigating the chrome web store submission process

Without further ado, let’s dive right into it.

Ideating: Why Chrome Extensions?

Ease of development- A key advantage of building browser extensions is its low barrier to entry. For beginner coders, extensions are generally easier to develop as compared to mobile applications or websites that deliver similar functionality and value.

Personally, a chrome extension was my first ever ‘live project’ and I completed the ideation, building, and launching process within 2 weeks as a beginner.

**Extent of reach- **From the graph below, it is clear that Chrome beats other browsers by a large margin in market share. To maximize the number of users that can download and use your browser extension, it therefore makes the most sense to build for Chrome. Once launched, your extension would be available for download by all Chrome users on the Chrome Web Store.

Why not just launch it on all browsers? That is possible, but you ultimately have to start with one browser, and chrome looks like the best bet. It is also important to note that while extensions may be adapted to work in different browsers, the codebase cannot be copied wholesale and may require significant editing.

If your application makes extensive use of browser-specific APIs, it would be a hassle to adapt it for another browser. Not all browsers may have corresponding analogous API with similar functionalities that you can tap into, and even if such APIs exist, the API functions may look slightly different.

#learning-to-code #software-architecture #web-development #chrome-extension #chrome #coding #tutorial #javascript

Daron  Moore

Daron Moore


Hands-on Guide to Pattern - A Python Tool for Effective Text Processing and Data Mining

Text Processing mainly requires Natural Language Processing( NLP), which is processing the data in a useful way so that the machine can understand the Human Language with the help of an application or product. Using NLP we can derive some information from the textual data such as sentiment, polarity, etc. which are useful in creating text processing based applications.

Python provides different open-source libraries or modules which are built on top of NLTK and helps in text processing using NLP functions. Different libraries have different functionalities that are used on data to gain meaningful results. One such Library is Pattern.

Pattern is an open-source python library and performs different NLP tasks. It is mostly used for text processing due to various functionalities it provides. Other than text processing Pattern is used for Data Mining i.e we can extract data from various sources such as Twitter, Google, etc. using the data mining functions provided by Pattern.

In this article, we will try and cover the following points:

  • NLP Functionalities of Pattern
  • Data Mining Using Pattern

#developers corner #data mining #text analysis #text analytics #text classification #text dataset #text-based algorithm