Menu
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!');
};
});
})();
950
Restart the browser. Check potentially corrupted extensions. Verify Google Chrome sync » worked for 1 visitor (Jul 2021) Reinstall extensions.
Reinstall Extension If disabling and re-enabling the extensions didn't work, you can take it a step further and reinstall them. Follow these steps to reinstall an extension in Google Chrome: Open the Chrome menu. Click More tools > Extensions.
In manifest.json replace "page_action" (which only works on specific pages) with "browser_action" (which works on all of them).
86
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)
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
