Как открыть всплывающее окно с расширением JavaScript?

Ответ 1

Команда разработчиков Chromium явно заявила, что не включит эту функциональность. См. Запрос функции: всплывающее вскрытие всплывающего пузыря программно:

Философия всплывающих окон для браузера и всплывающих окон заключается в том, что они должны запускаться под действием пользователя. Наше предложение состоит в том, чтобы использовать новую функцию уведомлений html...

Уведомления для настольных компьютеров можно использовать прогеймически, чтобы представить пользователю небольшую HTML-страницу, похожую на ваше всплывающее окно. Это не идеальная подстановка, но она может обеспечить необходимый тип функциональности.

Ответ 2

Команда Chrome создала метод для всплытия программно, но он был включен только как частный API, а планирует сделать его общедоступным, застопорился из-за проблем с безопасностью.

Итак, по состоянию на март 2018 года на данный момент вы все равно не можете этого сделать.

Ответ 3

Короткий ответ заключается в том, что вы не можете открывать программный код browserAction. Но вы можете создать dialog свой контент script, который эмулирует ваш browserAction и отображает это isntead (программно). Однако вы не сможете получить доступ к своему расширению background page из этого всплывающего окна, как вы можете, из своего popup.html. Вам нужно будет pass message вместо вашего расширения.

Ответ 4

Как уже упоминалось, для этого нет общедоступного API.

Один из обходных путей, который я нашел, - это запуск расширения в виде iframe внутри скрипта контента с нажатием кнопки. При этом фоновый скрипт генерирует URL-адрес расширения для скрипта контента, который должен быть установлен как iframe src, как показано ниже.

background.js

browser.runtime.onMessage.addListener((request) => {
  if (request.open) {
    return new Promise(resolve => {
      chrome.browserAction.getPopup({}, (popup) => {
        return resolve(popup)
      })
    })
  }
})

контент-scipt.js

const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')

b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
  evt.preventDefault()
  chrome.runtime.sendMessage({ open: true }, (response) => {
    i.src = response
    p.appendChild(i)
  })
})
p.appendChild(b)

Это открывает расширение в DOM страницы, на которой выполняется скрипт. Вам также нужно будет добавить нижеприведенное в манифест.

manifest.json

....
"web_accessible_resources": [
  "popup.html"
]
....

Ответ 5

У меня было такое же требование: когда пользователь нажимает на значок расширения, должно открыться небольшое всплывающее окно. В моем случае я писал расширение, которое будет давать обновления по выборочным акциям всякий раз, когда нажимается значок. Вот как выглядело мое всплывающее окно.

Если у вас было такое же требование, пожалуйста, прочитайте ответ ниже.

Вот как выглядел мой файл manifest.json.

Весь тяжелый подъем был обработан только файлом manifest.json. Существует раздел browser_action, внутри которого есть ключ с именем default_popup, просто поместите имя HTML файла, который вы хотите отобразить всплывающее окно.

Я хотел, чтобы мое расширение работало на всех страницах, поэтому я добавил атрибут matches в разделе content_scripts. Мне действительно не нужно было помещать файл jquery jquery-3.2.1.js внутри массива js, но диспетчер расширений не позволял мне оставить этот массив пустым.

Надеюсь, что это поможет, сделайте комментарий, если у вас есть какие-либо сомнения относительно ответа.