Javascript Chrome扩展弹出窗口不再显示_Javascript_Html_Google Chrome Extension

Javascript Chrome扩展弹出窗口不再显示

javascript html google-chrome-extension

Javascript Chrome扩展弹出窗口不再显示,javascript,html,google-chrome-extension,Javascript,Html,Google Chrome Extension,我正在创建一个新的Chrome扩展，一切都很好。然而，今天我正在编写一个新的func，然后我看到我的扩展图标是灰色的。当我点击图标时，弹出窗口不会显示一个有趣的点是扩展正在工作。没有错误日志。我对我写的所有代码都进行了注释，但没有任何效果。如果我直接在Chrome上打开链接，它会打开一个显示弹出窗口的新选项卡。[铬-extension://extensionId/popup.html] 我的清单看起来正常，popup.html/js也正常。我真的不知道发生了什么。有什么想法吗？谢谢 Manif

我正在创建一个新的Chrome扩展，一切都很好。然而，今天我正在编写一个新的func，然后我看到我的扩展图标是灰色的。当我点击图标时，弹出窗口不会显示一个有趣的点是扩展正在工作。没有错误日志。

我对我写的所有代码都进行了注释，但没有任何效果。如果我直接在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>

在

manifest.json

中，将

中的“页面操作”

（仅适用于特定页面）替换为

“浏览器操作”

（适用于所有页面）。

如果将其从“页面操作”更改为“浏览器操作”仍然无效，检查清单是否定义了任何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()]
    }]);
});

与

这样，任何页面的扩展弹出窗口都将处于活动状态

（我花了很长时间才弄明白，所以希望它能帮助其他人）

我一直在关注，在Chrome 87上也遇到了同样的问题。问题是页面没有访问扩展的权限。要解决这个问题：

单击右上角的扩展图标它应该在您的用户图标旁边。

在“访问请求”标题下，单击分机的名称您可以在“完全访问”下拥有扩展，也可以不拥有扩展（即，我拥有react developer工具）。这无关紧要。

您的扩展现在应该显示它的弹出窗口。请注意，每次重新加载扩展时都必须执行此操作。

如果仔细阅读Get Started（）页面，您将看到background.js为页面添加规则

您可以创建一个始终为真的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()]
      }]);
    });
});

您正在使用page_操作，该操作仅在您指定的URL上显示。你可能需要。另外，要查看弹出窗口中的错误，请右键单击它，然后检查。我试图检查弹出窗口，但窗口没有打开。我将尝试使用浏览器操作。我不知道page_动作，谢谢你的解释。我现在就试试，然后再更新我的答案。太好了@现在一切都恢复正常了。谢谢你分享你的知识。谢谢！您指定的权限似乎比您可能使用的权限多。虽然这对于您将要自己使用的扩展来说不是问题，但这是一种不好的做法。此外，如果您将扩展发布到Chrome应用商店，当用户安装它时，他们将看到有关许多权限的警告。@Makyen感谢您的建议。我在我的扩展上测试一些需要此权限的东西。不过，当我在Chrome商店上发布时，我会记住这些信息。谢谢你和@wOxxOm的帮助。现在一切都好了！对我有用。为什么会这样？这对我来说很有用。谢谢但是，谷歌的官方文件被定义为页面行动@narupo使用

page\u操作

对于仅出现在特定页面上的扩展，请使用

browser\u操作

始终显示。这两个都是有效的。晚会迟到了，但我也使用了

浏览器\u操作

，它仍然不工作/显示弹出窗口。我遗漏了什么？

new chrome.declarativeContent.ShowPageAction()

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