如何为 popup.html 中的多个不同链接打开和使用相同的选项卡答案

【问题标题】：How to open and use the same tab for several different link in popup.html如何为 popup.html 中的多个不同链接打开和使用相同的选项卡
【发布时间】：2012-08-24 13:49:12
【问题描述】：

我实际上正在开发我的第一个 Chrome 扩展程序，我需要改进一些功能。实际上我是 chrome 扩展的新手，不知道如何管理标签。

实际上，该扩展程序会打开一个弹出窗口，其中包含从远程网页捕获的链接列表。每个链接都会打开一个新选项卡，其中包含正确的内容。

我的目标是打开一个选项卡，并为每个链接使用该单个选项卡（如果创建的选项卡已关闭，我可以打开一个新选项卡并继续使用它）。我想我可以创建一个新选项卡并通过分配的 ID 引用它，但我无法弄清楚如何真正编写正确的代码。

下面是涉及的代码：

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/*"
    ]
}

以下是一段 HTML 代码，在所有操作后将呈现到弹出窗口中。任何 div 都与此类似，当然链接更改除外：

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

如果需要，我可以提供完整的源代码。

【问题讨论】：

本题代码与the one in your previous question一模一样。大多数代码与这个问题无关。我建议删除大部分不相关的代码，并以“在我的 [previous question link] 中，我问...。现在，我需要...”之类的内容开始问题。

标签： jquery tabs google-chrome-extension

【解决方案1】：

回收现有标签的最简单方法是使用chrome.tabs.query() 方法。检查是否有一个带有与模式匹配的 URL 的选项卡（例如 http://gaming.ngi.it/*）。如果存在，请打开其中的 URL。如果没有，请打开一个新选项卡。像这样：

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

我写了一个简单的可重用函数reuseTab() for Chrome，它托管在 GitHub 中，包含详细的 cmets，并解释了一切是如何工作的。随意查看并使用它。

【讨论】：