Youtube QR Code Generation UserScript не работает

Question

Я пытаюсь создать usercript, который автоматически добавляет изображение QR-кода текущего URL-адреса в меню «Поделиться» на странице видео на YouTube.

Я ничего не знаю о JavaScript, UserScript, HTML и т.д. Но, это то, что я до сих пор:

// ==UserScript== 
// @name   Youtube QR ShareLink 
// @description Displays QR of youtube URL 
// @version  0.1 
// @match   http://www.youtube.com/watch* 
// @match   https://www.youtube.com/?* 
// @match   http://www.youtube.com/?* 
// @match   https://www.youtube.com/watch* 
// @include  http://www.youtube.com/?* 
// @include  http://www.youtube.com/watch* 
// @include  https://www.youtube.com/?* 
// @include  https://www.youtube.com/watch* 
// ==/UserScript== 

(function() { 
    var shareDiv = document.getElementById('share-option-container ytg-box'); 
    var qrIMG = 'http://chart.googleapis.com/chart?chl=' + window.location.href + '&chld=M%7C0&cht=qr&chs=125x125'; 
    var img = document.createElement('qrcode'); 
    img.src=qrIMG; 
    img.width=125; 
    img.height=125; 
    shareDiv.appendChild(img); 
}()); 

Unsurprisingly, он не работает. Может ли кто-нибудь рассказать мне, что это я делаю неправильно?

Спасибо!

Answer 1

Вы используете document.getElementById со значением, которое не является идентификатором окна - это список классов для этого элемента. Чтобы использовать подобный селектор, вы можете сделать это с помощью пары вызовов document.getElementsByClassName, или вы можете использовать document.querySelector('.share-option-container .ytg-box'), или вы можете использовать jQuery для выполнения этого выбора.

Вторая проблема заключается в том, что вы создаете элемент с именем «qrcode», но вы должны создать элемент img.

Вы пересмотрели код должен выглядеть следующим образом:

// ==UserScript== 
// @name   Youtube QR ShareLink 
// @description Displays QR of youtube URL 
// @version  0.1 
// @match   http://www.youtube.com/watch* 
// @match   https://www.youtube.com/?* 
// @match   http://www.youtube.com/?* 
// @match   https://www.youtube.com/watch* 
// @include  http://www.youtube.com/?* 
// @include  http://www.youtube.com/watch* 
// @include  https://www.youtube.com/?* 
// @include  https://www.youtube.com/watch* 
// ==/UserScript== 

(function() { 
    var shareDiv = document.querySelector('.share-option-container .ytg-box'); 
    var qrIMG = 'http://chart.googleapis.com/chart?chl=' + window.location.href + '&chld=M%7C0&cht=qr&chs=125x125'; 
    var img = document.createElement('img'); 
    img.src=qrIMG; 
    img.width=125; 
    img.height=125; 
    shareDiv.appendChild(img); 
}());

Обратите внимание, что на YouTube, элемент, который вы захватывая не существует до тех пор, пока коробка доля фактически открыта, так что вам нужно для фактического обращения с открытием пакета акций перед тем, как остальная часть вашего кода будет запущена. Я протестировал это в своем браузере, и приведенный выше код работает хорошо, как только откроется окно обмена, но не раньше.

Вы можете это объяснить, используя таймер. Изменение кода:

var shareBoxCheckInterval = setInterval (AddQR_Code, 200); 

function AddQR_Code() { 
    var shareDiv = document.querySelector ('.share-option-container .ytg-box'); 
    if (shareDiv) { 
     var qrIMG = 'http://chart.googleapis.com/chart?chl=' 
        + window.location.href + '&chld=M%7C0&cht=qr&chs=125x125'; 
     var img  = document.createElement ('img'); 
     img.src  = qrIMG; 
     img.width = 125; 
     img.height = 125; 
     shareDiv.appendChild (img); 

     /*-- If you want to continually check for new share boxes, on the 
      same page, comment out this next line. 
     */ 
     clearInterval (shareBoxCheckInterval); 
    } 
}