Javascript DOM事件侦听器赢得'；不工作在铬延伸_Javascript_Google Chrome_Google Chrome Extension

Javascript DOM事件侦听器赢得'；不工作在铬延伸

javascript google-chrome google-chrome-extension

Javascript DOM事件侦听器赢得'；不工作在铬延伸,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我已经尝试了很多可能的解决方案，并查阅了文档，但到目前为止，一切都不起作用。它是一个非常基本的事件侦听器，用于侦听扩展中的按钮单击 script.js document.addEventListener('DOMContentLoaded', init); function init() { var b = document.getElementById('calculate'); b.addEventListener('click', displayDate(), false

我已经尝试了很多可能的解决方案，并查阅了文档，但到目前为止，一切都不起作用。它是一个非常基本的事件侦听器，用于侦听扩展中的按钮单击

script.js

document.addEventListener('DOMContentLoaded', init);

function init() {
    var b = document.getElementById('calculate');
    b.addEventListener('click', displayDate(), false);
}

manifest.json

    {  
  "name": "RE-Toolkit",
  "version": "0.1",
  "description": "Real Estate Toolkit",
  "manifest_version": 2,

  "permissions": [
    "<all_urls>"
  ],
    "background": {
    "scripts": ["/script.js"],
    "persistent": false
  },

  //ICON
  "browser_action": {
    "default_icon": {
        "512": "/home-icon.png"
    },
    "default_popup": "/popup.html"
  },

  "web_accessible_resources": ["script.js", "popup.html"]
}

{
“名称”：“RE工具包”，
“版本”：“0.1”，
“说明”：“房地产工具包”，
“清单版本”：2，
“权限”：[
""
],
“背景”：{
“脚本”：[“/script.js”]，
“持续”：假
},
//图标
“浏览器操作”：{
“默认_图标”：{
“512”：“/主页图标.png”
},
“默认弹出窗口”：“/popup.html”
},
“web可访问资源”：[“script.js”、“popup.html”]
}

popup.html

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css" src="style.css"></style>
<body>
    <div class="container">
        <div style="display: flex; align-items: center;">
            <img style="vertical-align: middle;" src="/home-icon.png" >
            <span>Date Calculator</span>
        </div>
        <p style="padding-top: 5px; padding-bottom: 5px; color: grey;">Note: Rules are as follows: Up to (7) days, weekends and holidays are skipped in the count. After (7) days, weekends and holidays are included in the count. If the last day of any deadline falls on a weekend or holiday, the deadline is pushed to the next available day.</p> 
        <div class="inputContainer">
            <label for="start">Start date:</label>
            <input class="input" type="date" id="start" name="trip-start" value="2020-01-01" min="2020-01-01" max="2020-12-31">
        </div>
        <div class="inputContainer">
            <label for="days">Days to Deadline:</label>
            <input type="number" min="1" class="input" id="days">
        </div>
        <div class="inputContainer">
            <button class="btn" id="calculate">Calculate</button>
        </div>
        <div>
            <h2 class="result"></h2>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>


日期计算器
注意：规则如下：最多（7）天，在计数中跳过周末和节假日。七（7）天后，周末和节假日计入计数。如果任何截止日期的最后一天是周末或假日，则截止日期将被推到下一个可用的日期。
开始日期：
截止日期前天数：
算计

我只是忽略了基本权限还是什么？我甚至不希望它与网页交互。本质上，我只是想把它作为一个应用程序，存储在我的浏览器中，以便快速使用

从manifest.json中删除“background”部分。除了弹出页面外，本节还声明了一个单独的隐藏背景页面。这项任务不需要这些。另外，您不需要加载DOMContentLoaded，因为您已经在页面末尾运行了脚本，所以DOM已经完全就绪。同时删除可访问的网页资源，它会暴露要注入网页的内容。我不敢相信这会那么容易。文档告诉我应该将其作为后台脚本运行。谢谢你的帮助。文档的措辞很糟糕。它意味着API事件，而不是DOM事件。