Chrome Extension

Create Simple Chrome Extension

Chrome is a very fast, lightweight and a powerful browser. By simply using the skills of HTML, CSS, and JavaScript, we can create a powerful extension.

Extensions can be defined as small software programs that enable users to customize chrome functionality according to individual need. An extension can contain multiple components and a wide range of functionalities or just a simple single functionality as long as they are fulfilling a single purpose and are easy to understand. Extension’s icon on the browser bar user interface should have the intent and be minimal. Extensions are a compressed directory, a signed zip to be exact- with a bunch of web files in it. The zips have an extension of .crx that the client downloads. Extensions are published through Chrome web store and are distributed through Chrome Developer Dashboard.

Extensions can interact with servers or web pages. It did so by using content scripts and cross-origin XMLHttpRequests. Browser related features like bookmarks; tabs can also get interacted programmatically by extensions.

Let’s create a sample extension, which will show a pop-up when clicked on the icon.

Once the button is clicked, here is how, it will look like:

Structure of the Extension

The extension requires at least one of these components:

1. Browser action or page action: These are the two UI surfaces the extension system ships with initially. A program activity shows up in the toolbar of each tab and a page activity specifically shows up in the Omnibox.
2. Content scripts: These are arbitrary CSS and JS that are injected into selected pages.
3. Background page: These are long-running scripts to help you manage extension components.
4. Utility web files: Other web files  can also be bundled with extensions such as images, JS libraries, Flash movies.

The components/Files must for our demo extensions are as follows.

Files

• manifest.json
• popup.html
• icon_extensions.png
• Style.css
• Content.js

Manifest.json

This is the file that every extension has to have. As the name implies, the manifest files are JSON-formatted data or metadata that describes the extension. It educates the chrome data regarding your expansion like its name and consents it needs to run.

The most fundamental conceivable augmentation is a registry with a manifest.json document. We should make a catalog and put the accompanying JSON into manifest.json:

At a point when an expansion adds a little symbol beside your address bar, that is a program activity. Your augmentation can tune in for taps on that catch and afterwards accomplish something. Put the icon.png in your augmentation envelope.

Substance content is “a JavaScript document that keeps running with regard to website pages.” This implies that substance content can interface with site pages that a program visits. Few out of every odd JavaScript document in a Chrome augmentation can do this; we’ll see why later.

Message passing

A content script has limited access to the APIs. It can’t appear for clicks on the browser action. To do that, we need a different type of script, also called background script, which can access every chrome API except the access to the current page.

So the substance content will have the capacity to haul a URL out of the present page, yet should handover that URL to the foundation content to accomplish something helpful with it. To convey, we’ll utilize what Google calls message passing, which enables contents to send and tune in for messages. It is the main path for content contents and foundation contents to communicate.

Now we’ll add background.js:

This sends a self-assertive JSON payload to the present tab. The keys of the JSON payload can be anything, yet I picked “message” for straightforwardness. Presently we have to tune in for that message in content.js:

Notice that the majority of our past code has been moved into the audience, with the goal that it is just run when the payload is gotten. Each time you tap the program activity symbol, you should see a URL get logged to the reassuring. On the off chance that it’s not working, take a stab at reloading the expansion and afterward reloading the page.

On Click on the icon popup will open.