HTML div 即使更新 CSS 显示标签以在 chrome 扩展程序中单击按钮后阻止，也不会保持可见

Question

我正在尝试构建一个 Google Chrome 扩展，其中包含弹出窗口中的一个按钮 window。

单击此按钮后，我想要某个 HMTL div（在我的例子中是 table），其初始 CSS 显示标签设置为 "none"到 "block" 以便 div 在弹出窗口 window 中可见。在我的 popup.js 文件中，我使用事件侦听器来处理此按钮点击。

我面临的问题是，一旦我单击按钮，显示的 div 就会出现，并在下一刻隐藏起来。它不会保持可见状态，看起来像初始 "display: none" 设置再次接管。请在下面找到我的代码并帮助我解决这个问题。

Manifest.json :

{
  "manifest_version": 2,

  "name": "Google Chrome Extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "icons": {
    "64": "icon.png"
  }
}

Popup.html:

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style type="text/css">

      body {        
        margin: 10px;
        white-space: nowrap;
      }

      #container {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }
      #displayTable {
        display: none;
        border-collapse: collapse;
        width: 100%;
      }      
      #myTable td, #myTable th {
        border: 1px solid #ddd;
        padding: 8px;
      }
      #myTable th {
        background-color: #ddd;
      }
    </style>

     <script src="popup.js"></script>

  </head>

  <body>
    <h1>Google Chrome Extension</h1>
    <div id="container">
      <form>
        Provide input:<br>
        <input type="text" id="inputText" maxlength="7"><br>
        <button id="shoot">Shoot</button>
      </form>
    </div>
    <div id="displayTable">
      <table id="myTable">
        <tr>
          <td>Column1</td>
          <td>Column2</td>
          <td>Column3</td>
        </tr>
        <tr>
          <td id = "col1"></td>
          <td id = "col2"></td>
          <td id = "col3"></td>
        </tr>
      </table>
    </div>
  </body>
</html>

Popup.js:

document.addEventListener('DOMContentLoaded', function () {
  var btn = document.getElementById('shoot');
  btn.addEventListener('click', getTable);
});

function getTable() {
  var col1 = document.getElementById('inputText').value;
  var col2 = 0;
  var col3 = 0;
  document.getElementById('col1').innerHTML = col1;
  document.getElementById('col2').innerHTML = col2;
  document.getElementById('col3').innerHTML = col3;
  document.getElementById('displayTable').style.display="block";
}

Answer 1

因为按钮在表单中，所以它正在提交表单并重新加载popup.html。最简单的方法就是将表单更改为 div.

如果你需要保持一个表单，你需要阻止表单提交，所以修改你的代码为：

document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('shoot');
    btn.addEventListener('click', getTable);
    var formElement = document.querySelector('form');
    formElement.addEventListener('submit', function(event) {
        event.preventDefault();
        return false;
    });
});

HTML div 即使更新 CSS 显示标签以在 chrome 扩展程序中单击按钮后阻止，也不会保持可见

HTML div doesn't remain visible even after updating the CSS display tag to block after a button click in chrome extension

html

javascript

css

google-chrome-extension

google-chrome-app