Как сделать панель инструментов в Google Chrome? - PullRequest
24 голосов
/ 13 июля 2011

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

Я не вижу, как это сделать.В примерах в основном показан popup.html, а не фиксированная панель инструментов.

Ответы [ 3 ]

45 голосов
/ 24 июня 2013

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

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

chrome.infobars API

Этот раздел , используемый для , показывает демонстрациюиспользуя 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 расширений (аналогично сценариям содержимого).

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

3 голосов
/ 13 июля 2011

Chrome API не имеет виджетов панели инструментов, которые могли бы вам помочь. Вам нужно будет вручную создать и расположить панель инструментов div на странице. Вы можете сделать это, используя скрипты содержимого , которые позволяют вставлять javascript и css в страницы.

0 голосов
/ 25 июня 2013

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

монтажники

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

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

Конкретные установки:

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

информация

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

http://docs.crossrider.com/

В приведенном ниже коде я не помещаю html & 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

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

...