Question

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

Answer 1

正如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而不是浏览器操作来处理仅在某些页面上有意义的内容。

Answer 2

在您的后台页面中，您可以更改要在弹出窗口中显示的页面。使用标签事件获取选定的标签和当前标签网址。

使用：

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

我需要在chrome扩展中为不同的url弹出不同的html页面

2 个答案: