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.
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:
Categories on the Chrome Web Store
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:
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:
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:
Preview: After clicking Start on ChETA
Extensions are made of different components that interacts with each other. Components can include background scripts, content scripts, an options page, UI 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.
For this tutorial, we will use React.js to build the extension. The source code is available on Github (https://github.com/juancurti/cheta-extension) to follow along.
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