Блог

Довольно новичок в chrome extensions, поэтому в процессе создания чего-то довольно простого с помощью простого всплывающего окна.

Все работает нормально, но мне пришлось использовать chrome.tabs.executeScript, чтобы получить массив содержимого из DOM (ссылки), затем идея состоит в том, чтобы представить их во всплывающем окне. Поскольку chrome.tabs.executeScript выполняется синхронно по сравнению с остальными, работающими асинхронно, я получаю неопределенные ошибки.

Чтобы попытаться обойти это, я обернул вызов chrome.tabs.executeScript внутри promise и, используя синтаксис then(), вызвал мои последующие функции. К сожалению, массив, который я заполняю, все еще не определен, поэтому, похоже, обещание работает не так, как ожидалось.

Не судите о соглашении об именах, оно все еще WIP, и все будет приведено в порядок.

Mainfest:

  {
  "manifest_version": 2,

  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.1",

  "permissions": [
    "https://secure.flickr.com/",
    "activeTab"
  ],
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popup.html"
  }
}
 

popup.js

 globalThis.getText = [];

var kittenGenerator = {

    requestKittens: function () {
        return new Promise(function(resolve, reject) {
            chrome.tabs.executeScript({ code: `(${inContent})()` });
            resolve();
            }
        );

        function inContent() {
            const el = document.getElementsByTagName('audio');
            this.getText = el;
            //DEBUG
            for (var i = 0; i < this.getText.length; i  ) {
                console.log(this.getText[i]);
            }
        }
    },


  showTracks_: function (e) {
      var kittens = this.getText;
      console.log(this.getText);
      for (var i = 0; i < kittens.length; i  ) {
          console.log(kittens[i]);
          var img = document.createElement('button');
          img.id = 'dl';
          img.value = kittens[i].getAttribute('src');
          img.innerText = 'Dl';
          document.body.appendChild(img);
      }
  }
};

// Run our kitten generation script as soon as the document's DOM is ready.
document.addEventListener('DOMContentLoaded', function () {
    kittenGenerator.requestKittens().then(kittenGenerator.showTracks_());
});
 

Идея состоит в том, чтобы захватить определенные аудиоэлементы из DOM, а затем я могу отобразить список кнопок во всплывающем окне.

Если кто-нибудь сможет определить, где я ошибся с обещаниями, я был бы признателен.

Проблема заключается не во внешнем интерфейсе executeScript (обещание или обратный вызов), а в том факте, что ваш inContent на самом деле ничего не возвращает, поэтому (${inContent})() оценивает undefined .

Так что просто верните что-нибудь значимое:

 function inContent() {
  return [...document.getElementsByTagName('audio')]
    .map(el => [el.id, el.textContent]);
}
 

Возвращаемые данные должны быть совместимы с JSON (number, string, boolean, null и объекты / массивы, состоящие из этих типов). Попытка вернуть элемент DOM или обещание или карту / набор приведет к пустому {} .