Как значение из инпутов перевести в переменную файла js?

Question

[ttter]

У меня есть гугл расширение, в popup.html есть три инпута и кнопка

<p class="in">Name</p>
   <input type="text" id="name">

   <p class="in">Last name</p>
   <input type="text" id="lastname">

   <p class="in">Link</p>
   <input type="text" id="link">

   <button type="submit" id="save">Save</button>

В эти инпуты я ввожу данные, при нажатии кнопки мне нужно сохранить значения в переменные и запустить js код на сайте с этими переменными. Как это реализовать? Заранее спасибо.

Answer 1

[Dmitriy Grape]

У элементов подобного типа есть поле value

То бишь вы сохраняете значение этого поля в какую-то переменную (либо сразу подставляете куда-то без выделения памяти):

const inputValue = document.getElementById("something").value;

Если вам интересно, какие еще есть поля у подобных элементов, то можете просто вывести в консоль переменную, хранящую этот элемент (опять же, переменную создавать не обязательно, можно сразу в качестве аргумента подставить getElement...(), но как по мне, это бьёт по читаемости кода):

const input = document.getElementById("something");

console.log(inputValue)

Comments

[ttter]

А как мне скрипт с этими переменными запустить на странице сайта?

[Dmitriy Grape]

Это расширение браузера, вам надо прописывать пути в файле manifest.json.

Загуглите примеры заполнения этого файла.

[ttter]

он у меня заполнен и расширение запускается, но не получается запустить скрипт на странице

{
	"manifest_version": 2,
	"name": "my",
	"description": "myy",
	"version": "1.0.0",
    "content_security_policy": "[unsafe-inline]",
    "icons": {"128": "Group 128.png"},
	"browser_action": {
		"default_icon": "Group 1.png",
		"default_popup": "popup.html"
	},
    "content_scripts": [
   {
     "matches": ["https://*"],
     "js": [ "jquery.js", "injected.js" ],
     "all_frames": true,
	  "run_at": "document_end"
      
   }    
], 
    
    
	   "permissions": ["activeTab"]
}

[Dmitriy Grape]

На странице, в плане, расширения? Или на странице активной вкладки?

[ttter]

на странице вкладки

[Dmitriy Grape]

Если второе, то вот: background.js

[Dmitriy Grape]

И вот: тоже background.js

[ttter]

Rag’n’ Code Man, там ничего дельного не написано. Почитав разные статьи я понял, что нужно из background.js передать значения этих переменных в injected.js и его уже запускать, но как это сделать?

[Dmitriy Grape]

Честно, никогда не писал расширения, только гайды перед сном читал, чтобы успокоиться :)

[ttter]

Ладно, спасибо за напутствие

Answer 2

[Никита Михайлов]

На кнопку вешаете событие click. Собственно далее просто вытаскиваете значения полей

click
Получение данных из input

Answer 3

[Александр]

<button type="submit" id="save" onclick="func1()">Save</button>

const func1 = () => {
  const name = document.getElementById("name").value;
  const lastname = document.getElementById("lastname").value;
  const link = document.getElementById("link").value;
  console.log(`Name: ${name}\nLast Name: ${lastname}\n Link: ${link}`)
}

Answer 4

[Tim]