Question

我正在创建一个新的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!');
    };
  });
})();

Answer 1

在manifest.json替换"page_action"（仅适用于特定网页）"browser_action"（适用于所有网页）。

Answer 2

如果将其从“ page_action”更改为“ browser_action”仍然不起作用，请检查清单是否定义了任何background.js，并且该background.js是否设置了任何规则。

例如：

在Google的Getting Started示例中，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()

，以便扩展弹出窗口对任何页面均有效。

（这花了我很多时间，所以希望对别人有帮助）

Answer 3

如果您仔细阅读入门 (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()]
      }]);
    });
});

Chrome扩展程序弹出窗口不再显示

3 个答案: