我需要爲Chrome擴展中的不同網址彈出不同的html頁面

Question

例如，如果有人在google.com上，我需要彈出一個不同的頁面，如果有人在xyz.com上，我需要彈出一個不同的頁面。那可能嗎？

Answer 1

在您的背景頁面中，您可以更改要在彈出窗口中顯示的頁面。 使用選項卡事件來獲取選定選項卡和當前選項卡網址。

用途：

// Update popup url method 
var updatePopupURLForSelectedTab = function (selectedTab) { 
    var popUpURL = DEFAULT_URL_OF_YOUR_HTML_FILE; 
    var selectedTabURL = selectedTab.url; 

    if (selectedTabURL.match(/.*\.?google\.com.*/) != null) { 
     popUpURL = GOOGLE_URL_OF_YOUR_HTML_FILE; 
    } 
    else if (selectedTabURL.match(/.*\.?xyz\.com.*/) != null) { 
     popUpURL = XYZ_URL_OF_YOUR_HTML_FILE; 
    } 

    // Set Popup URL 
    chrome.browserAction.setPopup({ 
     popup :popUpURL 
    }); 
}; 

// Get current selected Tab 
chrome.tabs.getSelected(null, function (tab) { 
    updatePopupURLForSelectedTab(tab); 
}); 


// Listen for selected tab 
chrome.tabs.onActiveChanged.addListener(function(tabId, selectInfo) { 
    // Get selected tab 
    chrome.tabs.get(tabId, function (tab) { 
    updatePopupURLForSelectedTab(tab); 
    }); 
}); 


// Listen navigation update 
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { 
    updatePopupURLForSelectedTab(tab); 
}); 

// Listen for window change 
chrome.windows.onFocusChanged.addListener(function (windowId) { 
    chrome.tabs.getSelected(windowId, function (tab) { 
     updatePopupURLForSelectedTab(tab); 
    }); 
}); 

Answer 2

至於建議的wOxxOm，它可能是一個更好的解決方案有幾個部分的單一彈出網頁，並隱藏/顯示他們適當的。

開始與所有隱藏，並在運行時做出決定：

document.addEventListener("DOMContentLoaded", function() { 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    // Note: this requires "activeTab" permission to access the URL 
    if(/* condition on tabs[0].url */) { 
     /* Adapt UI for condition 1 */ 
    } else if (/* ... */) { 
     /* Adapt UI for condition 2 */ 
    } 
    }); 
}); 

請注意，建議使用Page Actions，而不是瀏覽器操作的東西，只有在某些頁面上有意義的。