Bâtiment extension chrome pour trier les onglets ouverts par élément du DOM

Question 1

Je fais construire une extension chrome. L'objectif est de trier tous les onglets ouverts à partir de youtube par la durée de la vidéo (de faible à élevé).

J'ai trouvé ce code à partir de ce projet GitHub, a expliqué dans ce tutoriel:

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

Ce code fonctionne parfaitement avec tri par ordre alphabétique. Cependant, je veux l'adapter à trier par durée de la vidéo.

J'ai donc écrit ce fichier afin d'obtenir la durée de la vidéo à partir de tous les onglets ouverts, mais ne peut toujours pas se déplacer à la "tri ou de déplacer les onglets de la partie".

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

De sortie (Vidéo durée en secondes) - (Apparaît dans popup.html):

Question 2

Il n'est pas clair ce que vous avez essayé, mais vous pouvez ajouter ces valeurs à des objets de tableau dans votre boucle, puis trier ce tableau dans une deuxième boucle. Parce que executeScript est asynchrone, vous devez attendre que la première boucle à la fin, ce qui signifie la résolution d'une liste de promesses, alors le tri de la liste sur videolength, puis de déplacer les onglets.

Voici ce que j'ai trouvé pour MV3. Il y a probablement nettoyeur de façons de le faire (je suis assez nouveau à ce sujet):

*Modifications: modifications Mineures au nettoyage de code de l'organisation. Fonction attachée à l'action (I. e., fonctionne sur cliquant extension Chrome icône de bouton).

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

le manifeste.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

Il n'est pas clair ce que vous avez essayé, mais vous pouvez ajouter ces valeurs à des objets de tableau dans votre boucle, puis trier ce tableau dans une deuxième boucle. Parce que executeScript est asynchrone, vous devez attendre que la première boucle à la fin, ce qui signifie la résolution d'une liste de promesses, alors le tri de la liste sur videolength, puis de déplacer les onglets.

Voici ce que j'ai trouvé pour MV3. Il y a probablement nettoyeur de façons de le faire (je suis assez nouveau à ce sujet):

*Modifications: modifications Mineures au nettoyage de code de l'organisation. Fonction attachée à l'action (I. e., fonctionne sur cliquant extension Chrome icône de bouton).

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

le manifeste.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, qui a été utile, je vous remercie pour votre réponse très!

Bâtiment extension chrome pour trier les onglets ouverts par élément du DOM

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie