Youtube Code Generation UserScript не работает - PullRequest
Новая
       36

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

1 голос
/ 26 февраля 2012

Я пытаюсь создать скрипт пользователя, который автоматически добавляет изображение 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);
}());

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

Спасибо!

1 Ответ

2 голосов
/ 26 февраля 2012

Вы используете 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);
    }
}
...