Use javascript and css google chrome

Google Chrome is one of the most loved browsers for developers as well as general users. I use Google Chrome across all my devices and it helps me to sync Bookmarks, Browser History, Password Manager, and Much more.

For Desktop, there are many things you can do apart from browsing on the internet. You can test your webpage and all. Google Chrome becomes more powerful with the use of extensions.

So today, we are going to look into how you can create your very first Google Chrome extension with the use of HTML, CSS, and JavaScript.

Setup

Requirements

Requirements are few for getting started with Chrome Extension. The list is here:

• Google Chrome Extensions [For testing purposes]
• Text Editor [I prefer VS Code, you can use others according to you]
• Basic Knowledge about HTML, CSS, and JavaScript

Chrome Extension

We are going to develop a calculator app for our very first Chrome extension. If you know how to make a calculator for a web app, the tutorial will be easy for you. Now, You only need to know "How to setup the extension?"

manifest.json

Every app needs a manifest—a JSON-formatted file named manifest.json that describes the app. This file will helps your app to manage permission, storage, manifest version, landing pages, name, icons, and many more.

Here is the code for manifest

{
    "manifest_version" : 2,
    "name" : "Calculator",
    "version" : "1.0",
    "description" : "Calculate Anywhere",
    "icons" : {
        "128" : "img/icons128.png",
        "48" : "img/icons48.png",
        "16" : "img/icons16.png"
    },
    "browser_action" : {
        "default_icon" : "img/icons16.png",
        "default_popup" : "popup.html"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

Explanation

• manifest_version: You are defining the version of manifest that you are going to use. We are currently using 2, but recently Google had launched version 3.
• name: It is the name of your app. Currently, we are calling it "Calculator."
• description: As the name tells, you will describe your extension here. Few sentences for describing the extension is enough. For Now, we are giving it "Calculate Anywhere."
• icons: You need to provide src for the icon of your extension. You need to give the source for different sizes of the icon.
• browser_actions :
  We use browser_action to put the extension to the toolbar, which is right to the address bar. The browser action has an icon, a tooltip, a badge, and a popup.
• default_icon: Source for the image of the icon.
• default_popup: It is the source to the landing page of the extension. It has to be in HTML format. You can name it according to you. For me, it is "popup.html."
• content_security_policy: It is declared to allow some function that chrome extension considered miscellaneous. I have used eval[] function to calculate the equation that I highly don't recommend using for commercial purposes. You can use a separate function for calculation purposes.

We need only this much for our calculator extension. Let's move to the next destination that is popup.html

popup.html, popup.js, and style.css

Now we are in the comfort zone. We can write HTML as you write. I am not going to stretch the HTML, CSS, and JavaScript parts.

You can see the entire code in my Github repo here.

//github.com/surajondev/extension-calculator

Codepen Code for popup.html, style.css and popup.js

Installing Extension in the Chrome

For checking purposes, we are initially going to install the app locally into our system.

• First, visit chrome://extensions to open the extension manager
• Click the Load unpacked extension button. A file dialog appears.
• In the file dialog, choose the myapp[Directory containing manifest.json] directory. Unless you get an error dialog, you've now installed the app.

After successful installing, the extension will look like this.

Last Note

After successful installing, the extension will look like this.

If you get an error, check your code and try to solve it. If You are encountering any trouble, you can contact me here.

I hope you find this post helpful and Thank you for reading the blog post.

Published on Tuesday, April 26, 2022

With the Changes tab, track the changes you make to:

• HTML in Sources with enabled Local overrides
• CSS in Elements > Styles or Sources
• JavaScript in Sources

The Changes tab shows changes you made within DevTools. If you reload either DevTools or your page, the changes disappear.

To make DevTools persist changes across page loads, follow the steps in Local overrides.

To make DevTools write changes to your local sources, follow the steps in Edit and save files with Workspaces.

Open the Changes tab

To open the Changes tab:

1. Open DevTools.

2. Press Command+Shift+P [Mac] or Control+Shift+P [Windows, Linux, ChromeOS] to open the Command Menu.

3. Start typing changes, select Show Changes, and press Enter.

Alternatively, in the upper right corner, click Customize and control DevTools > More tools > Changes.

By default, DevTools displays the Changes tab at the bottom of your DevTools window, in the Drawer.

View and understand your changes

To view your changes:

1. Open DevTools.

2. Make changes to your sources:

   • HTML: First, enable Local overrides, then make changes in Sources
   • CSS in Elements > Styles or Sources
   • JavaScript in Sources

3. Open the Changes tab and select a file in the right-hand side of the tab.

4. Observe a diff output that highlights the following:

The Changes tab pretty-prints the diff output automatically, so you don't have to scroll horizontally to see the changes in a single line.

Copy CSS changes

If you made changes to CSS in Elements > Styles, you can copy all of them with a single button:

1. Open the Changes tab and, in the right-hand side of the tab, select the CSS file you made changes to.

2. Click the Copy button at the bottom of the Changes tab.

Revert all changes made to a file

To revert changes made to a file:

1. On left-hand side of the Changes tab, select a file with changes to revert.
2. On the action bar at the bottom, click Revert all changes to current file.

Last updated: Tuesday, April 26, 2022 • Improve article