Tworzenie rozszerzeń chrome dla sortowania kart otwartych dla elementu DOM

0

Pytanie

Tworzę rozszerzenie chrome. Celem jest, aby posortować wszystkie otwarte karty z YouTube na czas trwania wideo (od niskiej do wysokiej).

Znalazłem ten kod z tego projektu na GitHub, tłumaczony w tym podręczniku:

popup.js

function byAlphabeticalURLOrder(tab1, tab2) {
  if (tab1.url < tab2.url) {
    return -1;
  } else if (tab1.url > tab2.url) {
    return 1;
  }
  return 0;
}

chrome.tabs.query({windowId: chrome.windows.WINDOW_ID_CURRENT}, (tabs) => {
  tabs.sort(byAlphabeticalURLOrder);
  for (let i = 0; i < tabs.length; i++) {
    chrome.tabs.move(tabs[i].id, {index: i});
  }
});

Ten kod działa, posortowane alfabetycznie. Jednak chcę go skonfigurować, aby posortować je według czasu trwania filmu.

Dlatego napisałem ten plik, aby uzyskać długość wideo ze wszystkich otwartych kart, ale wciąż nie mogę przejść do części "sortowanie lub przenoszenie kart".

popup.js

chrome.tabs.query({
  windowId: chrome.windows.WINDOW_ID_CURRENT
}, (tabs) => {
  chrome.tabs.query({}, function (tabs) {
    for (var i = 0; i < tabs.length; i++) {
      chrome.tabs.executeScript(tabs[i].id, {
        code: '(' + function () {
          return {
            seconds: document.querySelector("video").duration
          };
        } + ')()'
      }, function (result) {
        document.write(result[0].seconds + '<br>');
      });
    }
  });
});

Wniosek (Długość filmu w sekundach) - (Pojawia się w popup.html):

1229.041
187.501
510.581
609.941
1473.821
955.481
5464.281
59.201
1787.701
1523.941
1

Najlepsza odpowiedź

1

Jasne, że próbowałeś, ale można dodać te wartości do obiektów w tablicy w istniejącej pętli, a następnie posortować tę tablicę w drugim cyklu. Ponieważ executeScript jest asynchroniczna, trzeba poczekać na zakończenie pierwszego cyklu, co oznacza, że rozdzielczość listy obietnic, a następnie sortowanie listy według długości wideo, a następnie przenoszenie kart.

Oto co wymyśliłem dla MV3. Prawdopodobnie jest bardziej czyste sposoby, aby to zrobić (jestem dość nowy na tym).:

*Edycja: Drobne zmiany do czyszczenia organizacji kodu. Dołączony funkcja do działania (tzn. uruchamia się po naciśnięciu przycisku ikony rozszerzenia Chrome).

popup.js


chrome.action.onClicked.addListener(sortTabsbyDuration);

async function sortTabsbyDuration() {
  async function createListEntry(tabId, i) {
    return new Promise((resolve) => {
      if (/\.youtube\.com\/watch\?/.test(tabs[i].url)) {
        chrome.scripting.executeScript(
          { target: { tabId: tabId }, func: getYouTubeLength, args: [tabId] },
          (returnValue) => {
            resolve(returnValue[0].result);
          }
        );
      } else {
        resolve({
          tabId: tabId,
          vidLength: 9999999999,
        });
      }
    });
  }
  function getYouTubeLength(aTab) {
    let vidLength = document.querySelector("video").duration;
    if (!vidLength) {
      vidLength=1;
    }
    return {
      tabId: aTab,
      vidLength: vidLength,
    };
  }
  // MAIN:
  const tabs = await chrome.tabs.query({ currentWindow: true });
  let promiseList = [];
  for (var index = 0; index < tabs.length; index++) {
    promiseList.push(createListEntry(tabs[index].id, index));
  }
  const promisesFinished = Promise.all(promiseList);
  const sortedList = (await promisesFinished).sort((a, b) => {
    return a.vidLength - b.vidLength;
  });
  console.log(sortedList);
  for (let index = 0; index < sortedList.length; index++) {
    await chrome.tabs.move(sortedList[index].tabId, { index: index });
  }
}

manifest.json

{
    "manifest_version": 3,
    "name": "Sort Your Tubes",
    "version": "0.0.0.2",
    "action": {
        "default_title": "Click to sort YouTube videos by video length."
    },
    "background": {
        "service_worker": "popup.js"
    },
    "permissions": [
        "tabs",
        "scripting"        
    ],
    "host_permissions": [
        "*://www.youtube.com/*"        
    ]
}
2021-11-24 02:59:05

Wow, to było pomocne, dziękuję za wspaniałe odpowiedzi!
iamzeid

W innych językach

Ta strona jest w innych językach

Русский
..................................................................................................................
Italiano
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................