Как добавить значок в адресной строке для расширения Chrome? - PullRequest
Новая
       64

Как добавить значок в адресной строке для расширения Chrome?

7 голосов
/ 04 декабря 2011

Я не уверен, как это сделать, и документация, кажется, не делает это достаточно очевидным.

Я пытался сделать background_page и поместить в него chrome.pageAction.show(tab.id);, но это неКажется, не работает.

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

Как мне всегда добавлять значок page_action в адресную строку для любой страницы / вкладки?

РЕДАКТИРОВАТЬ: Вот мой manifest.json: 

{
    "name": "My Very First Extension :D",
    "version": "0.0.1",
    "description": "Awesomeness",
    "background_page": "background.html",

    "page_action": {
        "default_icon": "icon.png"
    },

    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["mmm.js"]
    }]
}

Где icon.png - это PNG-изображение размером 19x19 пикселей.Вот источник background.html, где я пытаюсь сделать так, чтобы значок page_action отображался для всех вкладок: 

<!DOCTYPE html>
<html>
    <head>
        <script>
            chrome.pageAction.show(tab.id);
        </script>
    </head>
</html>

Ответы [ 3 ]

14 голосов
/ 25 сентября 2012

Я вижу две проблемы с вашим кодом.

  1. Вы не можете использовать блоки встроенного скрипта на своей фоновой странице - код js может быть запущен только из связанного скрипта (например, так: <script type="text/javascript" src="background.js"></script>).Это из-за Политики безопасности контента .

  2. Как отмечено в ответе Авраама, так как вы хотите, чтобы значок отображался для всех страниц, вы должны использовать browser_action, а неpage_action.Согласно Страница документации Google pageAction :

    Не используйте действия страницы для функций, которые имеют смысл для большинства страниц.Вместо этого используйте действия браузера.

    Значки для действий страницы отображаются внутри омнибары (адресная строка Chrome), а значки действий браузера отображаются в виде кнопки на панели инструментов рядом с омнибаром.Любой из них может использоваться для отображения статуса плагина и в качестве кнопки действия.

Решения

Чтобы значок появился, вам нужно позвонить: chrome.pageAction.show(tabId).Однако вы не можете просто вызвать это из скрипта контента, потому что chrome.pageAction.show () должен быть передан tabId, а tabId получен из chrome.tabs, а chrome.tabs не доступен из скриптов контента .

Чтобы добавить кнопку действия браузера и определить ее поведение при нажатии, определите элемент browser_action в файле manifest.json ... 

"browser_action": {
   "default_title": "action description",
   "default_icon": "icon.png"
}

... и поместите этот кодв фоновом скрипте: 

// Define behavior when browser action icon is clicked
chrome.browserAction.onClicked.addListener(function(tab) {
   // executed when the user clicks on the browser action icon
});

или , если вы хотите пойти против соглашения и использовать pageAction, вы можете использовать код manifest.json из вашего вопроса и поместить следующее вваш фоновый скрипт: 

// Show page action icon in omnibar.
function showPageAction( tabId, changeInfo, tab ) {
    chrome.pageAction.show(tabId);
};
// Call the above function when the url of a tab changes.
chrome.tabs.onUpdated.addListener(showPageAction);

Для дальнейшего изучения, посмотрите исходный код некоторых из их примеров расширений .

3 голосов
/ 14 сентября 2015

Если вы хотите, чтобы контент-скрипт отображал значок действия страницы, он (контент-скрипт) не может этого сделать, но он может отправить сообщение в background.js, чтобы сделать это (background.js - эторазрешено отображать значки действий на странице)

скрипт содержимого (например, foo.js): 

   chrome.runtime.sendMessage({action: "showIcon"}, function(response) {});

background.js: 

   // Received a message from content script
   chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {               
       if (request.action == "showIcon") {
          chrome.pageAction.show(sender.tab.id);
       }
   });
0 голосов
/ 04 декабря 2011

Используйте значок browser_action.page_action и browser_action одинаковы и предоставляют одинаковую функциональность, за исключением того, что page_action s можно включить только для определенных страниц.Если вы не хотите, чтобы browser_action действовал как кнопка, не делайте этого.

...