如何确定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'; 
    } 
})();