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

[Anonym]

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

1. Вместо
   

   <a href="/options.html"><img class='img' src="images/options.png" Title="Настройки программы"></a>
   

   
   Нужно делать
   

   var optionsUrl = chrome.extension.getURL('options.html');
   chrome.tabs.create({url: optionsUrl});
   

   
   а еще лучше
   

   var optionsUrl = chrome.extension.getURL('options.html');
   chrome.tabs.query({url: optionsUrl}, function(tabs) {
     if (tabs.length)
       chrome.tabs.update(tabs[0].id, {active: true, url: optionsUrl});
     else
       chrome.tabs.create({url: optionsUrl});
   });
   

   
   
2. Если у вас в popup используется jQuery, почему вы делаете new XMLHttpRequest(), а не используете $.ajax?
   
3. Таймер на всех страницах в браузере, который обновляет данные раз в секунду для каждой страницы? Что-то мне это совсем не нравится. Если уж хотите крутить таймер, так запускайте таймер только в активной вкладке, а в неактивных останавливайте его.
   
4. А CSS вам чем не угодил?
   

   $('#dannie').on('mouseover', '.sait', function( ) {
       $(this).css({'border':'3px solid #ffffff'});
   });
   $('#dannie').on('mouseout', '.sait', function( ) {
       $(this).css({'border':'3px solid black'});
   });
   $('#dannie').on('mousedown', '.sait', function( ) {
       $(this).css({'border':'3px solid black'});
   });
   

   
   
5. Получение данных с losttime.su/?tmpl=login&token=… есть, а отправку данных вы не описали. Это не так важно или ее вообще нет?
   

[planetary]

1) я не профи в этой области, делал как знаю и как понятнее для меня.

Остальные ответы исходя из первого.

3) Согласен, но это ничтожная нагрузка. Возможно, это я исправлю.
4) В моём случае, я могу добавлять разные анимации к тому же.
5) Отправляются данные ГЕТ запросом. Посчитал, что это будет лишней информацией.

[Anonym]

Вы только не принимайте близко к сердцу

1. Если вы не профи, не пишите туториалов.
2. Прислушивайтесь к тому, что вам советуют.
3. Нагрузка не ничтожная. Откройте 50 вкладок и диспетчер процессов хрома и увидите.
4. Можете, но это Чушь Петровна. Если надо будет добавить анимации — добавите анимации, а стили должны быть в CSS.
5. А в ограничение на длину GET запроса вы не упираетесь? Или вы GET с телом шлёте?

[seyfer]

3) я думаю тут дело не в нагрузке, а в корректности данных. Если у меня закрыта вкладка — зачем ее считать?

Я использую расширение Time Tracker, считает только активную.

[planetary]

Статья рассчитана на новичков, знающих лишь основы javascript и html. Для них я и писал. При начинании написания расширения, я бы больше хотел увидеть такой пост, чем статью с заумными непонятными функциями, типа

var optionsUrl = chrome.extension.getURL('options.html');
chrome.tabs.query({url: optionsUrl}, function(tabs) {
  if (tabs.length)
    chrome.tabs.update(tabs[0].id, {active: true, url: optionsUrl});
  else
    chrome.tabs.create({url: optionsUrl});
});

вместо обычного, всем понятного:

<a href="/options.html"><img class='img' src="images/options.png" Title="Настройки программы"></a>

[Anonym]

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

Это не «заумные и непонятные функции», это функции, которые описаны в официальной документации по разработке расширений. А вы сделали «лишь бы работало».

[planetary]

А вы сделали «лишь бы работало».

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

[Sirian]

ммм…

$('#'+this.id)

это новый способ получения

$(this)

?

[planetary]

Нет, это одно и то же. Просто скопировал как было раньше и как стало.

[Anonym]

А еще у вас там XSS и SQL Injection

[Glebcha]

Возможно навлеку гнев, но все же поясните какой смысл в jQuery когда тут можно вполне обойтись vanilla.js без особых трудностей (меня как и Anonym смутил порыв ajax-запросов замиксованный с остальным на jQuery)?
И не стесняйтесь, публикуйте ссылку на репозиторий в Github.

[planetary]

я с vanilla.js не работал, использую, что на данный момент знаю.

[Glebcha]

Попробуйте, вам понравится. Хотя бы для того, чтобы понимать какая «магия» происходит в jQuery.

[seyfer]

Это так тонко, что я улыбаюсь уже 5 минут. :)