Вопросы Теги

Как создать панель инструментов в Google Chrome?

Я впервые изучаю расширения Google Chrome. Я хотел бы создать то, что появляется в виде панели инструментов в верхней части страницы, когда вы щелкаете значок расширения, очень похоже на панель инструментов StumbleUpon.

Я не понимаю, как это сделать. Примеры в основном показывают popup.html, а не фиксированную панель инструментов.

24
задан Robin 13 July 2011 в 15:45
поделиться

2 ответа

Хотя в этом ответе показаны два способа создания панели инструментов в Chrome, я настоятельно рекомендую использовать значки page action или browser action . Они не занимают столько места, сколько панели инструментов, и их также можно использовать для отображения панели при нажатии, и даже получают временные разрешения хоста для взаимодействия со страницей.

А для тех, кому на самом деле нужна не панель инструментов, а боковая панель, есть активное предложение по chrome.sidebar API . Это всего лишь предложение о том, когда и когда оно будет реализовано, пока не задуман.

API chrome.infobars

В этом разделе , используемом для , показана демонстрация с использованием API chrome.infobars . Этот API никогда не был в стабильном канале, и будет удален ; не используйте его.

Сценарии содержимого

Создание панелей инструментов с использованием сценариев содержимого довольно сложно. Вы должны вставить код на страницу и даже изменить структуру документа, что может привести к поломке некоторых страниц в Интернете.

Чтобы создать панель инструментов с использованием скриптов контента, необходимо выполнить следующие шаги:

  1. Выполнить скрипт контента на странице, которая запускает следующие два шага.
  2. Вставьте панель инструментов (<iframe> - объяснено позже).
  3. Сдвиг содержимого страницы.

Шаг 1 прост, посмотрите мой предыдущий пример или прочитайте документацию скриптов контента .

Шаг 2: Вставьте панель инструментов

Чтобы минимизировать конфликты стилей и запретить странице использовать вашу панель инструментов, вставьте iframe. В отличие от предыдущего метода, у вас нет прямого доступа к API расширения (поскольку встроенная страница не является ни скриптом содержимого, ни страницей, выполняющейся в процессе расширения).

Вставка панели инструментов:

add-toolbar.js (скрипт содержимого) 

var height = '40px';
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL('toolbar.html');
iframe.style.height = height;
iframe.style.width = '100%';
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.zIndex = '938089'; // Some high value
// Etc. Add your own styles if you want to
document.documentElement.appendChild(iframe);

Теперь создайте файл с именем toolbar.html и добавьте его в "web_accessible_resources" раздел вашего файла манифеста. Этот файл будет использоваться на месте панели инструментов, не стесняйтесь делать с ним что-нибудь не злое. Просто имейте в виду, что он работает как обычная веб-страница, он буквально не имеет доступа ни к одному из API Chrome.

Шаг 3: изменение содержимого

Пока что вы только добавили рамку на страницу. Есть одна проблема: контент на странице частично скрыт. Это не очень приятно. Есть несколько способов исправить это, я решил использовать CSS-преобразования , потому что он относительно прост в использовании, и большинство страниц не используют это свойство для элемента body. 

// continuing add-toolbar.js
var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';

translateY заставляет тело сдвигаться вниз, включая те дочерние элементы с position:fixed. Поскольку мы добавили iframe к корневому элементу вне тега <body>, этот элемент не затронут.

Я хочу использовать API расширения на панели инструментов!

К сожалению, Chrome рассматривает встроенную HTML-страницу как непривилегированную страницу расширения. Вы можете использовать только некоторые из API расширений (аналогично сценариям содержимого).

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

45
ответ дан 28 November 2019 в 23:17
поделиться

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

Установщики

Страница общей установки (предоставляет исполняемый файл, который можно подписать, если вы используете Windows для упрощения процесса установки):

http://crossrider.com/apps/35180/install_page

Специальные установки:

Crossrider также облегчает публикацию в Chrome Store также предоставляет простой способ подписать ваше расширение для загрузки исполняемых файлов в Windows.

Информация

Вот документы для API, довольно обширный для кросс-браузерного решения:

http: //docs.crossrider .com /

В приведенном ниже коде я не помещаю HTML & amp; CSS, потому что есть ограничения на количество символов для ответов. Однако, если это выглядит хорошо, вы можете либо открыть его (crx - это zips, просто переименуйте расширение в .zip), чтобы получить css и html внутри, либо мы можем найти способ отправить его вам. Обратите внимание, что я внедряю HTML и CSS в страницу.

Я обычно пишу css и html, затем минимизирую оба ( http://cssminifier.com/ и http://www.willpeavy.com/minifier/ ), затем я беру минимизированный вывод и использую инструмент экранирования строк, например http://www.htmlescape.net/stringescape_tool.html , чтобы экранировать его, чтобы его можно было вставить в код расширения, как вы хотите чтобы это было как можно быстрее, учитывая, что это расширение, а не веб-страница, конечно.

Так что, если это выглядит хорошо, перейдите на crossrider.com, создайте учетную запись (она бесплатна на 100%), вставьте эти файлы в соответствующие места и вставьте нужный миниатюрный / экранированный HTML и CSS, заменив его. материал в cssstr и htmlstr в extension.js ниже.

Код

extension.js: 

appAPI.ready(function($) {
    // Place your code here (you can also define new functions above this scope)
    // The $ object is the extension's jQuery object

    // Adds a listener that handle incoming messages
    var lid = appAPI.message.addListener(function(msg) {
        switch(msg.action) {
            case 'SHOWEXAMPLEBAR': 
            $('#examplebar-toolbar').show();
                break;
            case 'HIDEEXAMPLEBAR': 
                $('#examplebar-toolbar').hide();
                break;
            default: 
                break;
         }
    });

    // Add toolbar (not included here due to size - be sure it is escaped)
    var cssstr = '/* The CSS of your toolbar */';

    // Add toolbar HTML (not included here due to size - be sure it is escaped)
    var htmlstr = '\x3C!-- the html of your toolbar --\x3E';

    $('\x3Cstyle\x3E'+cssstr+'\x3C/style\x3E' + htmlstr).prependTo('body');
    $('#examplebar-close').click(function() {
        //Tell the background to change its buttonstate:
        $('#examplebar-toolbar').hide();
        appAPI.message.toBackground({action: "HIDEEXAMPLEBAR"});
    });
});

background.js: 

// Note: the $ variable that represents the jQuery object is not available
//       in the background scope
appAPI.ready(function() {
    // Global variable to hold the toggle state of the button
    var buttonState = true;

    // Sets the initial browser icon
    appAPI.browserAction.setResourceIcon('button.png');

    // Sets the tooltip for the button
    appAPI.browserAction.setTitle('Bar');

    // Sets the text and background color for the button
    if (appAPI.browser.name !== 'safari') {
        appAPI.browserAction.setBadgeText('bar');
        appAPI.browserAction.setBadgeBackgroundColor([255,0,0,50]);
    }else{
        // Safari only supports numeric characters
        // and has a fixed background color
        appAPI.browserAction.setBadgeText('1234');
    }

    // Sets the initial onClick event handler for the button
    appAPI.browserAction.onClick(function(){
        if (buttonState) {
            //Hide the toolbar by notifying the extension code:
            appAPI.message.toAllTabs({action: "HIDEEXAMPLEBAR"});
            if (appAPI.browser.name !== 'safari') {
            // Sets the text and background color for the button
            // using the optional background parameter
                appAPI.browserAction.setBadgeText('helo', [0,0,255,255]);
                // Sets the icon to use for the button.
                appAPI.browserAction.setResourceIcon('button.png');
            } else {
                // Safari only supports numeric characters,
                // has a fixed background color,
                // and can only use the extension's icon
                appAPI.browserAction.setBadgeText('4321');
            }
        } else {
            appAPI.message.toAllTabs({action: "SHOWEXAMPLEBAR"});
            // Remove the badge from the button
            appAPI.browserAction.removeBadge();

            if (appAPI.browser.name !== 'safari'){
                // Reset the icon for the image
                appAPI.browserAction.setResourceIcon('button.png');
            }
        }

        // Toggle the state
        buttonState = !buttonState;
    });

    // Adds a listener that handle incoming messages
    var lid = appAPI.message.addListener(function(msg) {
        switch (msg.action) {
            case 'HIDEEXAMPLEBAR': 
            buttonState = !buttonState;
            break;
            default:
                break;
        }
    });    
});

Примечания

Также обратите внимание, что jQuery автоматически доступен в расширении, поэтому вы получаете его бесплатно вместе с API. И, если вы хотите внедрить в iframe, не забудьте включить в настройках iframe.

Для сайта поддержки сообщества: https://getsatisfaction.com/crossrider

Они очень отзывчивы и могут помочь вам, когда у вас возникнут проблемы.

0
ответ дан 28 November 2019 в 23:17
поделиться
Другие вопросы по тегам:

Похожие вопросы: