Budova rozšírenie prehliadača chrome, triediť otvorené karty podľa DOM prvok

Question 1

Som budova rozšírenie prehliadača chrome. Cieľom je zoradiť všetky otvorené karty z youtube video trvanie (nízka až vysoká).

Našiel som tento kód z tohto GitHub projektu, vysvetlené v tomto tutoriále:

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});
  }
});

Tento kód funguje dokonale triedenie podľa abecedného poradia. No chcem prispôsobiť, ak chcete, aby sa video trvanie.

Tak som napísal tento súbor sa dostať trvanie od všetkých otvorených kariet, ale stále sa nemôžete dostať okolo "triedenie alebo presunutie kariet" časť.

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>');
      });
    }
  });
});

Výstup (Video trvanie v sekundách) - (Objaví sa v popup.html):

Question 2

Nie je jasné, čo ste sa snažili, ale môžete pridať tieto hodnoty objektov v poli v existujúcej slučky a potom triediť, že pole v druhej slučky. Pretože executeScript je asynchrónny, budete musieť čakať na prvej slučky na povrch, čo znamená, že riešenie zoznamu sľubuje, potom triedenie zoznamu na videolength, posunutím západky.

Tu je to, čo som vymyslel pre MV3. Tam sú asi čistejšie spôsoby, ako to urobiť (som celkom na toto nové):

*Úpravy: malé úpravy na vyčistené kód organizácie. Pripojené funkciu na akciu (T. j., beží na položku rozšírenie prehliadača Chrome ikonu tlačidlo).

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 });
  }
}

zoznam lodného nákladu.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/*"        
    ]
}

Bobby · Answer 1 · 2021-11-24T02:59:05

Nie je jasné, čo ste sa snažili, ale môžete pridať tieto hodnoty objektov v poli v existujúcej slučky a potom triediť, že pole v druhej slučky. Pretože executeScript je asynchrónny, budete musieť čakať na prvej slučky na povrch, čo znamená, že riešenie zoznamu sľubuje, potom triedenie zoznamu na videolength, posunutím západky.

Tu je to, čo som vymyslel pre MV3. Tam sú asi čistejšie spôsoby, ako to urobiť (som celkom na toto nové):

*Úpravy: malé úpravy na vyčistené kód organizácie. Pripojené funkciu na akciu (T. j., beží na položku rozšírenie prehliadača Chrome ikonu tlačidlo).

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 });
  }
}

zoznam lodného nákladu.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/*"        
    ]
}

Wow, to bolo užitočné, ďakujem vám za vaše skvelé odpoveď!

Budova rozšírenie prehliadača chrome, triediť otvorené karty podľa DOM prvok

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii