Chrome extension popup not showing anymore : <p>I'm creating a new Chrome extension and everything was fine. However, today I was coding a new func, then I saw that my extension icon was grayed. And when I click on the icon, the popup isn't shown. <strong>One interesting point is that the extension is working. No error logs.</strong></p>

<p>I commented all the code I wrote, but had no effect. If I open the link directly on the Chrome, it open a new tab showing the popup normally. [chrome-extension://extensionId/popup.html]</p>

<p>My manifest looks ok and the popup.html/js too. I really don't know what happened. Any ideas? Thanks!</p>

<p><strong>Manifest.json</strong></p>

<pre><code>{
  "name": "Say It",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "__MSG_appDescription__",
  "icons": {
    "16": "images/icon-16.png",
    "128": "images/icon-128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/chromereload.js",
      "scripts/background.js"
    ]
  },
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*",
    "background",
    "bookmarks",
    "clipboardRead",
    "clipboardWrite",
    "contentSettings",
    "cookies",
    "*://*.google.com/",
    "debugger",
    "history",
    "idle",
    "management",
    "notifications",
    "pageCapture",
    "topSites",
    "storage",
    "webNavigation",
    "webRequest",
    "webRequestBlocking",
    "nativeMessaging"
  ],
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ],
  "omnibox": {
    "keyword": "OMNIBOX-KEYWORD"
  },
  "page_action": {
    "default_icon": {
      "19": "images/icon-19.png",
      "38": "images/icon-38.png"
    },
    "default_title": "Say It",
    "default_popup": "popup.html"
  },
  "web_accessible_resources": [
    "images/icon-48.png"
  ]
}
</code></pre>

<p><strong>Popup.html</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="app"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="styles/main.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mainController as ctrl"&gt;
    &lt;h4&gt;Choose your Destiny!&lt;/h4&gt;
    &lt;button class="btn btn-large btn-primary" ng-click="ctrl.kappa()"&gt;Kappa&lt;/button&gt;
    &lt;button class="btn btn-large btn-secondary" ng-click="ctrl.pride()"&gt;Pride&lt;/button&gt;
    &lt;button class="btn btn-large btn-success" ng-click="ctrl.fon()"&gt;Fon&lt;/button&gt;
    &lt;script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="scripts/popup.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Popup.js</p>

<pre><code>(function () {
  'use strict';

  angular.module('app').controller('mainController', function () {
    var self = this;

    //Por localStorage

    console.log(localStorage.getItem('kappa'));

    //Por API
    chrome.storage.local.get('value', function (res) {
      console.log(res);
    });

    this.kappa = function () {
      console.log('Seu Kappa!');
    };

    this.pride = function () {
      console.log('Seu KappaPride!');
    };

    this.fon = function () {
      console.log('Fon!');
    };
  });
})();
</code></pre>
