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

Answer 1

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

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

1 个答案: