Я пытаюсь написать функцию JavaScript, которая будет открывать мое расширение, как при нажатии на значок расширения. Я знаю, как открыть свое расширение в новой вкладке:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
Но я хочу открыть всплывающее окно в верхнем правом углу браузера, например, при нажатии на значок расширения.
Команда разработчиков Chromium явно заявила, что не включит эту функциональность. См. Запрос функции: всплывающее вскрытие всплывающего пузыря программно:
Философия всплывающих окон для браузера и всплывающих окон заключается в том, что они должны запускаться под действием пользователя. Наше предложение состоит в том, чтобы использовать новую функцию уведомлений html...
Уведомления для настольных компьютеров можно использовать прогеймически, чтобы представить пользователю небольшую HTML-страницу, похожую на ваше всплывающее окно. Это не идеальная подстановка, но она может обеспечить необходимый тип функциональности.
Команда Chrome создала метод для всплытия программно, но он был включен только как частный API, а планирует сделать его общедоступным, застопорился из-за проблем с безопасностью.
Итак, по состоянию на март 2018 года на данный момент вы все равно не можете этого сделать.
Короткий ответ заключается в том, что вы не можете открывать программный код browserAction. Но вы можете создать dialog свой контент script, который эмулирует ваш browserAction и отображает это isntead (программно). Однако вы не сможете получить доступ к своему расширению background page из этого всплывающего окна, как вы можете, из своего popup.html. Вам нужно будет pass message вместо вашего расширения.
Как уже упоминалось, для этого нет общедоступного 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"
]
....
У меня было такое же требование: когда пользователь нажимает на значок расширения, должно открыться небольшое всплывающее окно. В моем случае я писал расширение, которое будет давать обновления по выборочным акциям всякий раз, когда нажимается значок. Вот как выглядело мое всплывающее окно.
Если у вас было такое же требование, пожалуйста, прочитайте ответ ниже.
Вот как выглядел мой файл manifest.json.
Весь тяжелый подъем был обработан только файлом manifest.json. Существует раздел browser_action, внутри которого есть ключ с именем default_popup, просто поместите имя HTML файла, который вы хотите отобразить всплывающее окно.
Я хотел, чтобы мое расширение работало на всех страницах, поэтому я добавил атрибут matches в разделе content_scripts. Мне действительно не нужно было помещать файл jquery jquery-3.2.1.js внутри массива js, но диспетчер расширений не позволял мне оставить этот массив пустым.
Надеюсь, что это поможет, сделайте комментарий, если у вас есть какие-либо сомнения относительно ответа.