如何編寫一個Chrome擴展插入新的<a> onclick AJAX調用？

我一直在搞Chrome擴展，以處理插入/替換hrefs到文件，以替代調用我的網絡上的下載服務器來執行您的行爲下載。我遇到的挑戰是，它不會顯示爲我可以定義內容腳本Javascript函數，我可以將所有onclick事件分配給。如何編寫一個Chrome擴展插入新的<a> onclick AJAX調用？

的manifest.json

{ 
    "name": "Test", 
    "version": "0", 
    "background": { 
     "scripts": ["background.js"] 
    }, 
    "manifest_version": 2, 
    "browser_action": { 
    "default_title": "Status", 
    "default_popup": "status.html", 
    "icons": ["icon.png"], 
    "default_icon": "icon.png" 
    }, 
    "content_scripts": [ { 
    "js": [ "jquery.js", "content.js" ], 
    "css": ["customStyles.css"], 
    "matches": [ "http://*"] 
    }], 
    "permissions": [ 
     "http://192.168.1.28/" 
    ] 
}

樣品我已經搞亂content.js：

$('.rRow1,.rRow2 .subject').find('a:first').each(function() { 
    $(this).after("&nbsp;<a class='headerlink' href='#' onclick='queue(this);'>[Queue]</a>"); 
}); 

var queue = "http://192.168.1.28:8081/adddownload.req?URL="; 
function queue(le) { 
    var link = $(le).attr('href'); 
    alert("Queuing: " + link); 
    $.ajax({ 
      type: 'GET', 
      url: queue, 
      dataType: 'html', 
      success: function(data) { 
       try { 
       console.log(data); 
       } catch(e) { 
       alert("Error: " + e.message); 
       return; 
       } 
      } 
    }); 
}

我的排隊功能拋出「未捕獲的ReferenceError：隊列沒有定義」在Chrome安慰。現在我知道內容腳本在「孤立的世界」中運行，現在我知道爲什麼排隊是未定義的。

我有點失落是一種實現所需功能的方式。我應該在後臺處理ajax調用，並從內容腳本發佈消息嗎？我也嘗試每個新插入的元素addEventListener沒有運氣。

更新好吧，這就是我想出的。它是功能性的，但我真的不喜歡爲每個元素附加一個新的Ajax代碼副本。如果我有一種方法來引用一個完成這項工作的單一功能，那麼效率會更高。有什麼建議麼？

$('.rRow1,.rRow2 .subject').find('a:first').each(function() { 
    $(this).after("&nbsp;<a class='dlqueue' href='#'>[Queue]</a>"); 
    var link = $(this).attr('href'); 
    $(this).next().click(function() { 
     $.ajax({ 
       type: 'GET', 
       url: "http://192.168.1.28:8081/adddownload.req?URL="+encodeURIComponent(link), 
       dataType: 'html', 
       success: function(data) { 
       console.log("Download queued."); 
       } 
     }); 
    }); 
});

這是做這種事情的最好方法嗎？謝謝！

來源

2013-11-23 garlicman

您可以在content.js中定義所需的任何函數和變量，並且可以按照預期使用content.js訪問它們。它看起來像是遇到了問題，因爲您定義了url var和具有相同名稱的函數。 – abraham

聖地獄。就是這樣。你知道我從popup.js中取出了這個函數，我在這裏命名了var不同的東西，並沒有考慮在這裏重命名它。昨晚我正在擺弄這個......謝謝！ – garlicman

無法重新編輯我的回覆，但這是一個問題，但不是問題。您可以將內容腳本中的函數附加到DOM中的元素，但不能從DOM中調用內容腳本中的函數，這正是我在第一個示例中所做的。 – garlicman

好的，自己回答這個問題。感謝亞伯拉罕指出一個變量和函數名稱是一樣的。這是一個問題，但不是真正的問題。

DOM不能調用在內容腳本中定義的函數。內容腳本可以爲DOM分配一個函數，但它會存在於DOM中，而不是內容腳本中。例如：

$(this).after("&nbsp;<a class='headerlink' href='#' onclick='queue(this);'>[Queue]</a>");

這是一個DOM元素的onclick呼籲，只有在內容腳本存在的功能，但它從DOM訪問。相反，我需要將該函數分配給內容腳本中的DOM對象。這裏是更新後的工作示例：

$('.rRow1,.rRow2 .subject').find('a:first').each(function() { 
    //$(this).after("&nbsp;<a class='dlqueue' href='#' onclick='queue(this);'>[Queue]</a>"); 
    var el = this; 
    $(el).after("&nbsp;<a class='test' href='#'>[Queue]</a>"); 
    $(el).next().click(function() { 
     queue(el); 
    }); 
}); 

var endpoint = "http://192.168.1.28:8081/adddownload.req?URL="; 
var username = "test"; 
var password = "test"; 
function queue(el) { 
    var link = $(el).attr('href'); 
    $.ajax({ 
      type: 'GET', 
      url: endpoint+link, 
      dataType: 'html', 
      username: username, 
      password: password, 
      success: function(data) { 
      console.log("Download queued."); 
      } 
    }); 
}

來源

2013-11-24 17:29:51 garlicman

如何編寫一個Chrome擴展插入新的<a> onclick AJAX調用？

回答

相關問題