How to generating QR-Codes for permalinks in forums?

Question

I would like to use QR-codes to streamline the browsing of certain forums with my android smartphone.

I'm looking for a Greasemonkey script that places a QR code next to every permalink, of every post, on a forum thread.

I've got a bit of a template to work from, the YouTube 'share' QR script:

var shareBoxCheckInterval   = setInterval (AddQR_Code, 200);

function AddQR_Code () {
var shareDiv    = document.querySelector ('.share-option-container .ytg-box');
if (shareDiv) {
    var qrIMG   = 'http://chart.googleapis.com/chart?chl=' 
                + window.location.href + '&chld=M%7C0&cht=qr&chs=125x125';
    var img     = document.createElement ('img');
    img.src     = qrIMG;
    img.width   = 125;
    img.height  = 125;
    shareDiv.appendChild (img);
    clearInterval (shareBoxCheckInterval);
    }
}

What this does is it adds a QR code to Youtube's sharebox, like so:

for easy video transfer from PC to phone.

How do I adapt this code to work with forum permalinks, and replace the link's text with a QR code image?

For example, on this thread on the Minecraft forum, there is a small link to the top right of every post saying '#1','#2','#3', ad infinitum -- which links to that particular post.

What the userscript would do, is replace the text saying '#1' with a QR code image (generated by the Google API) linking to that post, while also being a clickable hyperlink image (also linking to that post).

It would then repeat this for every permalink on the page.

Would this be possible, and if so, how?

Answer 1

Okay, here's a complete script that loops through the post bookmarks and adds QR codes.

I left the post-numbers in because they are useful to me on the forums I use. If you really want them gone, add $(this).text (" "); just before the $(this).append (... line.

Note the use of CSS for styling (good), not tag attributes (evil).

The script is slightly complicated with needing the withPages_jQuery structure to make it compatible with Google Chrome (as indicated by the userscripts tag).

// ==UserScript==
// @name        _Minecraft Forum, post barcodizer
// @namespace   _pc
// @include     http://www.minecraftforum.net/topic/*
// @grant       GM_addStyle
// ==/UserScript==

function GM_scriptMain ($) {
    var postBkMarks = $("div.post_block div.post_wrap h3 span.post_id a");
    postBkMarks.each ( function () {
        var qrIMG   = 'http://chart.googleapis.com/chart?chl='
                    + encodeURIComponent (this.href)
                    + '&chld=M%7C0&cht=qr&chs=125x125'
                    ;
        $(this).append ('<img src="' + qrIMG + '">');
    } );
}

withPages_jQuery (GM_scriptMain);

GM_addStyle (
    "h3 span.post_id a img {width: 125px; height: 125px;}"
);

function withPages_jQuery (NAMED_FunctionToRun) {
    //--- Use named functions for clarity and debugging...
    var funcText        = NAMED_FunctionToRun.toString ();
    var funcName        = funcText.replace (/^function\s+(\w+)\s*\((.|\n|\r)+$/, "$1");
    var script          = document.createElement ("script");
    script.textContent  = funcText + "\n\n";
    script.textContent += 'jQuery(document).ready(function() {'+funcName+'(jQuery);});';
    document.body.appendChild (script);
};

(Works in FF/GM, Chrome, Tampermonkey, and other browsers).

---

---

The Firefox (Greasemonkey) - only version (and probably Tampermonkey) is simpler:

// ==UserScript==
// @name        _Minecraft Forum, post barcodizer
// @namespace   _pc
// @include     http://www.minecraftforum.net/topic/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

var postBkMarks = $("div.post_block div.post_wrap h3 span.post_id a");
postBkMarks.each ( function () {
    var qrIMG   = 'http://chart.googleapis.com/chart?chl='
                + encodeURIComponent (this.href)
                + '&chld=M%7C0&cht=qr&chs=125x125'
                ;
    $(this).append ('<img src="' + qrIMG + '">');
} );

GM_addStyle (
    "h3 span.post_id a img {width: 125px; height: 125px;}"
);