【发布时间】：2017-03-27 20:06:39
【问题描述】：
我正在创建一个新的 Chrome 扩展程序，一切都很好。然而，今天我正在编写一个新的函数，然后我看到我的扩展图标是灰色的。当我单击该图标时，不会显示弹出窗口。 一个有趣的点是扩展程序正在工作。没有错误日志。
我评论了我写的所有代码，但没有任何效果。如果我直接在 Chrome 上打开链接，它会打开一个新选项卡，正常显示弹出窗口。 [chrome-extension://extensionId/popup.html]
我的清单看起来不错，popup.html/js 也不错。我真的不知道发生了什么。有任何想法吗？谢谢！
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!');
};
});
})();
【问题讨论】：
-
您正在使用 page_action，它旨在仅在您指定的 URL 上显示。你可能需要browser_action popup。此外，要查看弹出窗口中的错误，请右键单击它，然后单击
Inspect。 -
我试图检查弹出窗口，但窗口没有打开。我会尝试使用 browser_action。我不知道page_action，谢谢你的解释。我现在会尝试，然后更新我的答案。
-
完美！ @wOxxOm 现在一切都恢复正常了。感谢您分享你的知识。赞赏！
-
您指定的
permissions似乎比您可能使用的要多。虽然这对于您要自己使用的扩展程序来说不是问题，但这是一种不好的做法。此外，如果您将扩展程序发布到 Chrome 商店，当用户安装它时，他们会看到有关许多权限的警告。 -
@Makyen 感谢您的建议。我正在我的扩展程序上测试需要此权限的东西。但是，当我将其发布到 Chrome 商店时，我会记住此信息。
标签： javascript html google-chrome-extension