Разрешите хосту IP-адрес и отобразите его во всплывающем окне с помощью расширения Chrome.

Я разрабатываю расширение Chrome, чтобы сделать следующее.

При нажатии на значок всплывающее окно показывает IP-адрес отображаемой в данный момент страницы.

Это расширение должно работать на каждой странице. Но проблема в том, что IP-адрес текущего URL-адреса должен быть загружен при загрузке URL-адреса. Не тогда, когда отображается всплывающее окно, чтобы не было задержки между всплывающим окном и получением IP-адреса через веб-службу.

Таким образом, всплывающее окно расширения отличается для каждой вкладки.

Это должно быть действие страницы или действие браузера?

И как мне получить данные из веб-службы в фоновом режиме и назначить их всплывающему окну до того, как оно действительно отобразится?

Любая информация действительно ценится.


person Amila    schedule 14.07.2012    source источник


Ответы (1)


Этот ответ содержит полный код для тестирования расширения. Для проверки создайте каждый файл, сохраните его в одном каталоге и загрузите через chrome://extensions/ (режим разработчика).


«Это расширение должно работать на каждой странице». -> Действие браузера.

Есть два способа как можно быстрее получить URL-адрес страницы. Оба метода должны использоваться на фоновой странице.

  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. С помощью API chrome.webRequest:

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

Любой метод захватит вкладку и URL-адрес. В вашем случае -отображение IP-адреса во всплывающем окне для текущей вкладки- предпочтительнее первый метод, поскольку он запускается для каждого обновления вкладки. Последний будет срабатывать только для URL-адресов http: и https:.

Любой метод вызывает функцию processUrl. Эта функция будет обрабатывать URL-адреса для заданных вкладок. Я рекомендую кэшировать 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-адрес найден, он сохраняется в виде хеша. Этот хеш выглядит так:

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

Как видите, два хоста могут ссылаться на один и тот же IP-адрес. Верно и обратное: узел может иметь несколько IP-адресов (Поиск 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"
    }
}

Соответствующая документация

person Rob W    schedule 14.07.2012
comment
@Амила пс. Вместо использования внешней веб-службы вы также можете использовать chrome.webRequest API, в частности, событие onCompleted или onErrorOccurred для получения IP-адреса — см. code.google.com/chrome/extensions/webRequest.html. - person Rob W; 18.07.2012