Question

我找到了一些有关如何创建简单chrome扩展程序的示例。现在，我想在chrome扩展程序弹出窗口中单击按钮时运行JS函数。我按照以下一般指南进行了扩展设置：

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

我专门按照以下说明操作，以便在单击按钮时使功能运行：

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

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

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

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

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
}

Answer 1

您的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>

Chrome扩展程序未响应点击事件

1 个答案: