Блог

Я пытаюсь написать букмарклет, который анализирует ваш плейлист Youtube для просмотра позже и отображает данные в таблице на новой вкладке. Таблица становится интерактивной с помощью плагина jQuery DataTables. До сих пор я могу отображать таблицу на новой вкладке, но при вызове функции я получаю сообщение об ошибке jQuery('#mytable').DataTable() :

 Uncaught ReferenceError: jQuery is not defined
 

Я знаю, что это связано с асинхронной загрузкой библиотек, но я не знаю, как это исправить. Вот код:

 var links = document.querySelectorAll('div#container.style-scope.ytd-playlist-video-renderer');
var mylinks = [];
for (var i = 0; i < links.length; i  ) {
    var duration = links[i].querySelector('#text.style-scope.ytd-thumbnail-overlay-time-status-renderer').innerText.trim();
    var channelName = links[i].querySelector('#channel-name a').innerText;
    var channelLink = links[i].querySelector('#channel-name a').href;
    var title = links[i].querySelector('#video-title').title;
    var link = links[i].querySelector('#video-title').href;
    mylinks.push([duration, channelName, channelLink, title, link]);
}
function make_table(links) {
    var output = '<thead><tr><th>#</th><th>channel</th><th>video</th><th>duration</th></tr></thead><tbody>';
    for (var i=0; i < links.length; i  ) {
        output  = `<tr><td>${i 1}</td><td><a href="${links[i][2]}">${links[i][1]}</a></td><td><a href="${links[i][4]}">${links[i][3]}</a></td><td>${links[i][0]}</td></tr>`;
    };
    output  = '</tbody>';
    var w = window.open('');

    jquery_script = w.document.createElement('script');
    jquery_script.type = 'text/javascript';
    jquery_script.src = 'https://code.jquery.com/jquery-3.6.0.min.js'
    jquery_script.async = true;
    w.document.head.appendChild(jquery_script);

    datatables_css = w.document.createElement('link');
    datatables_css.rel = 'stylesheet';
    datatables_css.type = 'text/css';
    datatables_css.href = 'https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css'
    w.document.head.appendChild(datatables_css);

    datatables_script = w.document.createElement('script');
    datatables_script.type = 'text/javascript';
    datatables_script.src = 'https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js'
    datatables_script.async = true;
    w.document.head.appendChild(datatables_script);

    datatables_activation = w.document.createElement('script')
    datatables_activation.innerText = "jQuery(document).ready(function(){jQuery('#watchlater').DataTable();});";
    datatables_activation.defer = true;
    w.document.head.appendChild(datatables_activation);

    const table = w.document.createElement('table');
    table.id = 'watchlater';
    table.style.width = '100%';
    table.style.height = '100%';
    table.innerHTML = output;
    w.document.body.appendChild(table);
}
make_table(mylinks)