2012-02-25 59 views
1

我試圖創建一個userscript,它自動將當前網址的QR碼圖像添加到YouTube視頻頁面上的「共享」菜單。Youtube QR代碼生成UserScript不起作用

我知道旁邊沒有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

這裏沒有任何意義:''share-option-container ytg-box''一個'id'不能有空格。 – 2012-02-25 20:41:04

回答

2

您正在使用的document.getElementById的值不是該框的ID - 它是該元素的類的列表。要使用這樣的選擇器,你可以通過幾個調用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); 
    } 
} 
+0

謝謝您的回覆! 但請原諒我是一個可怕的學習者,你究竟是如何開啓分享盒的? (或者是否可以在每次打開分享框時執行腳本,而不是強行打開分享框本身?) – mickdekkers 2012-02-25 21:26:39

+0

只有當分享框存在時,才能運行代碼,方法是在計時器內檢查它。我冒昧地對這個答案進行了調整。 – 2012-02-25 21:47:27

+0

Rofl,你搞砸了mah youtubes! :P 它顯示正常,但現在它在每個時間間隔創建一個新圖像(最後一行註釋掉) 我應該檢查一下圖像是否已經存在於分享框中。 感謝您的幫助,無論如何:) – mickdekkers 2012-02-25 22:19:31