1

私は実際に最初の Chrome 拡張機能に取り組んでおり、いくつかの機能を改善する必要があります。実際、私はクロム拡張機能を初めて使用しているため、タブを管理する方法がわかりません。

実際、この拡張機能は、リモート Web ページから取得したリンクのリストを含むポップアップ ウィンドウを開きます。すべてのリンクは、適切なコンテンツを含む新しいタブを開きます。

私の目標は、タブを開き、すべてのリンクに対してその単一のタブを使用することです (作成されたタブが閉じられている場合は、新しいタブを開いて引き続き使用できます)。新しいタブを作成して参照し、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 に答える