内容脚本&jQuery.从不同的网页下载/获取DOM

Content script & jQuery. Download/get DOM from different web page

本文关键字：网页 下载 DOM 获取 脚本 amp jQuery      更新时间：2023-09-26

我试图通过从不同页面获取url来修改img src属性。问题是我需要通过检查DOM来找到它，因为它不是静态数据；我将通过类和ID查找。

当时我对chrome扩展的了解非常有限。我刚开始。看看background.js 的"伪代码"部分

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
        }
    }
}

本质上是这样。如何下载不同的页面并使用它

既然你已经包含了它，并用它标记了你的问题，我将用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/*"]

使用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中，它甚至保持日志记录并填充：）

相关文章：