How to convert any website into a google chrome extension

Creating 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.

Mytypings.com