Chrome 扩展弹出窗口不再显示
[英]Chrome extension popup not showing anymore
问题描述
I'm creating a new Chrome extension and everything was fine.
我正在创建一个新的 Chrome 扩展程序，一切都很好。 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 上打开链接，它会打开一个新选项卡，正常显示弹出窗口。 [chrome-extension://extensionId/popup.html] [chrome-extension://extensionId/popup.html]
My manifest looks ok and the popup.html/js too.我的清单看起来不错，popup.html/js 也是如此。 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弹窗.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弹出窗口.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!');
};
});
})();
4 个解决方案
解决方案1
86 已采纳 2017-03-28 06:30:52
在manifest.json将"page_action" （仅适用于特定页面）替换为"browser_action" （适用于所有页面）。
解决方案2
5 2020-11-15 08:20:02
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.如果将其从“page_action”更改为“browser_action”仍然不起作用，请检查您的清单是否定义了任何 background.js 以及该 background.js 是否设置了任何规则。
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.在 Google 的入门示例中，background.js 有一个 onPageChanged 规则，其中 url 主机必须是“developer.chrome.com”才能使扩展处于活动状态。
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) （这花了我很长时间才弄明白，所以希望它会帮助别人）
解决方案3
0 2020-12-27 22:32:39
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.我正在按照教程进行操作，并且在 Chrome 87 上遇到了完全相同的问题。问题是该页面无法访问扩展程序。 To solve this problem:要解决这个问题：
Click on the extension icon in the top right点击右上角的扩展图标
It should be next to your user icon.
它应该在您的用户图标旁边。
Under the "Access Requested" header, click on your extension's name在“请求访问”标题下，单击您的扩展程序名称
You may or may not have extensions under "Full access" (ie I have the react developer tools).
您可能有也可能没有“完全访问”下的扩展（即我有 react 开发人员工具）。
This does not matter.
这没关系。
Your extension should now show it's popup.您的扩展程序现在应该显示它的弹出窗口。 Note that you will have to do this each time you reload the extension.请注意，每次重新加载扩展程序时都必须执行此操作。
解决方案4
0 2021-02-14 15:55:43
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.如果您仔细阅读入门（ https://developer.chrome.com/docs/extensions/mv2/getstarted/ ）页面，您会看到 background.js 为您的页面添加规则。
You can create an always-true PageStateMatcher to activate your page action.您可以创建一个始终为真的 PageStateMatcher 来激活您的页面操作。
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()]
}]);
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.