1

私は次のことを行うためにChrome拡張機能を開発しています。

アイコンをクリックすると、ポップアップに現在表示されているページのIPアドレスが表示されます。

この拡張機能は、すべてのページで機能するはずです。ただし、問題は、URLのロード時に現在のURLのIPがロードされている必要があることです。ポップアップが表示されたときではなく、ポップアップが表示されてからWebサービスを介してIPアドレスを取得するまでの間に遅延が発生することはありません。

したがって、本質的に、拡張機能のポップアップはタブごとに異なります。

これはページアクションですか、それともブラウザアクションですか？

また、バックグラウンドでWebサービスからデータを取得し、実際に表示される前にポップアップに割り当てるにはどうすればよいですか？

どんな情報も本当にappriciatedです。

4

1 に答える 1

5

この回答には、拡張機能をテストするための完全なコードが含まれています。テストするには、各ファイルを作成し、同じディレクトリに保存して、chrome://extensions/（開発者モード）を介してロードします。

「この拡張機能はすべてのページで機能するはずです。」->ブラウザアクション。

ページのURLをできるだけ早くキャプチャする方法は2つあります。バックグラウンドページでは、両方の方法を使用する必要があります。

  1. を使用しchrome.tabs.onUpdatedます。

    chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status === 'loading' && changeInfo.url) {
        processUrl(tabId, tab.url); // or changeInfo.url, does not matter
    }
});

  2. chrome.webRequestAPIの使用：

    chrome.webRequest.onBeforeRequest.addListener(function(details) {
    processUrl(details.tabId, details.url); // Defined below
}, {
    urls: ["*://*/*"],
    types: ["main_frame"]
});

どちらの方法でも、タブとURLがキャプチャされます。現在のタブのポップアップにIPを表示する場合は、タブの更新ごとにトリガーされるため、最初の方法が推奨されます。http:後者は、https:URLに対してのみトリガーされます。

どちらのメソッドもprocessUrl関数を呼び出します。この関数は、指定されたタブのURLを処理します。Webサービスへのリクエストが多すぎないように、IPアドレスをキャッシュすることをお勧めします。

background.js

var tabToHost = {};
var hostToIP = {};

function processUrl(tabId, url) {
    // Get the host part of the URL. 
    var host = /^(?:ht|f)tps?:\/\/([^/]+)/.exec(url);

    // Map tabId to host
    tabToHost[tabId] = host ? host=host[1] : '';

    if (host && !hostToIP[host]) { // Known host, unknown IP
        hostToIP[host] = 'N/A';    // Set N/A, to prevent multiple requests
        // Get IP from a host-to-IP web service
        var x = new XMLHttpRequest();
        x.open('GET', 'http://www.fileformat.info/tool/rest/dns.json?q=' + host);
        x.onload = function() {
            var result = JSON.parse(x.responseText);
            if (result && result.answer && result.answer.values && result.answer.values[0]) {
                // Lookup successful, save address
                hostToIP[host] = result.answer.values[0].address;
                setPopupInfo(tabId);
             }
         };
         x.send();
    }

    // Set popup info, with currently (un)known information
    setPopupInfo(tabId);
}
function setPopupInfo(tabId) { // Notify all popups
    chrome.extension.getViews({type:'popup'}).forEach(function(global) {
        global.notify(tabId);
    });
}

// Remove entry from tabToIp when the tab is closed.
chrome.tabs.onRemoved.addListener(function(tabId) {
    delete tabToHost[tabId];
});
// Add entries: Using method 1 ( `onUpdated` )
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status === 'loading' && changeInfo.url) {
        processUrl(tabId, tab.url); // or changeInfo.url, does not matter
    }
});

// Init: Get all windows and tabs, to fetch info for current hosts
chrome.windows.getAll({populate: true}, function(windows) {
    windows.forEach(function(win) {
        if (win.type == 'normal' && win.tabs) {
            for (var i=0; i<win.tabs.length; i++) {
                processUrl(win.tabs[i].id, win.tabs[i].url);
            }
        }
    });
});

IPが見つかると、IPはハッシュに保存されます。このハッシュは次のようになります。

hostToIP = {
    'stackoverflow.com': '64.34.119.12',
    'superuser.com': '64.34.119.12'
};

ご覧のとおり、2つのホストが同じIPを参照している可能性があります。逆もまた真です。ホストが複数のIPアドレスを持っている場合があります（たとえば、Lookup Google ）。バックグラウンドページは、開かれている場合、ブラウザのアクションポップアップと通信します。

popup.js

// Get initial tab and window ID
var tabId, windowId;
chrome.tabs.query({active:true, currentWindow:true, windowType:'normal'},
  function(tabs) {
    if (tabs[0]) {
        // Found current tab
        window.tabId = tabs[0].id;
        windowId = tabs[0].windowId;
        requestUpdate();
    }
});
// Receive tab ID updates
chrome.tabs.onActivated.addListener(function(activeInfo) {
    if (activeInfo.windowId === windowId) {
        requestUpdate();
    }
});

// Communication with background:
var background = chrome.extension.getBackgroundPage();

// Backgrounds calls notify()
function notify(tabId, url, ip) {
    if (tabId === window.tabId) { // Tab == current active tab
        requestUpdate();
    }
}
// Get fresh information from background
function requestUpdate() {
    // tabId is the current active tab in this window
    var host = background.tabToHost[tabId] || '';
    var ip = host && background.hostToIP[host] || 'N/A';
    // Now, do something. For example:
    document.getElementById('host').textContent = host;
    document.getElementById('ip').textContent = ip;
}

popup.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Host to IP</title>
<script src="popup.js"></script>
</head>
<body style="white-space:pre;font-family:monospace;">
Host: <span id="host"></span>
IP  : <span id="ip"></span>
</body>
</html>

manifest.json

{
    "name": "Host To Tab",
    "manifest_version": 2,
    "version": "1.0",
    "description": "Shows the IP of the current tab at the browser action popup",
    "background": {"scripts":["background.js"]},
    "permissions": ["http://www.fileformat.info/tool/rest/dns.json?q=*", "tabs"],
    "browser_action": {
        "default_popup": "popup.html"
    }
}

関連ドキュメント

于 2012-07-14T21:40:39.700 に答える