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