DEV Community: Ganesh Jaiwal

JavaScript Strings

Ganesh Jaiwal — Thu, 12 Nov 2020 14:26:11 +0000

Every programming language has a set of data types that they support.
JavaScript also has datatypes that I explained in this article.

The most used data types are Numbers and Strings/text.

I already covered Numbers in detail in the previous article .

In this article, we will see strings/text datatype of JavaScript in detail.

So what if you want to store your name in some variable, it will be hard to store each character in a separate variable or storing all character in an array.

C language uses an array of characters to represent a string.

JavaScript provides a separate Data type to represent a sequence of characters i.e. String.

What is a string in JavaScript?

The string is an immutable sequence of 16-bit values, each of which represents a Unicode character.

JavaScript’s strings(and it’s array) use zero-based indexing.
The first 16-bit value is represented at position 0, the second 16-bits at position 1, and so on.

So what is the length of the string then?

JavaScript string length is calculated as the number of 16-bit values it contains.

Note:-

JavaScript doesn’t have a specific data type to represent a single 16-bit value.
It will be represented as a string of length 1.

Javascript uses the UTF-16 encoding of the Unicode character set.
The most commonly used Unicode characters are fit into 16-bit and can be represented by a single element.

Unicode characters that don’t fit into 16-bit are encoded using rules of UTF-16 as a sequence(known as “Surrogate pair”) of two 16-bit values. This means JavaScript string with a single character may return length as 2.

Example:-

let dollar = “$”;
let emoji = “🤘”;
dollar.length;       // 1
emoji.length;       // 2

In ES6 if we iterate string with for loop it considers 2 16-bit values as a single character if it is “Surrogate pair”.

String Literals

To use strings directly into the JavaScript program, simply enclose the characters of the string within a matched pair of single/double-quotes.
In ES6 JavaScript provided backticks(`) to represent a string in a simpler way.

Examples:-

‘Hello Devs’ “I’m Ganesh.”

The original version of JavaScript required string literals to be written on a single line. And to create a long string it is common to concatenating string using the + operator.

As of ES5, you can break the string into multiple lines by adding a backslash() at the end of the line.

The ES6 made it easier for devs to write a string into multiple lines with backticks, without adding any special characters like(\n).

Examples:-

“Long \ string \ With ES5”

Escape Sequence in String Literals

The backslash character () has a special purpose in Javascript strings. Combined
with the character that follows it, it represents a character that is not otherwise representable within the string.

The backslash () allows you to escape from the usual interpretation of the single-quotes character. Instead of using it as the end of the string, you use it as a single quote.

Example:-

‘Hello, dev\’s you\’re Awesome.’ // => Hello, dev’s you’re Awesome.

A table that represents JavaScript escape sequence.

Working with string

If we use the + operator with numbers it adds them, but using the + operator on string results in concatenating 2 strings.

let text = “Hello ” + “world!!!!”;

A string can be compared with ===(equality) or !==(inequality) operators, two strings are equal if they consist of exactly the same sequence of 16-bit values.

A string can also be compared with the <, <=, >, and >= operators.

String comparison is done simply by comparing the 16-bit values.

As I mentioned before the length of a string is the number of 16-bit values it contains.

JavaScript provides a rich API for working with string.

`
let str = "Hello, JavaScript Lovers.";

// Getting portion of the string
str.substring(1, 8); // "ello, J" charates from 1 to 8
str.slice(1, 8); // "ello, J" charates from 1 to 8
str.slice(-4); // "ers." last 4 characters
str.split(','); // ["Hello", " JavaScript Lovers."]

// Searching a string
str.indexOf('J'); // 7 Position of first “J”
str.indexOf('44'); // -1 “44” not present in str
str.lastIndexOf('l'); // 3 Position of “l” from last

// Searching function of ES6 and later
str.startsWith('He'); // true Checks if string starts with “He”
str.endsWith('He'); // false Checks if string ends with “He”
str.includes('JavaScript'); // true Checks if string contains “JavaScript”

// Modifying string
str.replace('JavaScript', 'tea'); // "Hello, tea Lovers." Replaces the maching part of string
str.toLowerCase(); // "hello, javascript lovers." Converts string to lower case
str.toUpperCase(); // "HELLO, JAVASCRIPT LOVERS." Converts string to upper case

// Inspecting individual 16-bit characters of string
str.charAt(0); // “H” Returns character at position 0
str.charAt(str.length - 2); // “s” Getting 2nd last character of string
str.charCodeAt(0); // 72 16-bit number at position 0
str.codePointAt(0); // 72 ES6 - this world for codepoints > 16-bits

// String padding functions in ES2017
"xyz".padStart(6); // " xyz" add spaces on the left of string and make length 6
"xyz".padEnd(6); // "xyz " add spaces on the righ of string and make length 6
"xyz".padStart(6, "#"); // "###xyz" add # as padding
"xyz".padEnd(6, "#"); // "xyz###" add # as padding

// Space trimming functions trim() of ES5 and others from ES2019
" xyz ".trim(); // "xyz" Removes empty spaces from start and end
" xyz ".trimStart(); // "xyz " Removes empty spaces from start
" xyz ".trimEnd(); // " xyz" Removes empty spaces from end

// More string methods
str.concat("!!"); // "Hello, JavaScript Lovers.!!" Same as + operator
"=".repeat(5); // "=====" Repetes characters n times

NOTE:-

JavaScript Strings are immutable. Methods like replace() or toUpperCase() returns new string with resulting value.

Template Literals

In Es6 and later, strings are represented using backticks.
let str =Hello there.;
This is more than just another string literal syntax.

Template literals can include arbitrary javascript expression. The final value of string literal in backtick is computed by evaluating any included expression, converting the values of those expressions to a string.

Example:-
Addition of 2 + 4 is ${2 + 4}.// "Addition of 2 + 4 is 6."

That’s it for the strings in JavaScript.

I hope you liked this article.

In the next article of this series, I will be covering Expressions and operators part-1.

Hope you like it, if yes **like & share.**

Thanks for your time.

Happy coding….

← Numbers in JavaScript

Numbers in JavaScript

Ganesh Jaiwal — Wed, 04 Nov 2020 11:06:01 +0000

To represent numeric value in javascript we need to use numbers.

As I mentioned in my previous article(Types Values and variables in Javascript) we need to use specific data types to store specific values.

In our case, if we want to store some numeric value we need to use a number data type.

JavaScript represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard.

The JavaScript number format allows us to represent all numeric values between, -9,007,199,254,740,992 (-2⁵³) and 9,007,199,254,740,992 (2⁵³).

If we use values larger than this we may lose precision in trailing digits.

If a number appears directly in a JavaScript program, it called numeric literals.

JavaScript supports numeric literals in several formats.

Let’s look into it one by one.

Integer Literals

In the JavaScript program, we can use the sequence on digits from 0 to 9, to represent any base-10 numeric values.

Examples:-

JavaScript also allows us to use hexadecimal values(base-16). Hexadecimal literals are represented by adding 0x or 0X as a prefix to that number.

It uses 0 to 9 or a(or A) to f(or F) witch represents values from 10 to 15.

Examples:-

0xfca99       // => 1034905 = (15 × 16⁴) + (12 × 16³) + (10 × 16²) + (9 × 16¹) + (9 × 16⁰)
8873          // => 34931 = (8 × 16³) + (8 × 16²) + (7 × 16¹) + (3 × 16⁰)

In ES6 and later, we can also represent integers in binary(base-2) or octal(base-8) using prefixes 0b and 0o(or 0B and 0O) respectively.

Examples:-

0b110110110        // => (1 × 2⁸) + (1 × 2⁷) + (0 × 2⁶) + (1 × 2⁵) + (1 × 2⁴) + (0 × 2³) + (1 × 2²) + (1 × 2¹) + (0 × 2⁰)
0o57246            // => (5 × 8⁴) + (7 × 8³) + (2 × 8²) + (4 × 8¹) + (6 × 8⁰)

Floating Point literals

Floating-point literals can have decimal point.

A real value is represented as an integral part of the number, followed by a decimal point and fractional part of the number.

Floating-point literals can also be represented using exponential notation.

A real number followed by letter e(or E) with optional +/- sign, followed by an integer exponent.

This notation represents a real number multiplied by 10 to the power of the exponent.

Examples:-

3.14
55482.2287
7.9985e33     // => 7.9985 × 10²³
1.221533E-11  // => 1.221533 × 10⁻¹¹

Note:-

We can use separators in numeric literals to make them easier to read.

let no1 = 1_000_222_444;
let no2 = 2.111_125_255

At the moment, using an underscore in numeric literals is not formally standardized yet. But they are in the advanced stage of the standardization process and implemented by major browsers and Node.

Arithmetic in JavaScript

JavaScript program works with numbers using arithmetic operators, that language provides.

These includes +, -, *, /, and %.

%(Modulo) is used to get a remainder after division.

ES2016 adds ** for exponentiation.

Examples:-

20**4 // => 160000

Arithmetic in JavaScript does not raise an error in case of overflow, underflow, or division by zero.

When the number(or a result of the operation) is larger than the largest representable number(overflow), the resulting value is a special infinite value, Infinity.

Similarly, if the number(or a result of the operation) is smaller than the smallest representable value, the resulting special value is negative infinity, -Infinity.

The zero divide by zero does not have a well-defined value and the result of this operation is a special not-a-number value(NaN).

Date and Time

JavaScript defined simple Date class for representing and manipulating numbers that represent date and time.

JavaScript Dates are objects but they also have numeric representations as timestamp, which specifies the number of elapsed milliseconds since 1st January 1970.

That’s all I wanted to cover about Numbers data type in JavaScript.
In an upcoming article in this series, I will cover the Text data type of JavaScript in detail.

Hope you like it, if yes **like & share.**

Thanks for your time.

Happy coding….

← Types, values, and variables in JavaScript

Types, values, and variables in JavaScript

Ganesh Jaiwal — Wed, 28 Oct 2020 15:51:03 +0000

In this article, we will take an overview of types, values, and variables in JavaScript.

A compuer program can simply be explained as a piece of code that manipulates something.

So what is something?

Let’s ask the computer to perform some task,
Hey, computer print “Hello Devs” 2 times.

So, in the above statement, there are two entities,

“Hello Devs”
2

These will be the values used by the computer program.
First is a set of characters and the second is digit/number these are called types.

Ok, what if we want these values later in our program?
Let’s save values in some container and name that container as abc.
This container is called a variable.

JavaScript types mainly can be divided into two categories:-

Primitive types
Object type

Primitive types include numbers, strings of text, and boolean values(true/false).
The special type of values like null and undefined are primitive values, but they are not numbers, strings, or boolean.
ES6 added a new special-purpose type, known as Symbol.

Any value that is not a primitive value(number, string, boolean, symbol, null, or undefined) is an Object.

An object is a collection of properties where each property has a name and value pair.
The values of an object can be a primitive value or another object.

JavaScript automatically converts values from one type to another. If the program expects a string and you provided a number, it will automatically convert the number to a string.

Numbers

The number is used to represent integers.
JavaScript represents numbers using a 64-bit floating-point format defined by IEEE 754 standard.

This means it can represent numbers as large as +/- 1.7976931348623157*10^308 and as small as +/- 5*10^-324.

If we use integer values larger than the range, we may lose precision in trailing digits.

If a number appears directly in a JavaScript program it is called numeric literals.
I will explain Numbers in detail in an upcoming article.

Text

To represent text in our program JavaScript provides type as a String.

A String is an immutable ordered sequence of 16-bit values. Each 16-bit value represents a Unicode character.

The length is the number of 16-bit values that are used to represent a string.
JavaScript strings use zero-based indexing, the first 16-bit value is placed at 0th index and 2nd at 1st index, and so on.

You can find details about strings in javascript in upcoming articles.

Boolean values

null is a reserved keyword to represent the absence of the value.

Using typeof operator on null returns type as an “object”, indicating that null can be used as a special value that indicates “no object”.

Other programming languages also have equivalent Javascript null: like NULL, nil, or None.

The undefined value represents a deeper kind of absence. It is the value of the variable that not has been initialized.

Many times we see this value when we try to get the value of an object property or array element which does not exist.

undefined is a predefined global constant(not language keyword as null) that is initialized to an undefined value.

If we try to apply typeof operator to an undefined value it returns “undefined”, indicating that this is a member of a special type.

Symbols

Symbols were introduced in ES6 to use non-string property names.

JavaScript Object types are an unordered collection of properties, where each property has a name and value.

Before ES6 property names are typically a string.

To obtain symbol values, we need to call the Symbol() function.
This function never returns the same value twice even we call it with the same argument.

Symbol.for()-
This method allows us to create the same symbol value twice.
Passing the same string argument to Symbol.for() method returns the same symbol value.
Symbol.keyFor() returns the string that we passed as an argument to Symbol.for().

let var1 = Symbol.for(“test”);
let var2 = Symbol.for(“test”);
va1 === var2              // true

Variable Declaration and Assignment

In the programming language, we use names/identifiers to represent values.

Binding name to value gives us a way to refer to that value ad use it in the programs we write.

By doing this we can say that we are assigning value to a variable.

The term variable implies that a new value can be assigned: the value associated with the variable may vary as our program runs.

If we permanently assign some value to a name, that name we refer to as constant instead of variable.

Variable and scope

The scope of a variable is the region of our program source code in which it is defined.

Variable and constant declared with let and const are blocked scope. This means the variable is only accessible inside the code block where let or const exists.

var as a global variable

If we declare the global variable using the var keyword it is a part of the global object and can be referred to as globalThis.

Global declared with var can not be deleted using the delete keyword.

Variable declared with let and const are not a part of globalThis.

This is an overview of Javascript types and variables.

In the next article from this series, I will cover the Number data type in detail.

Hope you like it, if yes **like & share.**

Thanks for your time.

Happy coding….

← How does JavaScript work? 🤔

How does JavaScript work? 🤔

Ganesh Jaiwal — Tue, 20 Oct 2020 14:46:47 +0000

Did you know the simple statement of JavaScript needs a lot of work done behind the seen to get it executed?

Hmm…
So the browser doesn’t understand javascript directly.
Then how are we going to ask the browser to do something?

Let’s start with what language the browser understands.
The browser only understands 0s and 1s language i.e. Statements in Binary/Bits format.

We can’t convert our whole JavaScript into bits easily. So what should we do now? 🤔

JavaScript engine:- “Hey don’t worry I can help you with that give me your JavaScript file“.

What is a JavaScript engine then?

When a JavaScript file is loaded into the browser, JavaScript Engine executes that file line by line from top to bottom (Async code will be the exception, we will see async later in this series).
JavaScript Engine will parse the code line by line and convert that code into the machine code (Binary/Bits format).

Now browser can understand this machine code and behave accordingly.

Here are some JS engine examples.

Correction:-

With the Edge 79 release, Microsoft is switching to a Blink browser engine with a V8 JavaScript engine.

Both Blink and V8 are developed under Chromium—an open-source project with an open-source web browser of the same name. Chromium—the open-source browser—is used by Google for its own Chrome browser. Now, Microsoft's Chromium Edge will do the same.

So what is inside this javascript engine?

Here is a very basic view of JavaScript Engine.

Memory heap

JavaScript engine is sometimes unable to allocate memory at compile-time, so variables that allocated at runtime go into memory heap (unstructured region of memory).
Data/Objects that we allocate in the heap section exist even after we exit the function which allocated the memory inside the heap.

Here we face a major problem of memory leak.

So what is a memory leak?

A memory heap has limited space.
If we keep using heap space without caring about freeing up unused memory. This causes a memory leak issue when there is no more memory available inside the heap.

To fix this issue javascript engine introduced a Garbage collector.

What is a Garbage collector?

Garbage collection is a form of memory management. It’s like a collector which attempts to release the memory occupied by objects that are no longer being used. In other words, when a variable loses all its references Garbage collection marks this memory as “unreachable” and releases it.

Execution context stack

A stack is the data structure that follows the Last In First Out (LIFO) principle (the last item to enter the stack will be the first item to be removed from the stack).

ECS stores execution context for all the functions. Execution context is defined as an object which stores local variables, functions, and objects.

In simple words, each function is pushed on the top of the sack.
JavaScript engine executes the function which is at the top of this stack.

As JavaScript engine has only one ECS, it can execute only one thing at a time which is at the top of the ECS. This is what makes JavaScript single-threaded.

You must have heard of stack overflow.

What does that mean? - ECS also has limited space. So, if we keep adding function on the top of the stack. At some point, there will not be more space to add more stack frames. At this point, we get a stack overflow error.

Consider the following example.

function heyJS() {
    console.log("Hello you are awesome!!!!");
    heyJS();
}
heyJS();

Well, that went into an infinite recursion and we have a stack overflow error.

So as I mentioned JavaScript is a simple threaded language, which means it has only one call stack ad therefore it can only execute one statement at a time.

Wait, we also heard about asynchronous programming in javascript.
So how does that work when only one task is allowed at a time?

Here comes Web API’s and Callback queue.

Web API’s

Web APIs are not part of the JS engine but they are part of the JavaScript Runtime Environment which is provided by the browser. JavaScript just provides us with a mechanism to access these API’s. As Web APIs are browser-specific, they may vary from browser to browser. There may be cases where some Web APIs may be present in one browser but not in another.

Examples:-

document.getElementById();
document.addEventListerner();
setTimeOut();
setInterval();

Example:-

console.log(“First!”);

setTimeout(() => {
    console.log(“Second!”);
}, 1000 );

console.log(“Third!”);
/*
OutPut:- 
First
Third
Second
*/

It’s weird, right?

“Second” is inside the setTimeout so that will executed after 1 second.

What exactly happens behind the scene?

After 1-second WebAPI will get notified, hey you have code that you need to execute now.
WebAPI “Oh it’s console.log() I need to execute that, but I can’t execute this directly. Let’s send it to Callback Queue”
“Hey, Queue here is the callback please add this on your list and execute it”.

Callback Queue

Callback Queue or Message Queue is a queue data structure that follows the First In First Out principle (item to be inserted first in the queue will be removed from the queue first). It stores all the messages which are moved from the event table to the event queue. Each message has an associated function. The callback queue maintains the order in which the message or methods were added in the queue.

Event loop

The event loop continuously checks if the execution context stack is empty and if there are any messages in the event queue. It will move the method from the callback queue to ECS only when the execution context stack is empty.

Callback Queue

“Hey, Event loop please check if ECS is empty. I have some callbacks that you need to push into ECS”.

Event Loop

“Queue please give me callbacks ECS is empty now, I will push them on the stack to execute them.”

And finally, in the end, we will get out output.

// First
// Third
// Second

This is just an overview of how JavaScript Engine works.

JavaScript engine is way more complex than how we discuss here today.

I will try to get deeper into the JavaScript engine in some of my future Articles.

In the next article of this series, I will explain Javascript Types, values, and variables.

Hope you like it, if yes **like & share.**

Thanks for your time.

Happy coding….

← Introduction to JavaScript

Introduction to JavaScript

Ganesh Jaiwal — Tue, 13 Oct 2020 11:58:35 +0000

JavaScript is a scripting or programming language that allows you to implement complex features on web pages.

What does the above statement exactly mean?

JavaScript provides us a way to make webpages interactive. Whatever action we perform on the web page to make it do something, is handled using JavaScript.
Without JavaScript, a web page is just a showcase. We can’t do anything with that except keep looking at it or loading different pages inside the browser.

If you are familiar with any other programming language, you can assess that Javascript is a dynamic and high-level Interpreted programming language.

The best way to learn any programming language is to keep practicing, keep coding.

The simplest way to try JavaScript examples is by using browsers' dev tools.
To open dev tools there are various options,

F12
Ctrl+Shift-I / Command+Options+I
Right click -> Inspect Element
Browser options and find Developer tools option

Once you open the dev tools panel select Console.

Now inside the console, we can run any JavaScript statement.

Once you are done practicing small snippets, now it time to work with large/long code snippets.

Consider creating 2 files,
1. hello.html
2. hello.js

Add the following code snippets to respective files.

hello.js

console.log(“Hello world!”);

hello.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script src="hello.js"></script>
    </body>
</html>

Keep both files at the same location.
Then load hello.html into your web browser using a file://URL
Open the console, you will see the message “Hello World!”.

🎉 Bingo!!!!
We just ran our first JavaScript file.

Let’s check out some more details about JavaScript

JavaScript is a case sensitive language.

What does this mean?
This means all language keywords, variables, function names, and identifiers should be typed/used with proper case.

For example:-

var count = 0;
var Count = 0;
var COUNT = 0;

All of the above variables are referred to as different variables.

Comments:-

JavaScript supports two types of comments.

Anything written between // and the end of the line is treated as a comment and is ignored by JavaScript.

Another way to add a comment is a multi-line comment.
Add your comment in between /* and */

Examples:-

//Single line comment

/* 
Multi-line comment
*/

Identifiers:-

It is a simple name used to represent any variable, function, class, etc.

Identifier rules:-

The identifier should start with character.

The identifier doesn’t allow special characters

An identifier should not start with a digit.

_ is considered a valid character to create an identifier.

Reserved keywords:-

The words that are reserved for language and not allowed for general use as an identifier are known as reserved keywords.

Examples:-

for
async
if
switch

Optional semicolon:-

Using semicolons are not compulsory in JavaScript.

We can omit a semicolon at the end of the statement, JavaScript automatically inserts a semicolon if we didn’t add one.

That’s it for this article.

In the next article, we will look into How does JavaScript work.

Until then keep practicing, keep coding…

Hope you liked it.

Thanks for your time.

Hope you like it, if yes **like & share.**

Happy coding….

Automate Chrome extension publish using an automated script

Ganesh Jaiwal — Mon, 05 Oct 2020 12:50:39 +0000

We are living in a world where everything is automated, so why publish Chrome extension manually?🤔

Let’s automate our process of publishing the chrome extension that we set up in the previous article.

This article is going to be long but in the end, you will have great things in your hand.

In this article I will be going to focus mainly on the following topics:

Let’s change our extension folder structure
Setup package.json file to install required NPM packages
Setting up Github actions to automate deployment on code push
Let’s set up Google credentials to allow uploading extension
Write a script to publish an extension to web-store
- Include required packages
- Setup build path
- Update extension version
- Generate a zip file to upload to store
- Initialize webstore with client Id and client secret
- Generating new refresh token
- Upload extension zip to store
- Publish Extension

Let’s change our extension folder structure

Before we start let’s rearrange our extension folder structure that we created in Getting started with the chrome extension.
This will help us to manage our code and to create extension zip in upcoming steps. To do this create a new folder in our project directory [app] and move all the extension files into the [app] folder.

You can change this according to your need if you are using any build tool like webpack.

Setup package.json file to install required NPM packages

Now it's time to use some npm packages which will help us to automate our process.
Using these packages will reduce our efforts and make things easier.

Packages that we need:-

jsonfile - npm -> This will help us to read the manifest.json file to update the version of our extension.
zip-local - npm -> We will use this to generate a zip file of our code.
fs-extra - npm -> fs-extra will help us to read our zip file into the buffer
chrome-webstore-manager - npm -> This is the most important package we need to automate our process.
path - It is by default provided by Node.js so no need to install it explicitly.

Now let’s make the way to get it done using package.json

What is the package.json file?

The file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies.
To know more click here

To create and initialize the package.json file run the following command in terminal:

npm init

Use default options or add details according to your need.

Once you've created package.json, it’s time to install our dependencies that I mentioned above.
To do so run the following command:-

npm install jsonfile zip-local fs-extra chrome-webstore-manager --save-dev

Save-dev - This option will save our dependencies in package.json under the devDependencies property.

Here is the final structure of the package.json

Setting up Github actions to automate deployment on code push

GitHub action allows us to add an automated task. This task will run when specific actions get triggered on the GitHub repo.
In our case, we need to run some npm commands to deploy our extension by running our node.js script.

To know more about git hub actions click here

Here is the example of GitHub action that we need.

Add this file as it is to GitHub action.

Where to add this file?🤔
Create the following folder structure to add an action workflow file.

-> Chrome-extension-demo
    -> app  //Our extension code
    -> .github
        -> workflows
            -> action.yml

Let’s set up Google credentials to allow uploading extension

To automate publishing, you need to enable the Chrome Web Store API for your project in the Google Developers Console.

Visit the Google Developers Console.
Create a new project or select an existing one.
In the sidebar on the left, select APIs & auth.
In the displayed list of available APIs, set the status of the Chrome Web Store API to ON.
Accept the Terms of Service.
In the sidebar on the left, select Credentials.
To create the client ID and client secret
- Click on Create Credentials
- Select OAuth client ID
- Desktop App under application type
- Enter the name of your application
- Click on the Create button.

🥳 Yeah! We got the client Id and client secret

Get an access token:

Once you have the client ID and client secret, you can retrieve an access token and refresh token. The access token is responsible for authorizing our script to upload and publish an extension.

Note:- Access token gets expired after 40 minutes. So, we will always need to create a new one while deploying our extension in a continuous deployment process.

To create new access_token we will use refresh_token.

Let’s generate access_token and refresh_token:

Use the following URL to generate code which is used to generate access_token

https://accounts.google.com/o/oauth2/auth?response_type=code&scope=https://www.googleapis.com/auth/chromewebstore&client_id=$CLIENT_ID&redirect_uri=urn:ietf:wg:oauth:2.0:oob

Replace $CLIENT_ID with the client Id that we generated in the previous step.
Paste the updated URL in the browser and hit enter.
Select the same google account where you have an extension uploaded.
Grant permission to view and manage your chrome extension and apps.

After granting permission we get the authorization code. Copy that code to generate access_token.

Open your terminal to execute the next curl request. Use above code to request an access token. For example, using curl, you can get an access token by executing the following command (replacing the values of $CLIENT_ID, $CLIENT_SECRET, and $CODE with the values from above):

curl "https://accounts.google.com/o/oauth2/token" -d \
"client_id=$CLIENT_ID&client_secret=$CLIENT_SECRET&code=$CODE&grant_type=authorization_code&redirect_uri=urn:ietf:wg:oauth:2.0:oob"

This will return a result such as:

{
  "access_token" : "ya29...",
  "token_type" : "Bearer",
  "expires_in" : 3600,
  "refresh_token" : "1/rwn..."
}

Note down the refresh token we will use this token in our deploy script.

Write a script to publish an extension to web-store

Create a new JavaScript file at the root level of our extension and name it as deploy.js

Include the required packages Import packages that we installed using NPM.

const fs = require('fs-extra');
const zipper = require("zip-local");
const jsonfile = require('jsonfile');
const path = require('path');
const ChromeWebstore = require('chrome-webstore-manager');

Setup build path

const itemId = "EXTENSION_ID";
var buildLocation = path.join(__dirname, "app");

Replace EXTENSION_ID with Id of the extension that uploaded in the previous article
Id may look like:- ecjchthpmtdecenmykiuipbibkhcijlj

Update extension version While uploading a new package to the store add a new version. Google does not allow uploading a new package with the same version. Read manifest file Generate new version Update with the new version Write manifest file with an updated version

// read manifest file
var manifest = jsonfile.readFileSync(path.join(buildLocation, "manifest.json"));
function getNewVersion() {
       var ver = parseInt(manifest.version.split('.')[0]);
       ver++;
       return `${ver}.0.0`;
}
var version = getNewVersion();
// replace version
manifest.version = version;
// save manifest file
jsonfile.writeFileSync(path.join(buildLocation, "manifest.json"), manifest);

Generate a zip file and read that file to upload to store

// create zip
zipper.sync.zip(buildLocation).compress().save(path.join(buildLocation, "build.zip"));
const fileBin = fs.readFileSync(path.join(buildLocation, "build.zip"));

Initialize webstore with client Id and client secret

// Initialize with ClientID and ClinetSecret
const chromeWebstore = new ChromeWebstore("<CLIENT_ID>", "<CLIENT_SECRET>");

Replace CLIENT_ID and CLIENT_SECRET with values that we created before.

Generating new access_token Use the following function to create new access_token.

chromeWebstore.getRefreshToken("<REFRESH_TOKEN>")

Replace REFRESH_TOKEN with refresh_token that we generated in the previous process.

Upload extension zip to store

chromeWebstore.updateItem(newToken, fileBin, itemId)

In the 6th step, we will get a promise, which returns an object containing new access_token.
Use this access token to upload extension zip with the update method of chromeWebstore.

Publish Extension

chromeWebstore.publishItem(newToken, itemId)

Once the upload is done we are ready to publish our extension.
To publish we are going to use chromeWebstore’s publishItem method.

Let’s keep the last 3 steps together to complete our script.

// Get new token with refresh_token
chromeWebstore.getRefreshToken("<REFRESH_TOKEN>").then(function (data) {
   const json = JSON.parse(data)
   const newToken = json.access_token
   chromeWebstore.updateItem(newToken, fileBin, itemId).then((data) => {
       console.log(data);
       chromeWebstore.publishItem(newToken, itemId).then((data) => {
           console.log(data);
       });
   });
});
console.log("Deployed version is " + version);

Hoorayyyyy! 🎉🎉

Finally, we are done with creating our deploy script.

Now once we push our extension code into the repo, Github Action will get triggered.
In our workflow file, we wrote a command that triggers the deploy script, and the extension will get updated using the deploy script automatically.

This was a long article as I had a lot of explaining to do.

Hope you liked it.

Thanks for your time.

Hope you like it, if yes **like & share.**

Happy coding….

How to publish your Chrome Extension

Ganesh Jaiwal — Sat, 05 Sep 2020 18:04:48 +0000

In my previous article, I covered how to Build your first chrome extension in detail.

Now publish that extension to the chrome web store so that other users can download and use the service that we have developed in the previous article.

Google made the process of publishing extension very easy by providing a developer dashboard.👨🏻‍💻

Let's jump into the actual steps.🧐

To publish our item to the Chrome Web Store, we will follow these steps:

Create your extension's zip file
Create a developer account and Activate an account
Upload your package
Add details about your extension
Add assets for your listing
Submit your item for publishing

Stick together and let's get into detail about each step.🤝🏻

Create our extension's zip file

To publish our extension we need to create a zip file that includes all the necessary files.

📝Note:- manifest.json must be included in the package at the root level, and the manifest file must contain the following fields.

“Name” — Used to represent the name of the extension on the Web Store and Chrome
“Version” — This represents the version of the extension (incrementing value)
“Icon” — This represents the extension’s display icon on Web Store and Chrome

Refer to the following file structure for other required files.

To upload a package created in the previous step you need a developer account, so let’s create one.✏️

Create a developer account and Activate an account

Before we publish our Chrome extension to the web store, we need to register as a Chrome Web Store developer.

On your developer account, the email address field is required. You cannot publish items if this field is blank.

To register ourselves as a developer, we need to visit the developer console.
Then we need to agree to the Developer’s agreement and policies.

As you can see in the following image, we need to pay $5💰 as a lifetime developer account fee (to publish our extension this is required).

Once we are done with activating our account now we can upload the package to the dashboard that we created in the first step.

Let’s Upload our package

To upload our package we need to create a new item on the dashboard.

Click the New Item button which will open one small popup, use this popup to upload a zip file that we have created. We can upload our item multiple times before submitting it for review.

You cannot have more than 20 extensions published on the Chrome Web Store. There is no such limit on the number of themes.

⚠️ Be aware that once you add an extension to your Developer Dashboard you cannot delete it. As long as it is not published, it will not count towards your extension limit.

Let’s add details about our extension

After a successful package upload, we will be redirected to the page where we need to fill all the necessary additional details about our chrome extension.

First, we will select “Store Listing” options from the left menu,

Let’s add a description to our item in the description section.
Then select the category for your extension (this is to list our extension on the web-store under the selected category).
Select the preferred language for our extension.

If you are using any special permissions in your manifest file then you will need to add some description about that permission in the privacy section.

Let’s add assets for our listing

Once we are done with adding details, we need to add some assets for our listing,
Assets are nothing but the showcase or a quick view of our extension.

We can add a youtube video or any images of a specific size.
We need to add at least one image as assets to publish our extension.

Other details can be added but I am not going to cover everything in this article as this is our first extension and we don’t need them here.

Submit our item for publishing📢

And now everything is set to publish our first extension.🥳
After adding all the details and necessary information save the changes.

If nothing is remaining from compulsory fields, then the submit for review button will get enabled.

We can click the Submit for Review button and submit our first chrome extension for review.

The following dialog appears, letting us confirm that we want to submit the item for review.

The confirmation dialog is shown above also lets us control the timing of our item’s publishing. If we uncheck the checkbox, our item will not be published immediately after its review is complete. Instead, we’ll be able to manually publish it whenever we want once the review is complete.

So let’s click the last button (Submit for review) to put a final step towards publishing the extension.

After we submit the item for review, it will undergo a review process. The time for this review depends on the nature of our item, once that is done our extension will be live on Chrome Web Store.

Bingo!🤩 We just published our first chrome extension.

In the upcoming article, I’ll explain how to upload/update our extension using an automated script.

Stay connected!

Hope you liked it.

Thanks for your time.
Hope you like it, if yes *❤️ & Share.*
Happy coding ...

Build Your First Chrome Extension

Ganesh Jaiwal — Thu, 03 Sep 2020 10:23:01 +0000

I hope all of you are doing well.

If you are interested in knowing how browser extensions work and how to build your very first chrome extension, then YES you are at the right place.😎

In this article, let’s stick together to build your own brand new chrome extension.

Before we start, let’s look into some important terminologies.

What is an extension? 🧐

“Extension” The name itself explains a lot,
It is something¹ that enhances or “extends” the capabilities of something².
In our case, the first something is a package consisting of a set of different files that are bundled together to make it a single entity called browser extension.
And second, something is of which we want to enhance the functionality or say capability of web browsers.

So let’s see,

What is Web Browsers?

A web browser is the most important part of everyone’s life nowadays. I can’t even imagine my life without a web browser being a software developer 👨🏻‍💻 (We use it a lot).
According to Wikipedia, a web browser (commonly referred to as a browser) is a software application for accessing the information on the World Wide Web. When a user requests a web page from a particular website, the web browser retrieves the necessary content from a web server and then displays the page on the screen.

How extension helps web browsers(Focusing on Google Chrome)?🤔

I think extensions are a very important part of browsers.
In my opinion, I love to use extensions that make my life easier and productive.
The extension that I use a lot is LastPass. This extension remembers credentials on my behalf and lets my brain focus on more important stuff rather than remembering complex passwords 😉
I have to save the credentials only for the first time I log in.

Consider one case study in which you want to get all products and its price listing in a short time.
If you are using a plain web browser, then you need to do that manually.
Sounds like a lot to work right? But what if you create one extension once and install it into the browser. You just need to click once and all listings will be done by the extension for you in a well-formatted way.

Well, for that you must know how to build browser extensions, let’s check it out then.
...

Before starting to build chrome extensions let’s know more about its basics.

The attached image shows all the important parts of the extension.

There are some important parts of an extension without which you can’t build one.
So, let’s check them out first.

Manifest File

This is the most important and necessary file while creating browser extensions.
The manifest file is the JSON object of extension metadata which holds all the basic information for the extensions.
Check out the sample of the Manifest file.

Background Script

Background Script is a JavaScript file that runs in the background to handle browser events. It is also known as the extension’s event handler page. It is responsible for handling the browser's events such as on bookmark create, on page load completed, etc.

Extension Popup

A pop up is an HTML file that is displayed in a special window when the user clicks the toolbar icon. It works in a very similar way compared to a web page; it can contain links to stylesheets and script tags but does not allow inline JavaScript.
Check the extension popup code here.

Content Script

This is the JavaScript file that is injected into the web page to perform operations such as accessing the details of the web pages, make changes to them, and pass information to their parent extension.
You can configure manifest file using options like:
run_at used to decide when to inject and execute the script.
matches responsible for deciding where to inject script on the basis of URL pattern matching.
js An array of JS file paths to be injected.
css An array of style sheet file paths to be injected.

(Check manifest content script entry).

Check the image below which shows that div is injected by the content script on the top of the page.

Options Page

Allow users to customize the behaviour of an extension by providing an options page. A user can view the extension’s options by right-clicking the extension icon in the toolbar and then selecting options. Another way to navigate to the extension management page at chrome://extensions and then selecting Details on the desired extension. In the details page select the options link.
Check the options page code here.

Keep it all together to create your very first chrome extension.

Great! We are done with creating our first chrome extension, now it’s time to test our extension in developer mode.🥳

Load extension to chrome browser by visiting chrome://extensions.

Visit Chrome://extensions
Enable Developer mode toggle switch (placed at the top right corner) to see developer options on the same page.

Click on the load unpacked button (placed in the top left corner).

Select your extension folder to load extension to the browser. (Make sure manifest.json is at the root level).

Bingo! 🤩 You just created and ran your very first chrome extension.

Get code for the extension we just created from here.

In the upcoming article, I’ll explain how to upload your own extension to the chrome web store using two different approaches, manual and script-based.
Stay connected!

Hope you liked it.

Thanks for your time.
Hope you like it, if yes *❤️ & Share.*
Happy coding ...