对 chrome 扩展弹出窗口的更新消失了

Question

So I'm trying to make an extension that takes the contents put in the search bar in popup.html and adds it as a div with a checkbox and button similar to the one that already exists.因此，我正在尝试制作一个扩展程序，该扩展程序将放在 popup.html 中的搜索栏中的内容添加为带有复选框和按钮的 div，类似于已经存在的那个。 The issue is that every time I use the search the div will add properly then immediately disappear.问题是每次我使用搜索时，div 都会正确添加然后立即消失。 For example if I were to type hello into the search bar and hit submit on popup.html the hello div will create and show up for a single frame then disappear and the popup.html is reset to where it was before anything was searched for.例如，如果我在搜索栏中键入 hello 并在 popup.html 上点击提交，则 hello div 将创建并显示为单个框架然后消失，popup.html 将重置为搜索任何内容之前的位置。 How can I make it so that the content stays on the popup and doesn't just reset to the original immediately after?我怎样才能使内容保留在弹出窗口中，而不是立即重置为原始内容？

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弹出窗口.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>

If someone were to search for "Movie 2", then movie 2 should be put in a duplicate of the mov div and placed after the first mov div.如果有人要搜索“电影 2”，则电影 2 应该放在 mov div 的副本中，并放在第一个 mov div 之后。 Thus there would be a mov div with Movie 1 and a mov div with Movie 2.因此会有一个带有电影 1 的 mov div 和带有电影 2 的 mov div。

popup.js弹出窗口.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>";
}

Additionally in trying to find a solution for this phantom content update I've seen that a common issue is that once the popup is closed it will also reset.此外，在尝试为这个虚拟内容更新寻找解决方案时，我发现一个常见问题是，一旦弹出窗口关闭，它也会重置。 This is another issue I expect to encounter after this current one is resolved.这是我希望在解决当前问题后遇到的另一个问题。 If someone could explain that as well that would be amazing.如果有人也能解释这一点，那就太棒了。

Answer 1

Remove the form tags:删除表单标签：

<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