Scribd
Upload
252 views

How To Convert Any Website Into A Google Chrome Extension

This document provides steps to convert a website into a Google Chrome extension. It explains how to create a manifest.json file, add a script to load the website into an iframe as a popup, and load the extension into Chrome. The manifest file provides extension details. The script loads the website at mytypings.com into an iframe. Developers can then load the unpacked extension folder in Chrome to add it.

Uploaded by

Muneeb Nazeem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
252 views

How To Convert Any Website Into A Google Chrome Extension

This document provides steps to convert a website into a Google Chrome extension. It explains how to create a manifest.json file, add a script to load the website into an iframe as a popup, and load the extension into Chrome. The manifest file provides extension details. The script loads the website at mytypings.com into an iframe. Developers can then load the unpacked extension folder in Chrome to add it.

Uploaded by

Muneeb Nazeem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

(http://mytypings.com/)

How to convert any website into a google chrome


extension

C
reating a Chrome extension or converting your favorite website into a google chrome extension is
a simple process. It is going to be fun, let’s get started. Following are the steps which will guide us
to get our work done.

• Creating manifest.json

• Website to Chrome Extension Script

• Loading extension in Chrome

Creating manifest.json
First of all, we need to create a manifest.json file which is an important file in the chrome extension
creation process. It provides the extension information to a chrome like a name, version, description,
browser action and permission etc

To create a folder and add a manifest.json file in that folder and add the following script in it.

"manifest_version": 2,

"name": "mytypings",

"description": "Extension for mytypings.com",

"version": "1.0",

"browser_action": {

"default_icon": "logo.png",

"default_popup": "index.html"

},

"permissions": [

"activeTab",

"storage"

Website to Chrome Extension Script


After creating the manifest.json file we need to create an index.html in the same folder and add some
code in it which is a simple tricky script to load the website in an iframe as chrome plugin. Here is that
code snippet.

<!DOCTYPE html>

<html>

<body>

<iframe src="http://mytypings.com" style="width:500px; height:500px">

</body>

</html>

Loading extension in Chrome


To load the extension in Chrome, open up chrome://extensions/ in chrome browser and click the
“Developer mode” option. Now select the “Load unpacked extension” option and select the extension’s
directory. Now chrome browser will show the extension in the list.

Whenever we do the code change, just come back to this page and reload the page. Chrome will
automatically reload the extension.

 Categories: Technology (http://mytypings.com/category/technology/) |


 0
|
 Sarav

(http://mytypings.com/author/mytypingsadmin/)

Related Posts  
How to take a screenshot Easy way to install SSl on Generate CSR (Cert
of a web page using Node AWS EC2 Signing Request) fil
 4 March
|
 2  24 February
|
 0  24 November
|
 1
(http://mytypings.com/how-take- (http://mytypings.com/easy-way-to- (http://mytypings.com/gener
screenshot-web-page-using-node-js- install-ssl-on-aws-ec2/) certificate-signing-request-fi
puppeteer-chrome/) apache/)

Leave a Reply
Your email address will not be published. Required fields are marked *

NAME*

Name

EMAIL*

Your E-mail

WEBSITE

Website

COMMENT

Your Message

Post Comment

Post Categories
Cooking (Http://Mytypings.Com/Category/Cooking/) (13)

General (Http://Mytypings.Com/Category/General/) (82)

Business (Http://Mytypings.Com/Category/General/Business/) (13)

Contracts Management (Http://Mytypings.Com/Category/General/Contracts-Management/) (7)


Financial Management (Http://Mytypings.Com/Category/General/Financial-Management/) (10)

HRM (Http://Mytypings.Com/Category/General/Hrm/) (10)

Marketing Management (Http://Mytypings.Com/Category/General/Marketing-Management/) (7)

Project Management (Http://Mytypings.Com/Category/General/Project-Management/) (16)

Quality Management (Http://Mytypings.Com/Category/General/Quality-Management/) (8)

Quantitative Methods (Http://Mytypings.Com/Category/General/Quantitative-Methods/) (4)

Risk Management (Http://Mytypings.Com/Category/General/Risk-Management/) (5)

Strategic Management (Http://Mytypings.Com/Category/General/Strategic-Management/) (7)

Technology (Http://Mytypings.Com/Category/Technology/) (21)

Anjularjs (Http://Mytypings.Com/Category/Technology/Anjularjs/) (2)

CSS (Http://Mytypings.Com/Category/Technology/Css/) (5)

Laravel (Http://Mytypings.Com/Category/Technology/Laravel/) (5)

Server Setup (Http://Mytypings.Com/Category/Technology/Server-Setup/) (9)

Quick Links
Technology (Http://Mytypings.Com/Category/Technology/)

General (Http://Mytypings.Com/Category/General/)

Cooking (Http://Mytypings.Com/Category/Cooking/)
Tools (Http://Mytypings.Com/Tools/)

Compare Two Lists (Http://Mytypings.Com/Compare-Two-Lists/)

DND Checker (Http://Mytypings.Com/Dnd-Checker/)

Weather Checker (Http://Mytypings.Com/Weather-Checker/)

Tag Comparator (Http://Mytypings.Com/Stackoverflow-Tag-Comparator/)

ShortURL Checker (Http://Mytypings.Com/Shorturl-Checker/)

Color Code Converter (Http://Mytypings.Com/Color-Code-Converter/)

About (Http://Mytypings.Com/About/)

Privacy Policy (Http://Mytypings.Com/Privacy-Policy/)

Contact (Http://Mytypings.Com/Contact/)

Recent Posts
Principles Of Strategy

(Http://Mytypings.Com/Principles-Of-Strategy/)

Lack Of Strategic Management In Companies

(Http://Mytypings.Com/Lack-Of-Strategic-

Management-In-Companies/)

Role Of HR Executives (Http://Mytypings.Com/Role-

Of-Hr-Executives/)

History Of Human Resource Management

(Http://Mytypings.Com/History-Human-Resource-

Management/)

Concept Of Human Resource Management

(Http://Mytypings.Com/Concept-Of-Human-Resource-

Management/)

Recipe For Chapati Kothu Parotta With Leftover

Chapati (Http://Mytypings.Com/Recipe-For-Chapati-

Kothu-Parotta-With-Leftover-Chapati/)

Manga Thithipu (Green Mango Jaggery Chutney) –

Recipe (Http://Mytypings.Com/Manga-Thithipu-Green-
Mango-Jaggery-Chutney-Recipe/)

Chettinad Baby Potato Fry Recipe

(Http://Mytypings.Com/Chettinad-Baby-Potato-Fry-

Recipe/)

How To Take A Screenshot Of A Web Page Using Node

JS (Puppeteer + Chrome) (Http://Mytypings.Com/How-

Take-Screenshot-Web-Page-Using-Node-Js-Puppeteer-

Chrome/)

How To Make Oreo Cake Step By Step

(Http://Mytypings.Com/How-To-Make-Oreo-Cake/)

ReviewZine (https://themeisle.com/themes/islemag/) powered by WordPress (http://wordpress.org/)


Technology (http://mytypings.com/category/technology/) General (http://mytypings.com/category/general/)
Cooking (http://mytypings.com/category/cooking/) Tools (http://mytypings.com/tools/)
About (http://mytypings.com/about/) Privacy Policy (http://mytypings.com/privacy-policy/)
Contact (http://mytypings.com/contact/)

You might also like