Chrome Plugin

Posted by on
File Structure :

Plugin Name
├── manifest.json
├── popup.html
├── popup.js
├── background.js
├── icon.png
├── icon-48.png

manifest.json
Every extension has a JSON-formatted manifest file, named manifest.json, that provides important information.
{
  "manifest_version": 2,
  "name": "Plugin Name",
  "description": "description",
  "version": "1.0",
  "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
  },
  "icons": { "48": "icon-48.png" },
  "permissions": [
     "tabs", "http://*/*", "https://*/*"
  ]
,
"background":
{
  "scripts":["background.js"]
}
}
default_icon : that icon will go on address bar, And its size should be 16X16.
icons : That image will go on chrome extension store.

 popup.html
<html>
    <head>
        <script src="popup.js"></script>
        <style type="text/css" media="screen">
            body { min-width:250px; text-align: center; }
            #click-me { font-size: 15px; }
        </style>
    </head>
    <body>
 <img src="logo.png"  alt="sitename">
        <hr />
 <br /><br />
 <input type="text" name="searchqry" id="searchTxt" > <button id='search'>Search</button>
 <br /><br />
 <img src="women.jpg" height="80" width="300" alt="sitename">
        <button id='click-women'>Shop Now</button>

        <br /><br />
 <img src="men.jpg" height="80" width="300" alt="sitename">
        <button id='click-men'>Shop Now</button>
        
    </body>
</html>
That is the html part
popup.js

function clickHandlerWomen(e) {
    chrome.tabs.update({url: "https://www.google.com"});
    chrome.browserAction.setBadgeText({text: ''});
    window.close(); 
}

function clickHandlerMen(e) {
    chrome.tabs.update({url: "https://www.abc.com"});
    chrome.browserAction.setBadgeText({text: ''});
    window.close(); 
}

function clickHandlerSearch(e) {
    var searchTxt = document.getElementById("searchTxt").value; 
    chrome.tabs.update({url: "https://www.abc/result/?q="+searchTxt});
    chrome.browserAction.setBadgeText({text: ''});
    window.close(); 
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('click-women').addEventListener('click', clickHandlerWomen);
    document.getElementById('click-men').addEventListener('click', clickHandlerMen);
    document.getElementById('search').addEventListener('click', clickHandlerSearch);
});
On popup event you can capture on popup.js
background.js
var ba = chrome.browserAction;

function setUnread(unreadItemCount) {

  ba.setBadgeText({text: '' + unreadItemCount});

}

setUnread(5);
Any extra events like notification etc. you can write on background.js

Testing :
After creating all files now open Chrome extensions go to  chrome://extensions/
check devloper mode on and upload whole folder on click button Load unpacked extension 


Comments

Post a Comment