Kat*_*que 8 html javascript google-chrome-extension
我正在创建一个新的Chrome扩展程序,一切都很好.但是,今天我编写了一个新的函数,然后我看到我的扩展图标是灰色的.当我点击图标时,弹出窗口不会显示.一个有趣的观点是扩展正在运行.没有错误日志.
我评论了我写的所有代码,但没有效果.如果我直接在Chrome上打开链接,则会打开一个新标签,正常显示弹出窗口.[铬延伸://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!');
};
});
})();
Kei*_*ith 31
在manifest.json取代"page_action"(这仅适用于特定页面)与"browser_action"(这适用于所有的人).
如果将其从“page_action”更改为“browser_action”仍然不起作用，请检查您的清单是否定义了任何 background.js 以及该 background.js 是否设置了任何规则。
例如：
在Google 的入门示例的情况下，background.js 有一个 onPageChanged 规则，其中 url 主机必须是“developer.chrome.com”才能使扩展处于活动状态。
代替
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()]
}]);
});
和
new chrome.declarativeContent.ShowPageAction()
以便扩展弹出窗口对任何页面都有效。
（这花了我很长时间才弄明白，所以希望它会帮助其他人）
| 归档时间： |
|
| 查看次数： |
4385 次 |
| 最近记录： |