logo标签列表

Chrome扩展弹出窗口不再显示

javascripthtmlgoogle-chrome-extension
21

我正在创建一个新的Chrome扩展，一切都很好。然而，今天我在编写一个新的功能时，发现我的扩展图标变灰了。当我点击图标时，弹出窗口没有显示。有趣的是，扩展正在工作中，没有错误日志。

我注释掉了我写的所有代码，但没有效果。如果我直接在Chrome上打开链接，它会正常显示弹出窗口。[chrome-extension://extensionId/popup.html]

我的清单文件(manifest)看起来没问题，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"
  ]
}

弹出窗口.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>

弹窗.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!');
    };
  });
})();
1
你正在使用一个page_action，它只会在你指定的URL上显示。你可能需要browser_action popup。此外，要在弹出窗口中查看错误，请右键单击它，然后选择“检查”。 - wOxxOm
我试图检查弹出窗口，但窗口没有打开。我将尝试使用browser_action。我不知道page_action，谢谢解释。我现在会尝试并在之后更新我的答案。 - Katreque
太好了！@wOxxOm现在一切都正常工作了。感谢您分享知识。非常感激！ - Katreque
您似乎指定了比您实际使用的权限要多得多。虽然这对于您自己将要使用的扩展程序来说不是问题，但这是一种不好的做法。此外，如果您将扩展程序发布到 Chrome 商店，当用户安装它时，他们将看到有关许多权限的警告。 - Makyen
@Makyen 谢谢你的建议。我正在测试我的扩展程序，需要这些权限。不过，当我将其发布到 Chrome 商店时，我会记住这些信息。 - Katreque
5个回答
91
在 manifest.json 中将 "page_action" (只适用于特定页面) 替换为 "browser_action" (适用于所有页面)。
感谢@wOxxOm的帮助，现在一切都正确了！ - Katreque
可以运行。为什么会这样？ - sdfsdf
4
这对我有用，谢谢。但是，Google 的官方文件中定义了 page_action。https://developer.chrome.com/extensions/getstarted - arai
4
使用 page_action 可以让扩展仅在特定页面上出现，使用 browser_action 则始终可见。两种方法都是有效的。 - Keith
晚来了，但我也使用了 browser_action，但它仍然无法工作/显示弹出窗口。我有什么遗漏的吗？ - AdorableVB
@AdorableVB，最好在你自己的问题中提供代码示例并询问，从评论中很难弄清楚你缺少什么。 - Keith
5
如果将“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()

这样，扩展程序弹出窗口将在任何页面上都处于活动状态。

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

0
如果您仔细阅读了 Get Started(https://developer.chrome.com/docs/extensions/mv2/getstarted/) 页面，您会发现 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()]
      }]);
    });
});
0

我正在跟随教程，在Chrome 87上遇到了完全相同的问题。问题是页面无法访问扩展程序。要解决此问题：

点击右上角的扩展图标

它应该在您的用户图标旁边。

An arrow pointed to the extension (puzzle piece) icon

在“请求访问”标题下，点击您的分机名称

您可能有或没有在“完全访问”下的扩展（例如我有React开发者工具）。这并不重要。

AN arrow points to the extension name under the header

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

0

对于从谷歌搜索跳转到此处的任何人：API 已经随着清单版本 3 发生了变化。

现在，page_action 和 browser_action 已经合并到属性 action 下。在文档中阅读更多。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接