Popup html chrome extension

Introduction

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

Requirement

• 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.»

  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.

  Источник

  Create a Chrome Extension with HTML, CSS, and JavaScript

  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.

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

  See the Pen xxEmXEW by Suraj Vishwakarma (@surajsrv11) on CodePen.

  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.

  Источник

  chrome.browserAction

  Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can have a tooltip, a badge, and a popup.

  In the following figure, the multicolored square to the right of the address bar is the icon for a browser action. A popup is below the icon.

  

  If you want to create an icon that isn’t always active, use a page action instead of a browser action.

  # Manifest

  Register your browser action in the extension manifest like this:

   
  "name": "My extension", 
  . 
  "browser_action":  
  "default_icon":  // optional 
  "16": "images/icon16.png", // optional 
  "24": "images/icon24.png", // optional 
  "32": "images/icon32.png" // optional 
  >, 
  "default_title": "Google Mail", // optional, shown in tooltip 
  "default_popup": "popup.html" // optional 
  >, 
  . 
  >

  You can provide any size icon to be used in Chrome, and Chrome will select the closest one and scale it to the appropriate size to fill the 16-dip space. However, if the exact size isn’t provided, this scaling can cause the icon to lose detail or look fuzzy.

  Since devices with less-common scale factors like 1.5x or 1.2x are becoming more common, you are encouraged to provide multiple sizes for your icons. This also ensures that if the icon display size is ever changed, you don’t need to do any more work to provide different icons!

  The old syntax for registering the default icon is still supported:

   
  "name": "My extension", 
  . 
  "browser_action":  
  . 
  "default_icon": "images/icon32.png" // optional 
  // equivalent to "default_icon": < "32": "images/icon32.png" > 
  >, 
  . 
  >

  # Parts of the UI

  A browser action can have an icon, a tooltip, a badge, and a popup.

  # Icon

  The browser action icons in Chrome are 16 dips (device-independent pixels) wide and high. Larger icons are resized to fit, but for best results, use a 16-dip square icon.

  You can set the icon in two ways: using a static image or using the HTML5 canvas element. Using static images is easier for simple applications, but you can create more dynamic UIs—such as smooth animation—using the canvas element.

  Static images can be in any format WebKit can display, including BMP, GIF, ICO, JPEG, or PNG. For unpacked extensions, images must be in the PNG format.

  To set the icon, use the default_icon field of browser_action in the manifest, or call the browserAction.setIcon method.

  To properly display icon when screen pixel density (ratio size_in_pixel / size_in_dip ) is different than 1, the icon can be defined as set of images with different sizes. The actual image to display will be selected from the set to best fit the pixel size of 16 dip. The icon set can contain any size icon specification, and Chrome will select the most appropriate one.

  # Tooltip

  To set the tooltip, use the default_title field of browser_action in the manifest, or call the browserAction.setTitle method. You can specify locale-specific strings for the default_title field; see Internationalization for details.

  # Badge

  Browser actions can optionally display a badge—a bit of text that is layered over the icon. Badges make it easy to update the browser action to display a small amount of information about the state of the extension.

  Because the badge has limited space, it should have 4 characters or less.

  Set the text and color of the badge using browserAction.setBadgeText and browserAction.setBadgeBackgroundColor , respectively.

  # Popup

  If a browser action has a popup, the popup appears when the user clicks the extension’s icon. The popup can contain any HTML contents that you like, and it’s automatically sized to fit its contents. The popup cannot be smaller than 25×25 and cannot be larger than 800×600.

  To add a popup to your browser action, create an HTML file with the popup’s contents. Specify the HTML file in the default_popup field of browser_action in the manifest, or call the browserAction.setPopup method.

  # Tips

  For the best visual impact, follow these guidelines:

  • Do use browser actions for features that make sense on most pages.
  • Don’t use browser actions for features that make sense for only a few pages. Use page actions instead.
  • Do use big, colorful icons that make the most of the 16×16-dip space. Browser action icons should seem a little bigger and heavier than page action icons.
  • Don’t attempt to mimic Google Chrome’s monochrome menu icon. That doesn’t work well with themes, and anyway, extensions should stand out a little.
  • Do use alpha transparency to add soft edges to your icon. Because many people use themes, your icon should look nice on a variety of background colors.
  • Don’t constantly animate your icon. That’s just annoying.

  # Examples

  You can find simple examples of using browser actions in the examples/api/browserAction directory. For other examples and for help in viewing the source code, see Samples.

  Источник