Category : Do It Yourself , Technology

How to Build a Chrome Extension | Chapter 7: Deploy and Publish your Chrome Extension

How to Build a Chrome Extension | Chapter 7: Deploy and Publish your Chrome Extension

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter by clicking on the links provided at the end of this post. For now, here are the Contents of Chapter 7: Deploying and Publishing a Chrome Extension.

(more…)

Category : Do It Yourself , Technology

How to Build a Chrome Extension | Chapter 6: How to replace images in a website

How to Build a Chrome Extension | Chapter 6: How to replace images in a website

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter by clicking on the links provided at the end of this post. For now, here are the Contents of Chapter 6: Replacing images in any webpage using  Chrome Extension.

(more…)

Category : Do It Yourself , Technology

How to Build a Chrome Extension | Chapter 5: How to replace images with your own images.

How to Build a Chrome Extension | Chapter 5: How to replace images with your own images.

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter by clicking on the links provided at the end of this post. For now, here are the Contents of Chapter 5: How to replace images with your own images using Chrome Extension.

(more…)

Category : Do It Yourself , Technology

How to Build a Chrome Extension | Chapter 4: Replacing paragraph text with user-given text

How to Build a Chrome Extension | Chapter 4: Replacing paragraph text with user-given text

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter by clicking on the links provided at the end of this post. For now, here are the contents of Contents of Chapter 4: Replacing paragraph text with user-given text using Chrome Extension.

(more…)

Category : Do It Yourself , Technology

How to Build a Chrome Extension | Chapter 3: Changing background color of a paragraph

How to Build a Chrome Extension | Chapter 3: Changing background color of a paragraph

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter by clicking on the links provided at the end of this post. For now, here are the contents of Contents of Chapter 3: Changing the background color of a Paragraph in Chrome Extension.

(more…)

Category : Do It Yourself , Technology

How to Build a Chrome Extension | Chapter 2: Bookmarklets

How to Build a Chrome Extension | Chapter 2: Bookmarklets

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter by clicking on the links provided at the end of this post. For now, here are the contents of Chapter 2: Bookmarklets

Contents

What is a Bookmarklet?

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands to help you quickly perform some very common web page tasks. In technical terms, it is an unobtrusive JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page.

Don’t worry if you don’t understand the technical bit. In layman terms, Bookmarklets are simple programs that act in the same way that an app works on your mobile. For example, The Deletionist deletes the text in the page when clicked. 

(more…)

Category : Do It Yourself , Technology

How to Build a Chrome Extension | Chapter 1: An Introduction

How to Build a Chrome Extension | Chapter 1: An Introduction

In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Feel free to skip to any chapter of your liking by clicking on the links provided at the end of this post. For now, here are the contents of Chapter: An Introduction to Chrome Extensions.

 

Contents

What are Chrome Extensions?

Google defines Chrome Extensions as

Chrome Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

In other words, a Chrome extension is just a small software that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes.

Chrome Extensions - Google

Why do you need an extension in chrome?

A Chrome Extension acts as a catalyst that facilitates the completion of a business project by offering additional features and functionality. When you incorporate or develop new extensions for Chrome, it improves the functionality of the browser, making it more personalized while introducing new features to it.

This may also include modification of existing program behavior in order to keep it convenient for users. Businesses using Chrome as one of their default browsers bring much more personalized and results-oriented experience for users, thanks to chrome extensions.

You can visit the Chrome store to find some really useful extensions that are available free for use.

Well-known examples of trusted extensions

Below are a few extensions that are trusted by millions and are very useful indeed

Google Translate

View translations easily as you browse the web. By the Google Translate team. Highlight or right-click on a section of text and click on the Translate icon next to it to translate it to your language. Or, to translate the entire page you’re visiting, click the translate icon on the browser toolbar.

Google Translate - How to build a chrome extension

Grammarly

Grammarly Chrome Extension will make sure your messages, documents, and social media posts are clear, mistake-free, and impactful. Adding Grammarly to Chrome means that your spelling and grammar will be vetted on Gmail, Facebook, Twitter, Linkedin, Tumblr, and nearly everywhere else you write on the web.

Grammarly - chrome extension

Google Keep

Found a webpage, image, or quote that you want to save for later? With the Google Keep Chrome Extension, easily save the things you care about to Keep and have them synced across all of the platforms that you use — including web, Android, iOS, and Wear. Take notes for additional detail and add labels to quickly categorize your note for later retrieval.

Google Keep- chrome extension

Evernote Web Clipper

Use the Evernote extension to save things you see on the web into your Evernote account. Clip the web pages you want to keep. Save them in Evernote. Easily find them on any device. This extension enables you to clip any article or web page, clip to a specific notebook and assign tags
and use Evernote to find clips on any device. Evernote Web Clipper can also be used for highlighting key text from any website or article, using text and visual callouts to draw attention, share and email clips or create a URL link.

Evenote - Chrome Extension

Setting Up The Environment

Prerequisites

Here are a few things that should help you start writing codes for your Chrome Extension right away. Here is a list.

  • Prior Basic understanding of HTML and Javascript.
  • Source Code editing software installed in your computer (I prefer using Visual Studio Code)
  • A folder in any location to store the Chrome Extension files like manifest.json, background.js, popup.html, and so on.

Architecture

An extension’s architecture will depend on its functionality, but many robust extensions will include multiple components:

  • Manifest
  • Background script
  • Content script
  • Options page
  • UI Elements

Manifest

Every extension contains a JSON-formatted manifest file, named manifest.json, that provides important information about the Chrome Extension.

Background Script

The background script is the extension’s event handler. It contains listeners for browser events that are important to the extension. It lies dormant until an event is fired then performs the instructed logic. An effective background script is only loaded when it is needed and unloaded when it goes idle.

Content Script

Extensions that read or write to web pages utilize a content script. The content script contains JavaScript that executes in the contexts of a page that has been loaded into the browser. Content scripts read and modify the DOM of web pages the browser visits.

Content scripts can communicate with their parent extensions by exchanging messages and storing values using storage API

Options page

Just as extensions allow users to customize the Chrome browser, the options page enables customization of the extension. Options can be used to enable features and allow users to choose what functionality is relevant to their needs.

UI Elements

An extension’s user interface should be purposeful and minimal. The UI should customize or enhance the browsing experience without distracting from it. Most extensions have a browser action or page action, but can contain other forms of UI, such as context menus, use of the omnibox, or creation of a keyboard shortcut.

Extension UI pages, such as a popup, can contain ordinary HTML pages with JavaScript logic. Extensions can also call tabs.create or window.open() to display additional HTML files present in the extension.

An extension using a page action and a popup can use the declarative content API to set rules in the background script for when the popup is available to users. When the conditions are met, the background script communicates with the popup to make its icon clickable to users.

That’s all. Now your environment is established and you are ready to code.
In the next chapter, we’ll be learning how to display an alert message using a bookmarklet. Feel free to reach out for any queries.

Summary

Extensions are bundles of codes that can be used to customize Google Chrome browsing experience.

Hope, the introduction to chrome extensions was informative and was able to pique your interest and in coming up with your own extensions. We’ll look at some ways you can do so in the upcoming chapters.

 


Chapter Navigation

Chapter 1: An Introduction to Extensions

Chapter 2: Bookmarklets

Chapter 3: Changing the background color of a paragraph with Chrome Extension

Chapter 4: Replacing paragraph text with your user-given text using Chrome Extension

Chapter 5: Replacing images in a website using Chrome Extension

Chapter 6: Replacing images with your own images using Chrome Extension

Chapter 7: Deploy and Publish your Chrome Extension

Chapter 8: The Atomic Habit Tracker

References

‘Importance of Chrome Extension Development’ https://medium.com/@codeit_llc/the-importance-of-chrome-extension-development-b8cbb9405bf2

‘Definition of Chrome Extensions’ https://developer.chrome.com/extensions

‘Google Translate, Grammarly, Google Keep, Evernote Web Clipper’ https://chrome.google.com/webstore/category/extensions

Category : Technology

Java Spring Boot – Quick look

Java Spring Boot – Quick look

Spring Boot aims to simplify Spring development and it is for all Java developers. Spring Boot has a way of making Spring more approachable even to those new to Spring

Spring Boot makes it easy to create Spring-powered, production-grade applications and services with the absolute minimum fuss. It takes an opinionated view of the Spring platform so that new and existing users can quickly get to the bits they need. (more…)

Category : Blockchain , Technology

Blockchain based Aadhaar – #NationalIdentity

Blockchain based Aadhaar – #NationalIdentity

By now almost everyone in the world is aware of India’s Aadhaar system, the Unique Identifier System that came into existence out of noble intentions but limitations of technology forced them to choose a centralized way of designing and implementing it.

This post is not about how flawed the Aadhar system is or the policy implications of data privacy and surveillance, but an optimistic projection into the future of such identity systems across the globe. (more…)