CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extension
Katreque
Katreque

Reputation: 348

Chrome extension popup not showing anymore

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. One interesting point is that the extension is working. No error logs.

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]

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

Manifest.json

{
  "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"
  ]
}

Popup.html

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

Popup.js

(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!');
    };
  });
})();

Upvotes: 21

Views: 20510

Answers (5)

theisof
theisof

Reputation: 711

For anyone landing here from Google: the API has changed with manifest version 3.

Now, page_action and browser_action are merged under the property action. Read more in the docs.

Upvotes: 0

Lawrence Ching
Lawrence Ching

Reputation: 483

If you read the Get Started(https://developer.chrome.com/docs/extensions/mv2/getstarted/) page carefully, you see the background.js add rules for your page.

You can create an always-true PageStateMatcher to activate your page action.

chrome.runtime.onInstalled.addListener(function() {

    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
      chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [new chrome.declarativeContent.PageStateMatcher({
          // Comment below line so that PageStateMatcher match any pages
          // pageUrl: {hostEquals: 'developer.chrome.com'},
        })
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
      }]);
    });
});

Upvotes: 0

Nate Levin
Nate Levin

Reputation: 1118

I was following along with the tutorial and had the exact same problem on Chrome 87. The issue is that the page doesn't have access to the extension. To solve this problem:

Click on the extension icon in the top right

It should be next to your user icon.

An arrow pointed to the extension (puzzle piece) icon

Under the "Access Requested" header, click on your extension's name

You may or may not have extensions under "Full access" (i.e. I have the react developer tools). This does not matter.

AN arrow points to the extension name under the header

Your extension should now show it's popup. Note that you will have to do this each time you reload the extension.

Upvotes: 0

JackDev
JackDev

Reputation: 11183

If changing it from "page_action" to "browser_action" still does not work, check to see if your manifest defined any background.js and if that background.js has set any rules.

For example:

In the case of the Getting Started example from Google, the background.js had an onPageChanged rule where the url host must be 'developer.chrome.com' for the extension to be active.

replace

chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { hostEquals: 'developer.chrome.com' },
        })
        ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
});

with

new chrome.declarativeContent.ShowPageAction()

so that the extension popup will be active for any page.

(This took me ages to figure out, so hope it'll help others)

Upvotes: 5

Keith
Keith

Reputation: 155892

In manifest.json replace "page_action" (which only works on specific pages) with "browser_action" (which works on all of them).

Upvotes: 91

Related Questions