Как определить, включено ли расширение расширения Chrome из сценария содержимого?

Question

фон

У меня есть расширение Chrome с действием браузера для запуска index.html в новой вкладке.

Я хотел бы обновить расширение, чтобы открыть index.html в popup, а затем включить кнопку, которую пользователи могут щелкнуть, чтобы открыть приложение на новой вкладке.

Я не хочу, чтобы эта кнопка отображалась, когда это не всплывающее окно (поскольку это не имеет смысла), что означает, что скрипт контента должен знать, является ли это всплывающим окном, чтобы показать кнопку.

Вопросы

Это две части вопроса:

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.

Я могу указать ?popup=true в manifest.json и проверить этот параметр в сценарии содержания моего расширения. Вот код:

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, используйте index2.html в манифесте и index.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'; 
    } 
})();