Открытие цепочки ссылок на сайтах с помощью браузерного расширения

Вопрос или проблема

Я пытаюсь написать расширение для браузера (для Chrome), которое запрашивает определенную ссылку на начальной странице, открывает её, запрашивает определённую ссылку на новой странице и снова открывает её. Мне удалось открыть первую ссылку. Однако вторая ссылка не открывается. Это проблема с разрешениями или что я могу сделать? Создание расширений для браузеров очень новое для меня, поэтому, возможно, я упускаю что-то очевидное.

manifest.json

{
    "manifest_version": 3,
    "name": "открывалка ссылок",
    "version": "1.0",
    "description": "открывает ссылки. Я надеюсь?",
    "permissions": [
      "tabs",
      "activeTab",
      "scripting"
    ],
    "action": {
      "default_popup": "popup.html"
    }
  }

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>открывалка ссылок</title>
  <style>
    body { width: 400px; padding: 20px; }
    #count { font-size: 16px; font-weight: bold; }
  </style>
</head>
<body>
  <div>
    <span>Открытые ссылки</span>
    <span id="count">-</span>
  </div>
  <script src="popup.js"></script>
</body>
</html>

popup.js

function openLinks(){
    const linksA = document.querySelectorAll("li[id='3']");
    for (const linkA of linksA){
      const iconList = linkA.querySelectorAll("i.icon.NextPage");
      if (iconList.length > 0){
        const link = iconList[0].parentElement.href;
        if (link != null){
          var pageA = window.open(link, "_blank");
          const linkB = pageA.document.querySelector("source").src;
          window.open(linkB, "_blank");
          return linkB;
        }
      }
    }
    return "_err";
};

document.addEventListener('DOMContentLoaded', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      func: openLinks
    });
  });
});

Мне также удалось перейти только со второй части кода с страницы A на страницу B. Но как только я пытаюсь связать это, это не работает.

Ответ или решение

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

Шаг 1: Измените popup.js

Ваш текущий код вызывает window.open() для открытия второй ссылки сразу после открытия первой. Однако это не сработает, потому что pageA представляет собой новый контекст, и вы не сможете непосредственно обращаться к его DOM через pageA.document. Вместо этого вам нужно ждать, пока первая страница загрузится, а затем открыть вторую ссылку.

Попробуйте использовать следующий подход с передачей сообщения через chrome.runtime.sendMessage:

function openFirstLinkAndGetSecondUrl() {
    const linksA = document.querySelectorAll("li[id='3']");
    for (const linkA of linksA) {
        const iconList = linkA.querySelectorAll("i.icon.NextPage");
        if (iconList.length > 0) {
            const link = iconList[0].parentElement.href;
            if (link != null) {
                chrome.runtime.sendMessage({url: link});
                return;
            }
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
        chrome.scripting.executeScript({
            target: {tabId: tabs[0].id},
            func: openFirstLinkAndGetSecondUrl
        });
    });
});

Шаг 2: Обработайте сообщение в background.js

Создайте файл background.js, который будет обрабатывать сообщения и откроет вторую ссылку после загрузки первой:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.url) {
        chrome.tabs.create({ url: message.url }, (tab) => {
            // Ждем загрузки первой страницы
            chrome.tabs.onUpdated.addListener(function onUpdated(tabId, changeInfo) {
                if (tabId === tab.id && changeInfo.status === 'complete') {
                    chrome.tabs.onUpdated.removeListener(onUpdated);
                    // После загрузки первой страницы, нам нужно открыть вторую ссылку
                    chrome.scripting.executeScript({
                        target: { tabId: tabId },
                        func: () => {
                            const linkB = document.querySelector("source").src;
                            return linkB;
                        }
                    }, (results) => {
                        // Открываем вторую ссылку
                        if (results && results[0]) {
                            chrome.tabs.create({ url: results[0] });
                        }
                    });
                }
            });
        });
    }
});

Шаг 3: Обновите manifest.json

Не забудьте добавить background.js в ваш manifest.json:

{
    "manifest_version": 3,
    "name": "link opener",
    "version": "1.0",
    "description": "opens links. I hope?",
    "permissions": [
        "tabs",
        "activeTab",
        "scripting"
    ],
    "action": {
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "background.js"
    }
}

Заключение

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

Оцените материал
Добавить комментарий

Капча загружается...