Question

因此，我正在尝试进行扩展，以使其内容放入popup.html的搜索栏中，并将其添加为带有一个复选框和按钮（类似于已存在的按钮）的div。问题是，每次使用搜索时，div都会正确添加，然后立即消失。例如，如果我要在搜索栏中键入hello并在popup.html上单击Submit，则hello div将创建并显示为单个帧，然后消失，并且popup.html重置为搜索任何内容之前的位置。如何使内容保留在弹出窗口中，而不仅仅是在弹出窗口后立即重置为原始内容？

manifest.json

{
  "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"
}

popup.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。

popup.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 个答案: