Блог

Я новичок в разработке расширений и создании всплывающего расширения.

В моем popup.js я добавил список событий к кнопке, на которую отправляется сообщение background.js .

 document.getElementById("scanAndRandomize").addEventListener("click", () => {
  chrome.runtime.sendMessage({
    message: "scan_watchlist",
  });
});
 

В моем background.js случае , когда это сообщение получено, я выполняю скрипт, вызываемый getMultimedias.js на активной странице, который в основном сканирует dom страницы, затем создает объекты и отправляет их строковую версию на мой popup.js via chrome.runtime.sendMessage .

 const executeScripstOnTab = (tabId, files) => {
  chrome.scripting
    .executeScript({
      target: { tabId: tabId },
      files,
    })
    .then((res) => {
      console.log("executed getMultimedias script");
    })
    .catch((err) => console.log(err));
};

chrome.runtime.onMessage.addListener((request, sender) => {
  if (request.message amp;amp; request.message === "scan_watchlist") {
    chrome.tabs.query(
      { currentWindow: true, active: true },
      function (tabArray) {
        if (tabArray amp;amp; tabArray[0]) {
          executeScripstOnTab(tabArray[0].id, ["./getMultimedias.js"]);
        }
      }
    );
  }
});
 

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

Пример ошибки ( getTextContentIfExists это функция, getMultimedias.js как вы можете догадаться):

 Uncaught SyntaxError: Identifier 'getTextContentIfExists' has already been declared
 

Мой вопрос в том, является ли это ужасным способом реализации этой идеи или есть способ экспортировать функции из выполняемого скрипта, получить доступ к переменным или что-то в этом роде? Какой другой дизайн был бы лучше для решения этой проблемы?