Converting website to Chrome Extension

Creating a Chrome extension or Converting website to Chrome extension is a simple process. The following are the steps to convert the existing website to Chrome Extension:

Creating manifest.json
Website to Chrome Extension Script
Loading extension in Chrome

Creating manifest.json

manifest.json is an important file in the chrome extension creation process. It provides the extension information to chrome like Name, Version, Description, Browser Action and Permission etc

So create a folder and add 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

It is just a simple tricky script to load the website in iframe as chrome plugin. Create an index.html file in that folder and add the following script in it.

 <!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