Создание всплывающего окна для chrome extension

12 марта 2022, 05:10

Необходимо при двойном клике получить доступ к DOM вкладки и нарисовать в определённом месте всплывающее окно.

Насколько я понимаю, именно content_scripts имеет доступ к DOM вкладки и может её изменять.

Была осуществлена попытка добавить новый класс в DOM для дальнейшего взаимодействия с ним.

content.js:

document.addEventListener("dblclick", function(event) { 
 
      let popup = document.body.classList.add('popup'); 
      let arrow = document.body.classList.add('arrow'); 
 
      // Remove all child elements 
      popup.innerHTML = ''; 
 
      popup.insertAdjacentHTML('beforeend', 
          `<div class="result">Some text</div>) 
}

manifest.json:

{ 
  "name": "", 
  "version": "1.0.93", 
  "description": "", 
  "permissions": ["tabs", "<all_urls>"], 
  "content_scripts": [{ 
    "matches": [ 
      "<all_urls>" 
    ], 
    "js": ["content.js"], 
    "css": ["myStyles.css"], 
    "all_frames": true 
  }], 
  "manifest_version": 2, 
  "web_accessible_resources": [ 
    "background.js" 
  ], 
  "background": { 
    "scripts": ["background.js"], 
    "persistent": false 
  } 
}

Но в таком случае исходный DOM полностью замещается на добавленные мной классы popup и arrow.

Почему так происходит и как этого избежать? Каким образом создаётся всплывающее окно для chrome extension и в каком файле прописывается его поведение? Любая помощь будет полезна.

Answer 1

// content.js 
 
document.addEventListener("dblclick", function(event) { 
	// координаты всплывающего окна относительно страницы 
	const xCoord = event.pageX, yCoord = event.pageY; 
	// шаблон всплывающего окна 
	const myPopup = document.createElement('div'); 
	myPopup.classList.add('my-popup'); 
	// содержание всплывающего окна 
	myPopup.innerHTML = '<p class="any-class">any content</p>'; 
	// позиция всплывающего окна в зависимости от места дабл-клика 
	myPopup.style.cssText = `top: ${yCoord}px; left: ${xCoord}px;`; 
	// если вам нужна переменная для body 
	const body = document.body; 
	body.append(myPopup) 
})

/* myStyles.css */ 
 
.my-popup { 
	width: 100px; 
	height: 100px; 
	background: teal; 
	position: absolute; 
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Создание всплывающего окна для chrome extension

Как правильно передать props

Дсесериализация части объекта как subobject

Автозаполнение логина и пароля в приложении под iOS

MaterialSkin.dll запуск программу с ней. C#