SlideShare a Scribd company logo
Creating Chrome ExtensionCreating Chrome Extension
Akshay A. KhaleAkshay A. Khale
What is Chrome Extension ?
A Chrome extension is a small application attached to Google chrome and runs
with Google chrome providing extra features.
Tool You Need
• Notepad(Recommended Notepad++)
• Google Chrome (For packaging and Debugging).
Skill You Need
• HTML
• CSS
• JavaScript
• JSON(Basic Knowledge)
Steps For Creating Chrome Extension
1. Create your application files i.e. HTML files containing content of
your App/Entension.
2. Create the manifest.json file which contains information about the
App/Extension and the information of behavior of the Extension.
Sample manifest.json file
{
"manifest_version": 2,
"name": "NameOfExtension",
"description": "Description of the Application.",
"version": "VersionOfEntension",
"browser_action": {
"default_icon": “URL of icon of your Extension”,
"default_popup": "MainPageOfExtension(html document)" }
}
In the image shown above the arrow indicates main page of my
extension similar to index page of websites.
Eg.
Manifest.json file
{
"manifest_version": 2,
"name": "4Androidfans",
"description": "This extension Provides a information about Android and its
versions.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "Popup.html"
}
}
Popup.html file
<html>
<body>
<h1>This is test App</h1>
</body>
</html>
Done your app is create now to test the app
Goto Chrome Options
Then Goto Settings and then to Extensions
Check the checkbox of Developer Mode then click on Load Unpacked extension…
Locate the folder of your extension and click “Ok” Your Extension will be installed
on chrome window.
You can include images, CSS more impressive coding JQUERY/JavaScript to make
it more impressive and the pack the extension.
For that
In Extensions window click on Pack Extension…
Again locate the folder of you app/extension by clicking on Browse button in front
of “Extension root directory” then click ok it will create, it will create two file one
with extension “.crx” which is your chrome app and next is “.pem” which is
System Generated Private Key of You App.
If you want you can register yourself here
(https://chrome.google.com/webstore/developer/dashboard) to publish your
extensions to chrome App Store .
But there is a charge of 5$ for uploading your extensions.

More Related Content

PPTX
Chrome Extension
KEY
Dive Into Chrome-100119
PDF
Introduction to Google Chrome Extensions Development
PDF
Chrome extension development
PPTX
Build your own Chrome Extension with AngularJS
PPT
A Complete Guide To Chrome Extension Development
PDF
Building Chrome Extensions
PDF
Introduction of chrome extension development
Chrome Extension
Dive Into Chrome-100119
Introduction to Google Chrome Extensions Development
Chrome extension development
Build your own Chrome Extension with AngularJS
A Complete Guide To Chrome Extension Development
Building Chrome Extensions
Introduction of chrome extension development

What's hot (20)

PPTX
Chrome Apps & Extensions
PDF
Discovering Chrome Extensions
PPT
Chrome Extension Develop Starts
PPTX
Google chrome extension
PDF
Introduction to chrome extension development
PDF
Chrome extensions
PPTX
Chrome extensions
PPTX
Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...
ODP
Chrome extension development
PPTX
WordPress Theming
POT
Browser extension
PPTX
Creating custom chrome extensions
PPTX
WordPress Theme & Plugin i18n & L10n
PPTX
Develop Chrome Extension
PDF
Introduction to Web Browser Extension/Add-ons
PDF
Leksion 1 hyrje ne xhtml
ODP
Making Chrome Extension with AngularJS
PPTX
Building a resposive slider plugin for WordPress theme
PDF
Let’s Build a Chrome Extension
ODP
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
Chrome Apps & Extensions
Discovering Chrome Extensions
Chrome Extension Develop Starts
Google chrome extension
Introduction to chrome extension development
Chrome extensions
Chrome extensions
Chrome Extension Development - Adam Horvath, Google Technology User Group, Sy...
Chrome extension development
WordPress Theming
Browser extension
Creating custom chrome extensions
WordPress Theme & Plugin i18n & L10n
Develop Chrome Extension
Introduction to Web Browser Extension/Add-ons
Leksion 1 hyrje ne xhtml
Making Chrome Extension with AngularJS
Building a resposive slider plugin for WordPress theme
Let’s Build a Chrome Extension
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
Ad

Similar to Creating chrome-extension (20)

PPT
Browser Extension
PPTX
Chrome Extension Step by step Guide .pptx
PDF
Browser Extensions for Web Hackers
PDF
Chrome Extensions for Web Hackers
PPTX
Web browser extensions development
PPTX
Make an language translator with voice extension
PPTX
Cliw - extension development
PPTX
Web browser extension development
PDF
Developing chrome extensions 2021 04-30
PDF
Google Chrome Extensions - DevFest09
PDF
Building & distributing chrome extensions and web apps
PPTX
Orange is the new blue: How to port Chrome Extension to Firefox Extension
PDF
Django is a high-level Python web framework that enables rapid development of...
PPT
Implementing xpages extension library
PPTX
Chrome DevTools
PDF
Chrome Extensions - Basic concepts powerpoint
PPTX
Google Chrome DevTools features overview
PPTX
CMS & Chrome Extension Development
PPTX
DF17 - Build your own jaw-dropping Salesforce Chrome Extension
PDF
Chrome Extensions for Hackers
Browser Extension
Chrome Extension Step by step Guide .pptx
Browser Extensions for Web Hackers
Chrome Extensions for Web Hackers
Web browser extensions development
Make an language translator with voice extension
Cliw - extension development
Web browser extension development
Developing chrome extensions 2021 04-30
Google Chrome Extensions - DevFest09
Building & distributing chrome extensions and web apps
Orange is the new blue: How to port Chrome Extension to Firefox Extension
Django is a high-level Python web framework that enables rapid development of...
Implementing xpages extension library
Chrome DevTools
Chrome Extensions - Basic concepts powerpoint
Google Chrome DevTools features overview
CMS & Chrome Extension Development
DF17 - Build your own jaw-dropping Salesforce Chrome Extension
Chrome Extensions for Hackers
Ad

Recently uploaded (20)

PPTX
Introduction about ICD -10 and ICD11 on 5.8.25.pptx
PPTX
Job_Card_System_Styled_lorem_ipsum_.pptx
PDF
Tenda Login Guide: Access Your Router in 5 Easy Steps
PPTX
artificial intelligence overview of it and more
PPTX
Digital Literacy And Online Safety on internet
PDF
Decoding a Decade: 10 Years of Applied CTI Discipline
PDF
APNIC Update, presented at PHNOG 2025 by Shane Hermoso
PPTX
Slides PPTX World Game (s) Eco Economic Epochs.pptx
PDF
Sims 4 Historia para lo sims 4 para jugar
PDF
Cloud-Scale Log Monitoring _ Datadog.pdf
PDF
Unit-1 introduction to cyber security discuss about how to secure a system
PPT
tcp ip networks nd ip layering assotred slides
PDF
Vigrab.top – Online Tool for Downloading and Converting Social Media Videos a...
PDF
RPKI Status Update, presented by Makito Lay at IDNOG 10
PDF
Best Practices for Testing and Debugging Shopify Third-Party API Integrations...
PPTX
international classification of diseases ICD-10 review PPT.pptx
PDF
Paper PDF World Game (s) Great Redesign.pdf
PPTX
introduction about ICD -10 & ICD-11 ppt.pptx
PPTX
Funds Management Learning Material for Beg
PDF
The Internet -By the Numbers, Sri Lanka Edition
Introduction about ICD -10 and ICD11 on 5.8.25.pptx
Job_Card_System_Styled_lorem_ipsum_.pptx
Tenda Login Guide: Access Your Router in 5 Easy Steps
artificial intelligence overview of it and more
Digital Literacy And Online Safety on internet
Decoding a Decade: 10 Years of Applied CTI Discipline
APNIC Update, presented at PHNOG 2025 by Shane Hermoso
Slides PPTX World Game (s) Eco Economic Epochs.pptx
Sims 4 Historia para lo sims 4 para jugar
Cloud-Scale Log Monitoring _ Datadog.pdf
Unit-1 introduction to cyber security discuss about how to secure a system
tcp ip networks nd ip layering assotred slides
Vigrab.top – Online Tool for Downloading and Converting Social Media Videos a...
RPKI Status Update, presented by Makito Lay at IDNOG 10
Best Practices for Testing and Debugging Shopify Third-Party API Integrations...
international classification of diseases ICD-10 review PPT.pptx
Paper PDF World Game (s) Great Redesign.pdf
introduction about ICD -10 & ICD-11 ppt.pptx
Funds Management Learning Material for Beg
The Internet -By the Numbers, Sri Lanka Edition

Creating chrome-extension

  • 1. Creating Chrome ExtensionCreating Chrome Extension Akshay A. KhaleAkshay A. Khale
  • 2. What is Chrome Extension ? A Chrome extension is a small application attached to Google chrome and runs with Google chrome providing extra features. Tool You Need • Notepad(Recommended Notepad++) • Google Chrome (For packaging and Debugging). Skill You Need • HTML • CSS • JavaScript • JSON(Basic Knowledge) Steps For Creating Chrome Extension 1. Create your application files i.e. HTML files containing content of your App/Entension. 2. Create the manifest.json file which contains information about the App/Extension and the information of behavior of the Extension. Sample manifest.json file { "manifest_version": 2, "name": "NameOfExtension", "description": "Description of the Application.", "version": "VersionOfEntension", "browser_action": { "default_icon": “URL of icon of your Extension”, "default_popup": "MainPageOfExtension(html document)" } }
  • 3. In the image shown above the arrow indicates main page of my extension similar to index page of websites. Eg. Manifest.json file { "manifest_version": 2, "name": "4Androidfans", "description": "This extension Provides a information about Android and its versions.", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "Popup.html" } } Popup.html file <html>
  • 4. <body> <h1>This is test App</h1> </body> </html> Done your app is create now to test the app Goto Chrome Options Then Goto Settings and then to Extensions Check the checkbox of Developer Mode then click on Load Unpacked extension…
  • 5. Locate the folder of your extension and click “Ok” Your Extension will be installed on chrome window. You can include images, CSS more impressive coding JQUERY/JavaScript to make it more impressive and the pack the extension. For that In Extensions window click on Pack Extension… Again locate the folder of you app/extension by clicking on Browse button in front of “Extension root directory” then click ok it will create, it will create two file one with extension “.crx” which is your chrome app and next is “.pem” which is System Generated Private Key of You App. If you want you can register yourself here (https://chrome.google.com/webstore/developer/dashboard) to publish your extensions to chrome App Store . But there is a charge of 5$ for uploading your extensions.