1

我实际上正在开发我的第一个 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/>" );
        });
    });
});

清单.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>

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

4

1 回答 1

3

回收现有选项卡的最简单方法是使用该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()我为 Chrome编写了一个简单的可重用函数，它托管在 GitHub 中，并包含详细的注释以及对一切工作原理的解释。随意检查并使用它。

于 2012-08-24T05:49:12.713 回答