Поэтому я пытаюсь создать расширение, которое принимает содержимое, вставленное в строку поиска, во всплывающем окне. html и добавляет его в виде элемента div с флажком и кнопкой, аналогичной уже существующей. Проблема в том, что каждый раз, когда я использую поиск, div будет добавляться правильно, а затем сразу исчезать. Например, если бы я набрал hello в строке поиска и нажал на submit во всплывающем окне. html hello div создаст и отобразит один кадр, затем исчезнет, и всплывающее окно. html будет сброшено на прежнее место искал. Как я могу сделать так, чтобы содержимое оставалось во всплывающем окне, а не просто сбрасывалось до исходного сразу после?
манифеста. 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"
}
всплывающее окно. 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>
Если кто-то будет искать "Mov ie 2", то mov ie 2 следует поместить в дубликат mov div и помещается после первого mov div. Таким образом, будет MIV DIV с Mov ie 1 и MOV DIV с MOV ie 2.
всплывающее окно. 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>";
}
Кроме того, пытаясь найти решение для этого фантомного обновления контента, я обнаружил, что общая проблема заключается в том, что после закрытия всплывающего окна оно также сбрасывается. Это еще одна проблема, с которой я столкнусь после того, как будет решена текущая. Если бы кто-то тоже мог это объяснить, это было бы удивительно.