Как получить документ из текущей вкладки в background.js

Question

Я делаю расширение Chrome, которое показывает уведомления, когда пользователь нажимает кнопку в уведомлении, он открывает HTML-файл на новой вкладке через background.js, который мне нужно изменить после вызова API, но я не могу 'я не могу получить доступ к этой странице через мои background.js.

manifest.json Разрешения "permissions": ["http://*/*", "https://*/*","notifications", "webNavigation", "storage", "tabs","activeTab", "background" ]

часть background.js

chrome.notifications.onButtonClicked.addListener(function() {
  chrome.tabs.create({'url': 'index.html'}, (tab) => {
    chrome.tabs.executeScript(tab,add_new_card());
  });
});


function add_new_card(){
  var elm= document.getElementById("cards");
  console.log(document);
  let new_card = '<div class="col-5 col-md-3 col-lg-2 p-0 mr-2 col"> ' +
                     '<div class="card"> ' +
                        '<a class="text-center" href=""> ' +
                        '<div class=" f-16 text-dark mt-4 card-title"> '+
                        '<strong class="text-capitalize">NEW CARD</strong> '+
                      '</div> </a>  </div> </div> ';
  elm.append(new_card);
}

Я имеюмного чего перепробовал, но я всегда получаю null из document.getElementById ("cards").

Answer 1

Я еще не работал с командой executeScript, так как я всегда использовал для этого общие скрипты содержимого, но, насколько я вижу в официальной документации , вам нужно вставить свой кодвнутри JS-объекта { code: '<your_actual_code>' }, тогда как <your_actual_code> помещается в строку.

Например,

chrome.tabs.executeScript({ code: "console.log('Hello World!')" }, callback);

Если вы не хотите помещать свой код в полную строку, что я могу понять и не рекомендую, вы также можете исключить свой метод (без функцииобертка!) в дополнительный файл. В этом случае вы можете выполнить код через

chrome.tabs.executeScript({ file: "/my-code.js" }, callback);

Примечание callback необходимо снова определить в вашем background.js и добавить без скобок;в противном случае вы выполняете обратный вызов немедленно, до того, как будет выполнена команда executeScript! Если вам не нужен обратный вызов, вы можете исключить его из приведенных выше примеров кода.

Answer 2

У меня была похожая проблема, и я просто использовал window.open ('', 'window_name'). Для моего нажатия кнопки я заставил функцию создать новое всплывающее окно и дать ему имя. Затем у меня был другой файл js, который ссылается на тот же var существующийWin = window.open ('', "имя_окна"). Оттуда все мои элементы Dom были упомянуты с использованием существующего Win.document.getElementsByClassName («что угодно»). Мне пришлось прыгать через много обручей, потому что страница, которая открывалась, я не мог контролировать, поэтому мне пришлось копаться и находить правильные кадры и контекст javascript для работы. Если вы управляете index.html, у вас не должно быть этой проблемы.

window.open