弹出窗口未在Chrome扩展程序中显示，但在单击图标时会触发所有事件

Question

I have been struggling with this issue since yesterday and I have run out of ideas to figure out what is going on. 从昨天开始，我一直在努力解决这个问题，并且我已经没有足够的想法来弄清楚发生了什么。

I am developing a Chrome extension with a popup menu with a few buttons to fire certain events. 我正在开发一个带有扩展菜单的Chrome扩展程序，该菜单带有一些触发某些事件的按钮。 The problem is that instead of showing the popup.html when clicking the icon extension, it just fires all associated events with the buttons. 问题在于，它没有单击图标扩展名时显示popup.html，而是仅触发了与按钮相关的所有事件。

My original extension had a persistent background script, so when I was debuggin it, the error that showed up was "cannot read property 'addeventlistener' of null". 我的原始扩展具有持久的后台脚本，因此当我调试它时，显示的错误是“无法读取null的属性'addeventlistener'。 I have already looked it up and, apparently, it had to do with the position of the script src line inside the popup.html file. 我已经进行了查找，显然，它与script src行在popup.html文件中的位置有关。 I tried relocating it but nothing changed. 我尝试重新定位，但没有任何改变。

After trying many alternatives to do the same in other ways and comparing my code with other sample extensions, I created a very simple extension to demonstrate the trouble I am dealing with. 在尝试了许多其他选择以其他方式执行相同操作并将代码与其他示例扩展进行比较之后，我创建了一个非常简单的扩展来演示我正在处理的问题。 It's just a three-buttons popup and when you click each button, a message should appear showing some text. 这只是一个三按钮弹出窗口，当您单击每个按钮时，将出现一条消息，显示一些文本。 The files are: 这些文件是：

popup.html popup.html

<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <button id="OpenButton">Open</button>
    <button id="StartButton">Start</button>
    <button id="StopButton">Stop</button>
  </body>
</html>

popup.js popup.js

function open(){alert("open");}
function start(){alert("start");}
function stop(){alert("stop");}


document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('OpenButton').addEventListener(
      'click', open());
  document.getElementById('StartButton').addEventListener(
      'click', start());
  document.getElementById('StopButton').addEventListener(
      'click', stop());
});

manifest.json manifest.json

{
  "name": "A browser action with a popup that displays a message",
  "description": "Display a message",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
      "default_title": "Display this message.",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "manifest_version": 2
}

Basically, I took a sample extension (it offered a popup with 4 buttons to change the background colour of the current page) and edited it. 基本上，我进行了一个示例扩展（它提供了一个带有4个按钮的弹出窗口，用于更改当前页面的背景色）并进行了编辑。 This extension worked fine, but in this new extension I made, when you click the extension icon, all three messages are displayed, one after another and no popup shows up. 该扩展程序工作正常，但是在我制作的这个新扩展程序中，当您单击扩展程序图标时，将显示所有三个消息，一个接一个，并且没有弹出窗口。

I can't see where the conflict is and I couldn't find any question with the same issue. 我看不到冲突在哪里，也找不到相同问题的任何问题。 Any suggestion is really appreciated. 任何建议都非常感谢。

Regards. 问候。

Answer 1

Opening an alert() causes the popup window to lose focus. 打开alert()会导致弹出窗口失去焦点。

Which, in turn, immediately closes it. 依次将其立即关闭。

Don't use alert() in the popup - to debug, use console.log() , the output of which is accessible if you right-click your extension's browser action and select "Inspect popup". 不要在弹出窗口中使用alert()进行调试，请使用console.log() ，如果右键单击扩展程序的浏览器操作并选择“检查弹出窗口”，则可以访问console.log()的输出。

弹出窗口未在Chrome扩展程序中显示，但在单击图标时会触发所有事件

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-17 20:53:08

弹出窗口未在Chrome扩展程序中显示，但在单击图标时会触发所有事件

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-17 20:53:08

解决方案1
1 已采纳 2016-03-17 20:53:08