How to open and use the same tab for several different link in popup.html

Question

I'm actually working on my first Chrome Extension and i need to improve some function. Actually i'm new of chrome extensions and can't figure out how i can manage tabs.

Actually the extension open a popup window with a list of link catched from a remote web page. Every link open a new tab with the right content inside.

My goal is to open a tab and, for every link, use that single tab (if the tab created is closed, i can open a new tab a continue to use that). I suppose i can create a new tab and refer to it by and ID assigned but i can't figure out how really write the correct code.

Following there's the code involved:

popup.html

<!doctype html>
<html>
<head>
    <title>NGI Little Helper - Subscribes</title>
    <link rel="stylesheet" href="popup.css">
    <!-- JavaScript and HTML must be in separate files for security. -->
    <script type="text/javascript" src="common/jquery.js"></script>
    <script type="text/javascript" src="popup.js"></script>
</head>

<body>
    <h1>Topics</h1>
    <div id="content">..:: Loading ::..</div>
</body>
</html>

popup.js

$.get("http://gaming.ngi.it/subscription.php?do=viewsubscription", function(data) {
    var TDs = $('td[id^="td_threadtitle_"]', data);
    $(document).ready(function() {
        $("#content").html("<br/>");
        $.each( TDs, function() {
            //Removes useless elements from the source
            $('img[src="images/misc/tag.png"]', this).remove();
            $('span', this).remove(); //$('span[class="smallfont"]', this).remove();
            $('div[class="smallfont"]', this).remove();
            $('img[src="images/buttons/firstnew.gif"]', this).attr('src', '/img/icons/comment.gif');
            $('a[style="font-weight:bold"]', this).removeAttr("style");
            //Modify the lenght of the strings
            if ($("a[id^='thread_title_']", this).text().length > 35) {
                $("a[id^='thread_title_']", this).text( $("a[id^='thread_title_']", this).text().substring(0, 30) + " [...]" );
            }
            //Modify the URL from relative to absolute and add the target="_newtab"
            $("a[id^='thread_']", this).attr('href', "http://gaming.ngi.it/"+ $("a[id^='thread_']", this).attr('href'));
            $("a[id^='thread_']", this).attr('target', "_newtab");
            //Send the HTML modified to the popup window
            $("#content").html($("#content").html() + $('div', this).wrap("<span></span>").parent().html() +"<br/>" );
        });
    });
});

Manifest.json

{
    "name": "NGI Little Helper",
    "version": "0.8.5",
    "manifest_version": 2,
    "description": "Extension per gli Utenti del forum gaming.ngi.it",
    "options_page": "fancy-settings/source/index.html",
    "background": {
        "page": "background.html"
    },
    "icons": {
        "16": "img/logo16.png",
        "48": "img/logo48.png",
        "128": "img/logo128.png"
    },
    "content_scripts": [{
        "matches": ["*://gaming.ngi.it/*"],
        "js": ["common/jquery.js", "logo_changer/logo_change.js"],
        "run_at": "document_start"
    }],
    "browser_action": {
        "default_icon": "img/icon.png",
        "default_popup": "popup.html",
        "default_title": "Visualizza Subscriptions"
    },
    "permissions": [
        "*://gaming.ngi.it/*"
    ]
}

The following is a piece of HTML code that will be rendered into the popup window after all the manipulation. Any div is similar to this one, except the link changes of course:

<div>

            <a href="http://gaming.ngi.it/showthread.php?goto=newpost&amp;t=555954" id="thread_gotonew_555954" target="_newtab"><img class="inlineimg" src="/img/icons/comment.gif" alt="Go to first new post" border="0"></a>




            <a href="http://gaming.ngi.it/showthread.php?goto=newpost&amp;t=555954" id="thread_title_555954" target="_newtab">[All Gamez] [Frozen Synapse] S [...]</a>

        </div>

If needed i can provide the full source code.

The code in this question is exactely the same as the one in your previous question. Most of the code is not relevant to this question. I suggest to remove most of the unrelated code, and start the question with something like "In my [previous question link], I asked .... Now, I need to ...". — Rob W

Fczbkk Fczbkk · Accepted Answer · 2012-08-24T05:49:12

The easiest way to recycle existing tabs is to use the chrome.tabs.query() method. Check, if there is a tab with URL that matches a pattern (e.g. http://gaming.ngi.it/*). If it exists, open the URL in it. If not, open a new tab. Like this:

var match = 'http://gaming.ngi.it/*';
var url = 'http://gaming.ngi.it/showthread.php?goto=newpost&amp;t=555954';

chrome.tabs.query({url : match}, function (foundTabs) {
    if (foundTabs[0]) {
        chrome.tabs.update(foundTabs[0].id, {
            active : true,
            url : url
        });
    } else {
        chrome.tabs.create({url : url});
    }
});

I wrote a simple reusable function reuseTab() for Chrome, it is hosted in GitHub and contains detailed comments with explanation of how everything works. Feel free to check it out and use it.

How to open and use the same tab for several different link in popup.html

popup.html

popup.js

Manifest.json

1 Answers