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

帮我

我正在尝试创建我的第一个 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 extension that captures middle click and replaces 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>
帮我

有一段时间没有时间玩这个了,但今天再看看,找到了解决方案。我正在使用 Visual Studio 编写我的代码,这在保存我的代码的文件夹中创建了一个解决方案文件夹。因此,似乎 Google 扩展不喜欢在其中包含任何导致没有代码运行的额外位。

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Chrome扩展程序中的按钮上添加点击事件?

来自分类Dev

如何计算Chrome扩展程序上的页面onload事件?

来自分类Dev

在点击事件上扩展jQuery

来自分类Dev

addeventlistener无法捕获chrome扩展名中的gmail事件

来自分类Dev

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

来自分类Dev

拦截或捕获界面上的Chrome点击事件

来自分类Dev

Chrome扩展程序:处理点击

来自分类Dev

如何通过Chrome扩展程序删除事件监听器

来自分类Dev

在Chrome扩展程序中,如何在停用时触发事件?

来自分类Dev

如何取消Chrome扩展程序内容脚本中的事件绑定?

来自分类Dev

Chrome扩展程序/ jQuery可在一个站点上运行,但不能在其他站点上运行吗?尝试在点击链接时触发事件

来自分类Dev

Chrome扩展程序:如何全局捕获/处理内容脚本错误?

来自分类Dev

如何在Chrome扩展程序中捕获下载进度

来自分类Dev

如何在某些域上显示Chrome扩展程序?

来自分类Dev

如何使Chrome扩展程序在添加的每个新iframe上运行?

来自分类Dev

如何清理/禁用Chrome扩展程序上的网页

来自分类Dev

如何阻止亚马逊上的Chrome扩展程序弹出窗口

来自分类Dev

如何从Chrome扩展程序调用网页上的javascript函数?

来自分类Dev

如何在 ContextMenu 上运行脚本 单击 Chrome 扩展

来自分类Dev

为什么我的 Chrome 扩展程序无法点击 Google 文档中的“新评论”按钮?

来自分类Dev

Chrome扩展程序可打开Powerpoint /文档。这是如何运作的?

来自分类Dev

通过 Chrome 扩展点击页面上的按钮

来自分类Dev

如何从 chrome 扩展访问 iframe?

来自分类Dev

如何从Chrome扩展程序启动Chrome应用?

来自分类Dev

点击事件在Chrome扩展程序的“后台”页面中不起作用

来自分类Dev

点击事件在Chrome扩展程序选项页面中不起作用

来自分类Dev

Chrome扩展程序麦克风捕获

来自分类Dev

从Chrome扩展程序访问Google文档

来自分类Dev

文档上的主干JS事件点击

Related 相关文章

  1. 1

    如何在Chrome扩展程序中的按钮上添加点击事件?

  2. 2

    如何计算Chrome扩展程序上的页面onload事件?

  3. 3

    在点击事件上扩展jQuery

  4. 4

    addeventlistener无法捕获chrome扩展名中的gmail事件

  5. 5

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

  6. 6

    拦截或捕获界面上的Chrome点击事件

  7. 7

    Chrome扩展程序:处理点击

  8. 8

    如何通过Chrome扩展程序删除事件监听器

  9. 9

    在Chrome扩展程序中,如何在停用时触发事件?

  10. 10

    如何取消Chrome扩展程序内容脚本中的事件绑定?

  11. 11

    Chrome扩展程序/ jQuery可在一个站点上运行,但不能在其他站点上运行吗?尝试在点击链接时触发事件

  12. 12

    Chrome扩展程序:如何全局捕获/处理内容脚本错误?

  13. 13

    如何在Chrome扩展程序中捕获下载进度

  14. 14

    如何在某些域上显示Chrome扩展程序?

  15. 15

    如何使Chrome扩展程序在添加的每个新iframe上运行?

  16. 16

    如何清理/禁用Chrome扩展程序上的网页

  17. 17

    如何阻止亚马逊上的Chrome扩展程序弹出窗口

  18. 18

    如何从Chrome扩展程序调用网页上的javascript函数?

  19. 19

    如何在 ContextMenu 上运行脚本 单击 Chrome 扩展

  20. 20

    为什么我的 Chrome 扩展程序无法点击 Google 文档中的“新评论”按钮?

  21. 21

    Chrome扩展程序可打开Powerpoint /文档。这是如何运作的?

  22. 22

    通过 Chrome 扩展点击页面上的按钮

  23. 23

    如何从 chrome 扩展访问 iframe?

  24. 24

    如何从Chrome扩展程序启动Chrome应用?

  25. 25

    点击事件在Chrome扩展程序的“后台”页面中不起作用

  26. 26

    点击事件在Chrome扩展程序选项页面中不起作用

  27. 27

    Chrome扩展程序麦克风捕获

  28. 28

    从Chrome扩展程序访问Google文档

  29. 29

    文档上的主干JS事件点击

热门标签

归档