title: How to change the color of icon according to user login
body: <p>I have made an extension to my website.It navigates to my home page which is my login page.When the user log on to my site,the extension icon must appear green and when user log out, the icon should appear red. Please someone help me. I have been trying these two days, but I am not getting how to do it.</p>
  
  <p>Here is my manifest.json file:</p>
  
  <pre><code>{
      "name": "My First Extension",
      "version": "1.0",
      "description": "The first extension that I made.",
      "manifest_version": 2,
      "browser_action": {
          "default_icon": "icon_128.png"
      },
      "background": {
          "scripts": ["background.js"]
      }
  }
  </code></pre>
  
  <p>Here is my background.js file:</p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab) {
      chrome.tabs.create({'url': "http://www.example.com"});
  });
  </code></pre>
  
  <p>Here is my manifest.json:</p>
  
  <pre><code>{
      "name": "Calpine Extension",
      "version": "1.0",
      "description": "Log on to calpinemate",
      "manifest_version": 2,
      "browser_action": {
          "default_icon": "icon_128.png"
      },
      "background": {
          "persistent": false,
          "scripts": ["background.js"]
      },
  
      "browser_action": {
          "default_title": "Test Extension",
          "default_icon": "calpine_not_logged_in.png"
      },
  
      "externally_connectable": {
          "matches": ["http://calpinemate.com"]
      }
  }
  </code></pre>