Я изучаю расширения Google Chrome в первый раз. Я хотел бы создать то, что появляется в виде панели инструментов в верхней части страницы, когда вы нажимаете значок расширения, подобно панели инструментов StumbleUpon.
Я не вижу, как это сделать. В примерах в основном отображается popup.html, а не фиксированная панель инструментов.
Хотя этот ответ показывает два способа создания панели инструментов в Chrome, я настоятельно рекомендую использовать действие страницы или действие браузера значки. Они не занимают столько места, как панели инструментов, а также могут использоваться для отображения панели при щелчке и даже получить временные разрешения хоста для взаимодействия со страницей.
И для тех, кому не нужна панель инструментов, а боковая панель, есть активное предложение для API chrome.sidebar. Это всего лишь предложение, будет ли и когда оно будет реализовано, пока не установлено.
chrome.infobarsЭтот раздел использовал для демонстрации демонстрационной версии с использованием chrome.infobars API. Этот API никогда не был на стабильном канале, и будет удален; не используйте его.
Создание панелей инструментов с использованием сценариев содержимого сложно. Вам нужно вставить код на страницу и даже изменить структуру документа, что может сломать некоторые страницы в Интернете.
Чтобы создать панель инструментов с использованием сценариев содержимого, выполните следующие действия:
<iframe> - поясняется позже).Шаг 1 прост, см. мой предыдущий пример или прочитайте документацию скриптов контента.
Чтобы свести к минимуму конфликты стилей и предотвратить использование страницы на панели инструментов, вставьте iframe. В отличие от предыдущего метода, вы напрямую не имеете доступа к API расширения (поскольку встроенная страница не является ни содержимым script, ни страницей, выполняемой в процессе расширения).
Вставка панели инструментов:
add-toolbar.js (содержимое script)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.
Пока вы добавили только кадр на страницу. Там одна проблема: содержимое на странице частично скрыто. Это не очень приятно. Есть несколько способов исправить это, я решил использовать 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> элемент не затрагивается.
К сожалению, Chrome рассматривает встроенную страницу html как непривилегированную страницу расширения. Вы можете использовать только некоторые из API расширений (аналогично сценариям содержимого).
Другим вариантом является загрузка страницы с вашего сервера, а затем выполнение содержимого script на этой конкретной странице. Настройте манифест кэша, чтобы убедиться, что ваша панель инструментов доступна, если пользователь не находится в сети.
В Chrome API нет виджета панели инструментов, чтобы помочь вам. Вам нужно будет вручную создать и разместить панель инструментов на странице. Вы можете сделать это, используя контентные скрипты, которые позволяют вам вводить javascript и css на страницы.
Это дает вам возможность расширения браузера для разных браузеров, хотя вы можете ограничить загрузку только хром, если хотите.
монтажники
Общая страница установки (предоставляет исполняемый файл, который может быть подписан, если вы находитесь в окнах, чтобы облегчить процесс установки):
http://crossrider.com/apps/35180/install_page
Конкретные установки:
Crossrider также упрощает публикацию в хромовом хранилище, а также позволяет легко подписать расширение для исполняемых загрузок в Windows.
Info
Вот документы для API, довольно обширные для кросс-браузерного решения:
В приведенном ниже коде я не помещаю html и css, потому что есть ограничения на количество символов для ответов. Однако, если это выглядит хорошо, вы можете либо открыть его (crx - это zips, просто переименовать расширение в .zip), чтобы получить css и html внутри, или мы можем найти способ отправить его вам. Обратите внимание, что я вставляю HTML и CSS на страницу.
Я обычно пишу css и html, затем уменьшаю оба (http://cssminifier.com/ и http://www.willpeavy.com/minifier/), затем я беру миниатюрный вывод, и я использую инструмент escape строки, например 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 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 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, не забудьте включить iframes в настройках.
Для сайта поддержки сообщества: https://getsatisfaction.com/crossrider
Они очень отзывчивы и могут помочь вам в случае возникновения проблем.