Chrome 扩展程序没有响应点击事件

165

你好编码

我找到了一些关于如何创建一个简单的 chrome 扩展的例子。现在我想在弹出的 chrome 扩展中单击一个按钮时运行一个 JS 函数。我按照这个一般指南来设置扩展：

https://developer.chrome.com/extensions/getstarted

我专门按照这些解释来让该功能在单击按钮时运行：

https://gist.github.com/greatghoul/8120275

现在在我的 popup.html（当用户单击插件图标时向用户显示的主 html）中，我有以下行：

<button id="clickme">click me</button>

在已成功配置为可访问 chrome 插件的 popup.js 中，我添加了以下内容：

function hello() {
        console.log("I MEOW AT CATS");
}

document.getElementById('clickme').addEventListener('click', hello);

据我了解，这应该足够了，当单击按钮时，hello() 函数应该运行，并且控制台中应该显示“I MEOW AT CATS”，但事实并非如此。看起来 hello() 函数永远不会运行。我究竟做错了什么？！

如果重要的话，这是我的 manifest.json：

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["declarativeContent", "storage"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
}

阿尔迪

您的JavaScript文件 (popup.js) 是正确的，但请记住console.log扩展程序html文件中的日志。
您的HTML文件 (popup.html) 应该是这样的：

<!DOCTYPE html>
<html>
  <body style="width: 300px">
    <button id="clickme">click me</button>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。