Stavební chrome rozšíření, aby třídit otevřené karty DOM element

Question 1

Jsem stavební rozšíření pro chrome. Cílem je seřadit všechny otevřené karty z youtube délka videa (nízká až vysoká).

Našel jsem tento kód z tohoto projektu GitHub, je vysvětleno v tomto návodu:

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 perfektně s třídění podle abecedního pořadí. Nicméně, já chci nastavit to, aby třídit podle trvání videa.

Tak jsem napsal tento soubor dostat délka videa z všechny otevřené karty, ale stále se nemůžu dostat k "třídění nebo pohybující se záložky" část.

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 (délka Videa v sekundách) - (Zobrazí se v popup.html):

Question 2

Není jasné, co jste se snažil, ale můžete přidat tyto hodnoty tak, aby objekty v poli ve vaší stávající smyčky a pak třídit že pole v druhé smyčky. Protože executeScript je asynchronní, budete muset počkat na první smyčky až do konce, což znamená, že řešení seznam sliby, pak třídění seznamu na videolength, pak se pohybující se záložky.

Tady je to, co jsem přišel s pro MV3. Tam jsou asi čistší způsoby, jak to udělat (jsem poměrně nový na to):

*Úpravy: Drobné úpravy vyčistit kód organizace. Připojené funkce k akci (I. e., spouští kliknutím na ikonu rozšíření Chrome tlačítko).

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/*"        
    ]
}

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

Není jasné, co jste se snažil, ale můžete přidat tyto hodnoty tak, aby objekty v poli ve vaší stávající smyčky a pak třídit že pole v druhé smyčky. Protože executeScript je asynchronní, budete muset počkat na první smyčky až do konce, což znamená, že řešení seznam sliby, pak třídění seznamu na videolength, pak se pohybující se záložky.

Tady je to, co jsem přišel s pro MV3. Tam jsou asi čistší způsoby, jak to udělat (jsem poměrně nový na to):

*Úpravy: Drobné úpravy vyčistit kód organizace. Připojené funkce k akci (I. e., spouští kliknutím na ikonu rozšíření Chrome tlačítko).

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/*"        
    ]
}

Páni, to bylo užitečné, děkuji vám za vaše skvělé odpovědi!

Stavební chrome rozšíření, aby třídit otevřené karty DOM element

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii