添加html元素的简单用户脚本

我想为Chrome编写一个用户脚本，它简单地将一个元素添加到网站，但是使用我有限的Javascript知识，我确实不是很成功。主题添加html元素的简单用户脚本

例子：

<html> 
<body> 
<p class="listcaption">......................................</p> 
<p class="listrow" id="listrow_aka_battlep"><span class="small"><b><a href="item.php?action=academy"></a>-: </b>/<b> : </b>0000</span></p> 
<p class="listrow" id="listrow_char_mission"><a href="ability.php">text</a> | <a href="item.php?action=missiondesc"> text</a></p> 
<p class="listrow" id="listrow_clan"><b>some</b><a href="clanmenu.php?action=manageclan">-------</a> &nbsp;|&nbsp; <a href="fight.php?action=groupjoinrand" target="mainFrame" title="group"></a></p> 
<p class="listrow" id="listrow_group"><b>group: </b><a href="clanmenu.php?action=groupmenu">~~~~~</a></p> 
<p class="listrow" id="listrow_lifep"><b>LP: </b>(<span class="healthok"><b>000</b></span>/000)</p> 
<p class="listrow" id="listrow_money"><b>gold: </b>629 &nbsp;&nbsp;&nbsp;&nbsp;(<a href="item.php?action=moneydrop1"></a> | <a href="item.php?action=moneytransfer1"></a>)</p> 
<p class="listrow" id="listrow_int"><b>......</b>0000<span class="healthok" id="speedok">000</span>000</p> 
<p class="listrow" id="listrow_attackp"><b>text</b>000<span class="valueincreased">000</span>text</p> 
<p class="listrow" id="listrow_attackw" title=""><b>............</b>text</p> 
<p class="listrow" id="listrow_defensep"><b>?????????????</b>0000<span class="valueincreased">000000</span></p> 
<p class="listrow" id="listrow_defensew" title="100%"><b>000000000000</b>texts</p> 
<p class="listrow" id="listrow_neck"><b>neck:</b>something</p> 
<p class="listrow" id="listrow_special"><a href="item.php?action=special">Special</a></p><p class="listrow" id="listrow_status"><span class="small"></span></p> 
</body></html>

所需的输出：

<html> 
<body> 
<p class="listcaption">......................................</p> 
<p class="listrow" id="listrow_aka_battlep"><span class="small"><b><a href="item.php?action=academy"></a>-: </b>/<b> : </b>0000</span></p> 
<p class="listrow" id="listrow_char_mission"><a href="ability.php">text</a> | <a href="item.php?action=missiondesc"> text</a></p> 
<p class="listrow" id="listrow_clan"><b>some</b><a href="clanmenu.php?action=manageclan">-------</a> &nbsp;|&nbsp; <a href="fight.php?action=groupjoinrand" target="mainFrame" title="group"></a></p> 
<p class="listrow" id="listrow_group"><b>group: </b><a href="clanmenu.php?action=groupmenu">~~~~~</a></p> 
<p class="listrow" id="listrow_lifep"><b>LP: </b>(<span class="healthok"><b>000</b></span>/000)</p> 
<p class="listrow" id="listrow_money"><b>gold: </b>629 &nbsp;&nbsp;&nbsp;&nbsp;(<a href="item.php?action=moneydrop1"></a> | <a href="item.php?action=moneytransfer1"></a>)</p> 
<p class="listrow" id="listrow_int"><b>......</b>0000<span class="healthok" id="speedok">000</span>000</p> 
<p class="listrow" id="listrow_attackp"><b>text</b>000<span class="valueincreased">000</span>text</p> 
<p class="listrow" id="listrow_attackw" title=""><b>............</b>text</p> 
<p class="listrow" id="listrow_defensep"><b>?????????????</b>0000<span class="valueincreased">000000</span></p> 
<p class="listrow" id="listrow_defensew" title="100%"><b>000000000000</b>texts</p> 
<p class="listrow" id="listrow_neck"><b>neck:</b>something</p> 
<p class="listrow" id="listrow_newlist"><a href="item.php?action=activate&amp;act_item_id=000029"><img src="../images/items/image1.gif" width="20" height="20" title="1" border="0" align="absmiddle"></a> |&nbsp; <a href="item.php?action=watch&amp;act_item_id=000016"><img src="../images/items/image2" width="20" height="20" title="2" border="0" align="absmiddle"></a>&nbsp;|&nbsp; <a href="item.php?action=watch&amp;act_item_id=0000061"><img src="../images/items/image3" width="20" height="20" title="3" border="0" align="absmiddle"></a>&nbsp;|&nbsp; <a href="item.php?action=watch&amp;act_item_id=000095"><img src="../images/items/image4.gif" width="20" height="20" title="4" border="0" align="absmiddle"></a></p> 
<p class="listrow" id="listrow_special"><a href="item.php?action=special">Special</a></p><p class="listrow" id="listrow_status"><span class="small"></span></p> 
</body></html>

我只是想用户脚本会将此名单：

<p class="listrow" id="listrow_newlist"><a href="item.php?action=activate&amp;act_item_id=000029"><img src="../images/items/image1.gif" width="20" height="20" title="1" border="0" align="absmiddle"></a> |&nbsp; <a href="item.php?action=watch&amp;act_item_id=000016"><img src="../images/items/image2" width="20" height="20" title="2" border="0" align="absmiddle"></a>&nbsp;|&nbsp; <a href="item.php?action=watch&amp;act_item_id=0000061"><img src="../images/items/image3" width="20" height="20" title="3" border="0" align="absmiddle"></a>&nbsp;|&nbsp; <a href="item.php?action=watch&amp;act_item_id=000095"><img src="../images/items/image4.gif" width="20" height="20" title="4" border="0" align="absmiddle"></a></p>

谢谢大家对我的帮助！

更新：

我尝试启动增加这个要素：

<a href="item.php?action=activate&amp;act_item_id=000029"><img src="../images/items/image1.gif" width="20" height="20" title="1" border="0" align="absmiddle"></a>

它可能是错误的方式来做到这一点。（因为它的工作）：

// ==UserScript== 
// @name   my script 
// @description ... 
// @author   ... 
// @version  1.0 
// ==/UserScript== 
var links = document.getElementsByClassName('listrow'); 
    (var i = 0; i < links.length; i++) { 
    var link = links[i]; 
    var newlist = document.createElement('a'); 
    newlist.href = item.php?action=activate&amp;act_item_id=000029 
    var the_image = document.createElement('img'); 
    the_image.src = '../images/image1.gif'; 
    newlink.appendChild(the_image); 
    }

来源

2012-10-07 mmmh

请告诉我们你已经尝试了什么。 – Daedalus

成长为爱jQuery，尤其是the Manipulation Functions。

这里的一个完整的Firefox/Greasemonkey和Chrome用户的脚本，增加了该段落。查看内嵌评论。

// ==UserScript== 
// @name  _Add New paragraph at targeted location 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @grant GM_addStyle 
// ==/UserScript== 

function GM_main ($) { 
    var insertTarget = $("#listrow_special"); 

    //-- Insert empty container paragraph before the target paragraph. 
    insertTarget.before ('<p class="listrow" id="listrow_newlist"></p>'); 

    //-- Set this array to the unique parts of the links. 
    var linkDatArray = [ 
     ["activate&amp;act_item_id=000029", "image1.gif", "title 1"], 
     ["watch&amp;act_item_id=000016", "image2.gif", "title 2"], 
     ["watch&amp;act_item_id=0000061", "image3.gif", "title 3"], 
     ["watch&amp;act_item_id=000095", "image4.gif", "title 4"] 
    ]; 

    //-- Now use the array to insert the links into the container paragraph. 
    var contParag  = $("#listrow_newlist"); 

    $.each (linkDatArray, function (rowIdx, arryRow) { 
     //-- Create empty link with correct action. 
     var newLink  = $('<a href="item.php?action=' + arryRow[0] + '"></a>'); 

     //-- Insert the image into it. 
     newLink.append (
      '<img src="../images/items/' + arryRow[1] + '" title="' + arryRow[2] + '">' 
     ); 

     //-- Insert the link into the container paragraph. 
     contParag.append (newLink); 

     //-- Except for the last link, add our seperator characters. 
     if (rowIdx < linkDatArray.length - 1) { 
      contParag.append ('&nbsp;|&nbsp;'); 
     } 
    }); 
} 

/*--- STYLE THE IMAGES (And anything else) WITH CSS! NOT ATTRIBUTES. 
*/ 
//-- GM_addStyle() works on both Firefox and Chrome 
GM_addStyle ('      \ 
    #listrow_newlist a img {  \ 
     width:   20px;  \ 
     height:   20px;  \ 
     border:   none;  \ 
     vertical-align: middle;  \ 
    }        \ 
'); 

//-- Fire the main/payload code 
add_jQuery (GM_main); 

//-- This is just a standard utility function 
function add_jQuery (callbackFn, jqVersion) { 
    jqVersion  = jqVersion || "1.7.2"; 
    var D   = document; 
    var targ  = D.getElementsByTagName ('head')[0] || D.body || D.documentElement; 
    var scriptNode = D.createElement ('script'); 
    scriptNode.src = 'http://ajax.googleapis.com/ajax/libs/jquery/' 
        + jqVersion 
        + '/jquery.min.js' 
        ; 
    scriptNode.addEventListener ("load", function() { 
     var scriptNode   = D.createElement ("script"); 
     scriptNode.textContent = 
      'var gm_jQuery = jQuery.noConflict (true);\n' 
      + '(' + callbackFn.toString() + ')(gm_jQuery);' 
     ; 
     targ.appendChild (scriptNode); 
    }, false); 
    targ.appendChild (scriptNode); 
}

来源

2012-10-07 08:04:18

谢谢，你再次帮助我。该脚本工作正常，但在覆盖文本中是图像名称（image1.gif）而不是“标题1”。我做错了什么？ – mmmh

有一个'arryRow []'指数的错字。 –

使用jQuery：

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
     function buildLink(url, imagePath){ 
      var img = $('<img/>').attr('src', imagePath); 
      var link = $('<a/>').attr('href', url).append(img); 

      return link; 
     } 

     var newlist = $('<p/>').attr('id', 'listrow_newlist').addClass('listrow'); 

     newlist.append(buildLink('#url01', 'path_to_image1')); 
     newlist.append(buildLink('#url02', 'path_to_image2')); 
     newlist.append(buildLink('#url03', 'path_to_image3')); 

     newlist.insertAfter('#listrow_neck'); 
     }); 
    </script> 
    </head> 
    <body> 
    <p class="listcaption">......................................</p> 
    <p class="listrow" id="listrow_aka_battlep"><span class="small"><b><a href="item.php?action=academy"></a>-: </b>/<b> : </b>0000</span></p> 
    <p class="listrow" id="listrow_char_mission"><a href="ability.php">text</a> | <a href="item.php?action=missiondesc"> text</a></p> 
    <p class="listrow" id="listrow_clan"><b>some</b><a href="clanmenu.php?action=manageclan">-------</a> &nbsp;|&nbsp; <a href="fight.php?action=groupjoinrand" target="mainFrame" title="group"></a></p> 
    <p class="listrow" id="listrow_group"><b>group: </b><a href="clanmenu.php?action=groupmenu">~~~~~</a></p> 
    <p class="listrow" id="listrow_lifep"><b>LP: </b>(<span class="healthok"><b>000</b></span>/000)</p> 
    <p class="listrow" id="listrow_money"><b>gold: </b>629 &nbsp;&nbsp;&nbsp;&nbsp;(<a href="item.php?action=moneydrop1"></a> | <a href="item.php?action=moneytransfer1"></a>)</p> 
    <p class="listrow" id="listrow_int"><b>......</b>0000<span class="healthok" id="speedok">000</span>000</p> 
    <p class="listrow" id="listrow_attackp"><b>text</b>000<span class="valueincreased">000</span>text</p> 
    <p class="listrow" id="listrow_attackw" title=""><b>............</b>text</p> 
    <p class="listrow" id="listrow_defensep"><b>?????????????</b>0000<span class="valueincreased">000000</span></p> 
    <p class="listrow" id="listrow_defensew" title="100%"><b>000000000000</b>texts</p> 
    <p class="listrow" id="listrow_neck"><b>neck:</b>something</p> 
    <p class="listrow" id="listrow_special"><a href="item.php?action=special">Special</a></p><p class="listrow" id="listrow_status"><span class="small"></span></p> 
    </body> 
</html>

编辑

下面的脚本不使用jQuery，但只是单纯的JS，我测试了它和工作完美地，我不确定它是否可以与Greasemonkey或Tampermonkey一起使用，但至少它没有任何库依赖关系。

window.addEventListener('load', function(){ 
    function buildLink(url, imagePath){ 
     var img = document.createElement('img'); 
     img.src = imagePath; 

     var link = document.createElement('a'); 
     link.href = url; 
     link.appendChild(img); 

     return link; 
    } 

    var newlist = document.createElement('p'); 
    newlist.setAttribute('id', 'listrow_newlist') 
    newlist.className = 'listrow'; 

    newlist.appendChild(buildLink('#url01', 'path_to_image1')); 
    newlist.appendChild(buildLink('#url02', 'path_to_image2')); 
    newlist.appendChild(buildLink('#url03', 'path_to_image3')); 

    var nextEl = document.getElementById('listrow_special'); 
    document.body.insertBefore(newlist, nextEl); 
    });

来源

2012-10-07 06:28:00

有没有在Greasmonkey脚本中使用jQuery的方法？ – mmmh

该脚本没有预期的效果。 – mmmh

谢谢你的参与。 – mmmh

添加html元素的简单用户脚本

回答

相关问题