Расширение Google, как вставить мой скрипт в активную вкладку и создать ссылку с помощью всплывающей кнопки?
Я сделал расширение с всплывающим окном и одной кнопкой. Когда эта кнопка нажата, расширение открывает все ссылки на странице с классом '.link' новой вкладкой. Но при нажатии ничего не работает :( Как связать 2 скрипта?
popup.js
document.addEventListener('DOMContentLoaded', function() {
let openScreensBtn = document.getElementById('btnScreens');
openScreensBtn.addEventListener('click', function() {
let links = document.querySelectorAll('.link');
let arrLinks = Array.from(links);
let arrHref = [];
for (let i = 0; i < arrLinks.length; i++) {
arrHref.push(arrLinks[i].getAttribute('href'));
};
for (let i = 0; i < arrHref.length; i++) {
window.open(arrHref[i], '_blank');
};
});
});
popup.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Index</title>
<script src = "popup.js"></script>
</head>
<body>
<button id = "btnScreens">Open Screens</button>
</body>
</html>
manifest.json
{
"name": "Ext",
"description" : "",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "128.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
@wOxxOm спасибо! Но я не понимаю, как связать код сценария содержимого в моем файле script.js (например) chrome.tabs.executeScript ({code: 'document.body.style.backgroundColor = "orange"'}); на мою всплывающую кнопку :(
Убедитесь, что вы открыли правильные инструменты разработчика: щелкните всплывающее окно правой кнопкой мыши и выберите «Проверить». Вероятно, вы увидите ошибку о блокировке встроенного кода, что означает, что вам нужно прикрепить прослушиватель onclick в свой файл js, а не в HTML.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Подумайте об этом как о двух изолированных частях, которые могут взаимодействовать друг с другом с помощью фонового сценария расширения. Итак, что вам нужно сделать, это:
добавьте самоисполняемый скрипт на свою страницу popUp.html, который установит соединение с фоновым скриптом расширения после загрузки. обмен сообщениями
на фоне расширения после получения соединения от popUp.html внедрить contentScript в activeTab
тогда вам нужно будет установить соединение с внедренным контентом сценарий. Вы можете использовать тот же подход, что и на шаге 1, или использовать вкладки подключают API из фона в обратном вызове шага 2
Затем вы можете выполнить поиск по всем ссылкам с помощью класса .link и передать их обратно в popUp.html, используя настроенное соединение.
PS: следуйте совету @wOxxOm по отладке, так как все части изолированы:
popUp.html - щелкните правой кнопкой мыши кнопку действия браузера и выберите Проверить всплывающее окно.
content_script - консоль отладки страницы
фоновый скрипт - отладчик расширений
@wOxxOm ты прав. Спасибо, что поправили меня. Позвольте мне обновить ответ
Всплывающее окно представляет собой отдельную страницу с собственным URL-адресом расширения Chrome. Это похоже на отдельную вкладку с другого сайта, поэтому у нее есть собственный DOM и ссылки. См. Как получить доступ к DOM веб-страницы, а не к DOM страницы расширения?