건축하는 크롬 확장 프로그램을 종류 열려있는 탭에 의해 요소 DOM

0

질문

내가 건축 크롬 확장입니다. 의 목표는 모든 종류 열려있는 탭에서 유튜브에 의해 동영상 기간(낮은 높이).

이 코드에서 이 GitHub 프로젝트,설명 은 이 튜토리얼:

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

이 코드를 완벽하게 작동으로 알파벳순으로 정렬 순서입니다. 그러나,내가 조정하려는 그것에 의하여 종류에 비디오 기간이 있습니다.

그래서 나는 이 파일을 동 기간에 열려 있는 모든 탭을 하지만 여전히 주위에 얻을 수있는"정렬하거나 움직이는 탭"부분입니다.

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

출력(비디오 시간을 초 단위)-(나타납 popup.html):

1229.041
187.501
510.581
609.941
1473.821
955.481
5464.281
59.201
1787.701
1523.941
1

최고의 응답

1

그것이 무엇인지 명확하지 않을 시도했지만,추가할 수 있습니다 그 값을 객체에 배열에서 기존 반복한 다음 정렬하는 배열에서 두 번째로 반복입니다. 기 때문에 executeScript 은 비동기,당신을 기다릴 필요가 첫 번째는 루프를 마무리하는 뜻을 해결하의 목록을 약속한 다음,목록을 정렬에 videolength,그때 이동하는 탭이 있습니다.

여기에 내가 함께 했을 위한 MV3. 거기에 아마 깨끗하는 방법이(나는 상당히 새로운에서 이):

*편집:사소한 편집 내용을 정리한 코드 조직입니다. 연결 기능은 작업(I.e., 에서 실행을 클릭 크롬 확장 프로그램 아이콘 버튼).

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,는 도움이 되었는지 당신은 훌륭한 대답입니다!
iamzeid

다른 언어로

이 페이지는 다른 언어로되어 있습니다

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