Расширение Google, как внедрить мой скрипт в активную вкладку и ссылку с помощью всплывающей кнопки? - PullRequest
0 голосов
/ 10 декабря 2018

Я сделал расширение с всплывающим окном и одной кнопкой.Когда эта кнопка нажата, расширение открывает все ссылки на странице с классом «.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"
    ]
}

1 Ответ

0 голосов
/ 10 декабря 2018

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

  1. добавить на исполняемую страницу popUp.html самозаполняемый скрипт, который установит соединение с фоновым скриптом расширения после загрузки. обмен сообщениями с расширениями

  2. на фоне расширений после получения соединения от popUp.html, вставка contentScript в activeTab

  3. , затем выпотребуется установить соединение с внедренным скриптом содержимого.Вы можете использовать тот же подход, что и в шаге 1, или использовать вкладки подключения API из фона в обратном вызове шага 2

  4. Затем вы можете искать все ссылки с помощью.link класс и передайте его обратно в popUp.html, используя настройку соединения.

PS: следуйте советам @wOxxOm по отладке, так как все части изолированы:

  • popUp.html - щелкните правой кнопкой мыши по кнопке действия браузера и выберите «Проверить всплывающее окно»

  • content_script - консоль отладки страницы

  • фоновый скрипт- дополнительный отладчик

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...