Question

我正在尝试通过从不同页面获取url来修改img src属性。我需要通过检查DOM来找到它，因为它不是静态数据;我将通过课程和ID来查看。

我对铬扩展的了解在当时非常有限。基本上我刚刚开始。查看background.js的“PSEUDO CODE”部分

的manifest.json

{
    "manifest_version" : 2 ,
    "name": "#####" ,
    "version": "1.0" ,
    "description": "#####" ,
    "browser_action": 
    {
        "name": "#####" ,
        "icons": ["icon.png"] ,
        "default_icon": "icon.png"
    },
    "content_scripts": [ 
    {
        "js": [ "jquery.min.js", "background.js" ] ,
        "matches": [ "http://*.#####.com/encounters/promospp.phtml"] ,
        "run_at": "document_end"
    }]
}

background.js

var l = document.getElementsByTagName("div");

for (var i = 0; i < l.length; i++)
{
    var obj = l[i].parentNode;
    if (l[i].getAttribute("class") && l[i].getAttribute("class") == "user_contact")
    {
        var div = l[i];
        var id = div.getAttribute("id").replace("u_", "0");
        var profileUrl = "../" + id + "/";

        var imgs = div.getElementsByClassName("userpic");
        log("found img.userpic : " + imgs.length);

        if (imgs && imgs.length > 0)
        {
            var img = imgs[0];

            var alink = document.createElement('a');
            img.parentNode.appendChild(alink);

            alink.setAttribute("href", profileUrl);
            alink.appendChild(img);

            // PSEUDO CODE - the unknown
            //
            // download profileUrl page html
            // search for given div element
            // pull src attribute value from it
            // apply it to img here

        }
    }
}

所以从本质上讲。如何下载不同的页面并使用它

Answer 1

既然你已经把它包括在内并用它标记你的问题，我将用jQuery回答，我希望你不介意。首先，我重写了jQuery中的代码：

$('div.user_contact').each(function(){
  var id = $(this)[0].id.replace('_u','0');
  var profileUrl = "../" + id + "/";
  var imgs = $(this).find('.userPic');
  if(imgs.length > 0){
    var alink = $(document.createElement('a'));
    $(this).append(alink);
    $(alink).attr('href',profileUrl);
    $(alink).append(imgs[0]);

    //Here is where you get the page and search for the div you want
    $.get(profileUrl,function(data){
      //Since I don't know the layout of what you are looking for
      //I will just put in some placeholder
      $(imgs).first().attr('src',$('img.youWant',data).first().attr('src'));
    });

    // Since $.get is asynchronous, doing it like this might cause problems
    // if there is more than one div.user_contact.
    // In the case where there are a low number of them and you are fine running
    // blocking synchronous code, then you can do it with this instead:
    // $.ajax(profileUrl,{async:false,success:function(data){
  }
});

您还需要在$.get来自的网站的清单中包含权限。像这样：

"permissions":["*://*.badoo.com/*"]

Answer 2

使用BeardFist解决方案+一些修复最终代码如下所示：

$('div.user_contact').each(function()
{
  var id = $(this)[0].id.replace('u_','0');
  log(id);
  var profileUrl = "../" + id + "/";
  log(profileUrl);
  var imgs = $(this).find('.userpic');

  if(imgs.length > 0)
  {
    var alink = $(document.createElement('a'));
    $(imgs[0]).parent().append(alink);
    $(alink).attr('href',profileUrl);
    $(alink).append(imgs[0]);

    $.get(profileUrl, function(data)
    {
      $(imgs[0]).attr('src',$('img.pf_phts_b_pht', data).attr('src'));
    });
  }
});

它非常好用。整个html位于data内，它甚至可以保持不变的东西：）

内容脚本＆amp; jQuery的。从不同的网页下载/获取DOM

2 个答案: