Javascript 我需要弹出不同的html页面为不同的网址在铬扩展

例如，如果有人在google.com上，我需要弹出一个不同的页面，如果有人在xyz.com上，我需要弹出一个不同的页面。这可能吗？

在您的背景页面中，您可以将页面更改为显示在弹出窗口中。 使用选项卡事件获取选定选项卡和当前选项卡url

使用：

// 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);
    });
});

---

正如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 */
    }
  });
});

---

请注意，对于仅在某些页面上有意义的内容，建议使用浏览器操作，而不是浏览器操作。

将所有内容放在一个popup.html中，只需根据url切换容器的可见性。这还不够。在不更改选项卡的情况下无法捕获导航。然后添加侦听器（也可能是

onCommitted

。

onUpdated

应该可以。还要注意

onReplaced

。但这仍然是一个非常脆弱的解决方案。。对这个问题的评论有一个更好的想法。