如何確定Chrome擴展程序是否位於內容腳本的彈出窗口中？

Question

背景

我有一個Chrome擴展與瀏覽器的行動在新標籤中推出index.html。

我想更新擴展名，首先在popup中打開index.html，然後包含一個按鈕，用戶可以單擊以選擇性地在新選項卡中打開該應用程序。

我不希望此按鈕顯示它不是彈出式窗口（因爲它沒有意義），這意味着內容腳本需要知道它是否是彈出窗口才能顯示按鈕。

問題

這是一個問題的兩個部分：

1. 如何做一個Chrome擴展彈出知道這是一個彈出？
2. 如何在呈現彈出窗口之前將該信息傳遞給內容腳本？

我已經試過

我試着使用chrome.extension.getViews在background.js以首先確定是否彈出打開。然後，我會向內容腳本發送一條消息，然後顯示該按鈕。然而，我還沒有得到它的工作 - views始終是一個空的數組，並且該消息似乎永遠不會被內容腳本接收。

這裏是我的manifest.json文件的相關部分：

"background": { 
    "scripts": ["background.js"] 
}, 

"browser_action": { 
    "default_icon": { 
    "19": "img/icon19.png", 
    "38": "img/icon38.png" 
    }, 

    "default_title": "Super Simple Tasks", 

    "default_popup": "index.html" 
} 

這裏就是我在一直在努力我background.js：

// Get all popups 
var views = chrome.extension.getViews({ type: "popup" }); 

// Send a message if there is a popup 
if (views.length > 0){ 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ 
    chrome.tabs.sendMessage(tabs[0].id, {action: "popup_open"}, function(response) {}); 
    }); 
}; 

然後在我的內容腳本，我聽該消息然後添加一個類到身體：

// Listen for the message 
chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) { 
    if (msg.action === 'popup_open') { 
    // My code here to show the button 
    } 
}); 

Answer 1

在與一位朋友交談之後，我發現了一個優雅的解決方案，它不涉及消息傳遞，甚至完全不涉及background.js腳本。

我可以在manifest.json中指定?popup=true，並在我的擴展的內容腳本中檢查該參數。下面的代碼：

manifest.json現在看起來是這樣的：

"browser_action": { 
    "default_icon": { 
    "19": "img/icon19.png", 
    "38": "img/icon38.png" 
    }, 

    "default_title": "Super Simple Tasks", 

    "default_popup": "index.html?popup=true" 
} 

在我的內容腳本下面的代碼（從this answer所）檢查?popup=true。值得注意的是，這個函數可以處理由&字符分割的多個URL參數。

function getUrlParameter(sParam) { 
    var sPageURL = window.location.search.substring(1); 
    var sURLVariables = sPageURL.split('&'); 
    for (var i = 0; i < sURLVariables.length; i++) { 
    var sParameterName = sURLVariables[i].split('='); 
    if (sParameterName[0] == sParam) { 
     return sParameterName[1]; 
    } 
    } 
} 

var isPopup; 
isPopup = getUrlParameter('popup') === 'true'; 

最後，添加一個類身體如果它是一個彈出：

$('body').toggleClass('popup', isPopup) 

Answer 2

chrome.tabs.getCurrent(function(tab) { 
    if(tab == undefined) 
     document.getElementById('mButton').style.display = 'inline-block'; 
}); 

我最初設置按鈕的display: none;如果返回的標籤爲undefined，意味着它不是一個選項卡（所以它彈出）然後我顯示按鈕。你當然可以扭轉它。

======

好發送參數也適用，這在這種情況下，你不會需要添加查詢字符串在清單中，只是將它添加按鈕的點擊監聽器就足夠了。

btn.addEventListener('click', function() { 
    chrome.tabs.create({url: "index.html?popup=false"}); 
}); 

然後相同的過程（閱讀查詢字符串和比較等）。

======

或者，也可以使index.html副本說index2.html，從index.html的刪除按鈕，在清單和index.html的按鈕點擊使用index2.html。 :)

Answer 3

在清單文件的散列添加到URL：

"browser_action": { 
    "default_popup": "index.html#popup" 
} 

在JavaScript：

if(location.hash == 'popup') 
    // do something awesome! 

Answer 4

我需要類似的東西，因爲我想爲所有人創造一些交叉兼容的代碼腳本類型。

我發現這個效果很好。

const SCRIPT_TYPE = (() => { 
    if (chrome && chrome.extension && chrome.extension.getBackgroundPage && chrome.extension.getBackgroundPage() === window) { 
     return 'BACKGROUND'; 
    } else if (chrome && chrome.extension && chrome.extension.getBackgroundPage && chrome.extension.getBackgroundPage() !== window) { 
     return 'POPUP'; 
    } else if (!chrome || !chrome.runtime || !chrome.runtime.onMessage) { 
     return 'WEB'; 
    } else { 
     return 'CONTENT'; 
    } 
})();