對 chrome 擴展彈出窗口的更新消失了

Question

因此，我正在嘗試制作一個擴展程序，該擴展程序將放在 popup.html 中的搜索欄中的內容添加為帶有復選框和按鈕的 div，類似於已經存在的那個。 問題是每次我使用搜索時，div 都會正確添加然后立即消失。 例如，如果我在搜索欄中鍵入 hello 並在 popup.html 上點擊提交，則 hello div 將創建並顯示為單個框架然后消失，popup.html 將重置為搜索任何內容之前的位置。 我怎樣才能使內容保留在彈出窗口中，而不是立即重置為原始內容？

清單文件

{
  "manifest_version": 2,
  "name": "test 2.0",
  "version": "2.0",
  "description": "test extension",
  "browser_action": {
    "default_icon": "images/16.png",
    "default_popup": "popup.html"
  },
  "author": "Cormac",
  "commands": {},
  "incognito": "split",
  "permissions": [
    "activeTab",
    "declarativeContent",
    "storage",
    "tabs"
  ],
  "short_name": "test"
}

彈出窗口.html

<!DOCTYPE html>
<!-- popup when icon is clicked for extension-->
<html>
  <head>
    <style>
    </style>
  </head>
  <body>
    <div class="search-container">
      <form>
        <input id="search" type="text" placeholder="Search.." name="search">
        <button id="searchbut" class="submit" type="submit"></button>
      </form>
    </div>
    <div id="movies">
      <div id="mov">
        <p id = "p">Movie 1</p>
        <label class="switch">
          <input type="checkbox" checked>
          <span class="slider round"></span>
        </label>
        <button type="submit"></button>
      </div>
    </div>
  </body>
  <script src="popup.js"></script>
</html>

如果有人要搜索“電影 2”，則電影 2 應該放在 mov div 的副本中，並放在第一個 mov div 之后。 因此會有一個帶有電影 1 的 mov div 和帶有電影 2 的 mov div。

彈出窗口.js

'use strict';

let page = document.getElementById('movies');

document.addEventListener('DOMContentLoaded', function () {
  var button = document.getElementById('searchbut');
  button.addEventListener('click', function() {
        addMovie();
    });
});

function addMovie(){
    var x = document.getElementById("search");
    var movies = document.getElementById("movies");
    movies.innerHTML += "<p id = \"p\">" + x.value + "</p><label class=\"switch\"><input type=\"checkbox\" checked><span class=\"slider round\"></span></label><button type=\"submit\"></button></div>";
}

此外，在嘗試為這個虛擬內容更新尋找解決方案時，我發現一個常見問題是，一旦彈出窗口關閉，它也會重置。 這是我希望在解決當前問題后遇到的另一個問題。 如果有人也能解釋這一點，那就太棒了。

Answer 1

刪除表單標簽：

<div class="search-container">
    <input id="search" type="text" placeholder="Search.." name="search">
    <button id="searchbut" class="submit" type="submit"></button>
</div>

對 chrome 擴展彈出窗口的更新消失了

問題描述

1 個解決方案

解決方案1
0 2020-02-17 16:40:55

對 chrome 擴展彈出窗口的更新消失了

問題描述

1 個解決方案

解決方案1 0 2020-02-17 16:40:55

解決方案1
0 2020-02-17 16:40:55