simple userscript which adds an html element

Question

I am trying to write a user script for Chrome which simply adds an Element to a website, but with my limited Javascript knowledge I'm really not very successful to do this.

Example of subject:

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

Desired Output :

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

I just want that the user script adds this list:

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

Thank you all for helping me!

Update:

I've try to start with add this element:

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

It's probably the wrong way to do this. (because it does work):

// ==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);
    }

Please show us what you've tried.

Daedalus
– Daedalus

2012-10-07 06:18:55 +00:00
Commented Oct 7, 2012 at 6:18 — Daedalus
– Daedalus, Commented Oct 7, 2012 at 6:18

Brock Adams · Accepted Answer · 2012-10-07 08:56:04Z

Grow to love jQuery, especially the Manipulation Functions.

Here's a complete Firefox/Greasemonkey and Chrome userscript that adds that paragraph. See the inline comments.

// ==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);
}

Thank you, you helped me again. The script works fine, but in the overlay text is the image name(image1.gif) and not the "title 1". What did I do wrong?

Alcides Queiroz · Accepted Answer · 2012-10-07 07:31:04Z

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

EDIT

The following script doesn't use jQuery, but just pure JS, I tested it and worked perfectly, I'm not sure if it will work with Greasemonkey or Tampermonkey, but at least it doesn't have any library dependencies.

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

Is there a way to make this without using jQuery in a Greasmonkey script?

Collectives™ on Stack Overflow

simple userscript which adds an html element

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related