Chrome扩展程序-如何捕获vanillaJS文档上的点击事件

Question

我正在尝试创建我的第一个chrome扩展程序，我想做的是每次用户单击时都运行一个函数。

这是我的清单文件：

{
  "manifest_version": 2,
  "name": "MyName",
  "description": "MyDescription",
  "version": "1.0.0",
  "icons": {
    "128": "icon_128.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab" ],
  "content_scripts": [
    {
      "matches": [ "<all_urls>" ],
      "js": [ "contentscript.js" ],
      "all_frames":  true
    }
  ]
}

然后，我创建了一个名为“ contentscript.js”的js文件，其中包含以下内容：

document.addEventListener("click", clickHandler);

function clickHandler() {
    alert("test");
}

除了这篇文章之外，我在网上找不到很多东西： Chrome扩展程序捕获了中间点击并替换了URL ，但是似乎使用的是jQuery，我想尽可能避免这种情况（我尝试根据上述问题修改我的项目，在没有jQuery的情况下也可以正常工作，但是一旦我在开发人员模式下将项目加载到chrome并单击页面，就什么也没有发生。

如果有人能指出正确的方向，我将不胜感激。

编辑：

这是我的popup.html文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" type="text/css" href="popup.css" />
        <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
        <script src="popup.js"></script>
        <title>wow!</title>
    </head>
    <body>
        <div class="main-content">
            <h1 class="main-title">w0w!</h1>
        </div>       
    </body>
</html>

Answer 1

有一阵子没时间玩这个，但今天又换了个样子，找到了解决方案。 我使用Visual Studio编写代码，这创建了一个解决方案文件夹，其中保存了我的代码所在的文件夹。因此，似乎Google扩展不喜欢其中包含任何多余的位而导致没有代码运行。

Chrome扩展程序-如何捕获vanillaJS文档上的点击事件

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-08-26 15:53:57

Chrome扩展程序-如何捕获vanillaJS文档上的点击事件

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-08-26 15:53:57

解决方案1
0 已采纳 2018-08-26 15:53:57