Потерянное время LostTime

Создаём своё расширение для Google Chrome

На хабре уже есть несколько статей о создании расширений для хрома, поделюсь своим опытом, затронув основные вещи и места, в которых у меня возникли трудности.
Что понадобится для создания расширения в двух словах:
1) Базовые знания Javascript
2) Базовые знания HTML
3) 5$

Покажу создание расширения для хрома на примере своего, созданного для подсчета «потерянного времени» в интернете. То есть это расширение считает время, проведенное на сайтах с возможностью определения посещенных сайтов по категориям: полезное время, либо потерянное время.

Итак, я начинаю создание расширения с создания папки самого расширения, в которую будем класть все создаваемые нами файлы. Назову её «losttime». Далее, я создаю файл manifest.json, выглядит он следующим образом:

 < "manifest_version": 2, "name": "Lost Time", "version": "1.0", "icons": < "128": "" >, "content_scripts": [ < "matches": [ "*://*/*" ], "js": [ "content.js" ] >], "background": < "scripts": ["background.js"] >, "permissions": [ "http://losttime.su/*" ], "browser_action": < "default_title": "LostTime", "default_icon": "", "default_popup": "popup.html" >> 

Некоторые из строк должны быть интуитивно понятны, но что обязательно нужно знать:
— Значение manifest_version должно быть обязательно «2»;
— В content_scripts пишем, какой скрипт будет запускаться на всех страницах отдельно;
— В background пишем общий скрипт(фоновый скрипт), который запускается при запуске браузера;
— В permissions пишем адрес сайта, с которого будет браться информация.

Все, что буду использовать я, не обязательно использовать Вам, если вам это по логике просто не нужно. Подробнее о манифесте.

То самое окошко, которое Вы можете видеть по клику на иконку расширения — это страница: popup.html.

Она у меня выглядит следующим образом:

Чтобы было понятнее, описание кода вставил в самом HTML. Меню я организую просто: на картинку ставлю внутреннюю ссылку расширения.

Раз уж начал про popup.html, то расскажу сразу и о popup.js

Выглядит он у меня весьма просто:

var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token javascript">function onBlur() < // окно теряет фокус chrome.runtime.sendMessage(); // отправка сообщения на background.js localStorage[sait] = '0'; > window.onblur = onBlur; // если окно теряет фокус function sec() //выполняется каждую секунду < if(document.webkitVisibilityState == 'visible')//если страница активна < localStorage[sait] = parseInt(localStorage[sait],10) +1; // обновляем данные о сайте в локальном хранилище >> var sait=location.hostname; // на каком сайте находится скрипт localStorage[sait] = '0'; setInterval(sec, 1000);// запускать функцию каждую секунду 

Наиболее интересный момент из моего скрипта, я считаю, должен быть:
chrome.runtime.sendMessage();
Тут происходит отправка сообщения background скрипту, а именно две переменные: site:sait — содержит адрес сайта, на котором скрипт
time:localStorage[sait] — количество времени, проведенное на этом скрипте.

Далее, рассмотрим фоновый скрипт background.js, где и происходит приём данных, а точнее рассмотрим саму функцию приёма данных.

chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) < var a = request.site; // данные о сайте var b = request.time; // данные о проведенном времени // тут делаем с этими данными что хотим. >); 

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

Вот собственно всё, что я хотел поведать о создании расширения, но я затрону еще один момент, в котором у меня возникли трудности.

На странице настроек мне необходимо было организовать перетаскивание сайтов в разные колонки.

Т.к. данные вставляются посредством InnerHtml, то данная возможность просто так не появится. Вот, что пришлось организовать:

$('#dannie').on('mouseover', '.sait', function( ) < $(this).css(); >); $('#dannie').on('mouseout', '.sait', function( ) < $(this).css(); >); $('#dannie').on('mousedown', '.sait', function( ) < $(this).css(); >); $('#dannie').on('mouseover', '.sait', function( ) < $('.sait').draggable(< helper:'clone' >); >); 

$('.sait').mouseover(function()< $('#'+this.id).css(); >); $('.sait').mouseout(function()< $('#'+this.id).css(); >); $('.sait').mousedown(function()< $('#'+this.id).css(); >); $('.sait').draggable( < helper:'clone', >); 

Думаю, объяснять не нужно. Почитать подробнее можете по ссылке

Тестирование расширения

Заходим в Настройки — Инструменты — Расширения, жмем на «Загрузить распакованное расширение»

Публикация расширения
Заходим на страницу оплачиваем 5$, публикуем.
Я не останавливаюсь на моментах, с которыми у меня не возникли трудности. А трудности возникли при оплате карточкой:
— В моём случае должен быть подключен 3д пароль.
Если Вам при оплате пишет ошибку, звоните своему банку и узнавайте. Мне за минуту помогли и всё гуд.

Спасибо за прочтение. Всем удачи.

Источник

chrome.browserAction

Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can have a tooltip, a badge, and a popup.

In the following figure, the multicolored square to the right of the address bar is the icon for a browser action. A popup is below the icon.

If you want to create an icon that isn’t always active, use a page action instead of a browser action.

# Manifest

Register your browser action in the extension manifest like this:

 
"name": "My extension", 
. 
"browser_action":  
"default_icon":  // optional 
"16": "images/icon16.png", // optional 
"24": "images/icon24.png", // optional 
"32": "images/icon32.png" // optional 
>, 
"default_title": "Google Mail", // optional, shown in tooltip 
"default_popup": "popup.html" // optional 
>, 
. 
>

You can provide any size icon to be used in Chrome, and Chrome will select the closest one and scale it to the appropriate size to fill the 16-dip space. However, if the exact size isn’t provided, this scaling can cause the icon to lose detail or look fuzzy.

Since devices with less-common scale factors like 1.5x or 1.2x are becoming more common, you are encouraged to provide multiple sizes for your icons. This also ensures that if the icon display size is ever changed, you don’t need to do any more work to provide different icons!

The old syntax for registering the default icon is still supported:

 
"name": "My extension", 
. 
"browser_action":  
. 
"default_icon": "images/icon32.png" // optional 
// equivalent to "default_icon": < "32": "images/icon32.png" > 
>, 
. 
>

# Parts of the UI

A browser action can have an icon, a tooltip, a badge, and a popup.

# Icon

The browser action icons in Chrome are 16 dips (device-independent pixels) wide and high. Larger icons are resized to fit, but for best results, use a 16-dip square icon.

You can set the icon in two ways: using a static image or using the HTML5 canvas element. Using static images is easier for simple applications, but you can create more dynamic UIs—such as smooth animation—using the canvas element.

Static images can be in any format WebKit can display, including BMP, GIF, ICO, JPEG, or PNG. For unpacked extensions, images must be in the PNG format.

To set the icon, use the default_icon field of browser_action in the manifest, or call the browserAction.setIcon method.

To properly display icon when screen pixel density (ratio size_in_pixel / size_in_dip ) is different than 1, the icon can be defined as set of images with different sizes. The actual image to display will be selected from the set to best fit the pixel size of 16 dip. The icon set can contain any size icon specification, and Chrome will select the most appropriate one.

# Tooltip

To set the tooltip, use the default_title field of browser_action in the manifest, or call the browserAction.setTitle method. You can specify locale-specific strings for the default_title field; see Internationalization for details.

# Badge

Browser actions can optionally display a badge—a bit of text that is layered over the icon. Badges make it easy to update the browser action to display a small amount of information about the state of the extension.

Because the badge has limited space, it should have 4 characters or less.

Set the text and color of the badge using browserAction.setBadgeText and browserAction.setBadgeBackgroundColor , respectively.

# Popup

If a browser action has a popup, the popup appears when the user clicks the extension’s icon. The popup can contain any HTML contents that you like, and it’s automatically sized to fit its contents. The popup cannot be smaller than 25×25 and cannot be larger than 800×600.

To add a popup to your browser action, create an HTML file with the popup’s contents. Specify the HTML file in the default_popup field of browser_action in the manifest, or call the browserAction.setPopup method.

# Tips

For the best visual impact, follow these guidelines:

• Do use browser actions for features that make sense on most pages.
• Don’t use browser actions for features that make sense for only a few pages. Use page actions instead.
• Do use big, colorful icons that make the most of the 16×16-dip space. Browser action icons should seem a little bigger and heavier than page action icons.
• Don’t attempt to mimic Google Chrome’s monochrome menu icon. That doesn’t work well with themes, and anyway, extensions should stand out a little.
• Do use alpha transparency to add soft edges to your icon. Because many people use themes, your icon should look nice on a variety of background colors.
• Don’t constantly animate your icon. That’s just annoying.

# Examples

You can find simple examples of using browser actions in the examples/api/browserAction directory. For other examples and for help in viewing the source code, see Samples.

Источник