Chrome Extension Programming: Illustrating a Basic Survival Skill with a Twitter Case Study

var periodic = function() { L = document.getElementsByClassName('js-new-tweets-bar'); if(L.length > 0){ L[0].click(); } } setInterval(periodic, 1000);

Когда этот код запускается при загрузке twitter.com, он настраивает проверку раздражающей плашки каждую секунду (1000 миллисекунд) и вызывает её обработчик клика, который подгружает новые твиты. Вот и всё — теперь ваши твиты автоматически подгружаются, как только появляются, без необходимости постоянно обновлять страницу вручную. Мы писали код всего 5 минут, и за это время подправили внешний вид Twitter, убрали кое-какой «функционал» и добавили новый! Мы на ходу! Давайте теперь сделаем что-нибудь поинтереснее.

Подсветка твитов от редко пишущих авторов (или, подождите, твиперов?)

Однажды я решил собрать твиты из своей ленты за неделю через REST API Twitter и обнаружил, что 30 аккаунтов формируют 50% всего, что я вижу в Twitter. Учитывая, что я подписан на 384 аккаунта, это всего 7%! К сожалению, для Twitter все твиты равны, а это значит, что какой-нибудь навязчивый гуру соцсетей, который твитит 100 раз в день, полностью заглушает твиты от ваших друзей, которые считают, что перед публикацией неплохо бы иметь что-то стоящее. Ладно, не совсем так, но мне хотелось иметь механизм для подсветки очень редких авторов и возможность видеть их контент. Twitter никогда не реализует это, потому что для их модели монетизации это не имеет никакого смысла, но, к счастью, мы можем легко собрать это сами! Вот функция, которая проходит по всем твитам в вашей ленте, смотрит, кто написал твит, и «начисляет» каждый уникальный твит соответствующему пользователю:

var charge_tweets = function() { // получаем все твиты в ленте Twitter var items = $('.tweet'); for(var i=0;i<items.length;i++) { var it = items[i]; // извлекаем информацию из HTML твита var original_user = $(it).attr('data-screen-name'); var retweeter = $(it).attr('data-retweeter'); var tweet_id = $(it).attr('data-tweet-id'); // немного логики var charged_user = original_user; if(typeof retweeter !== 'undefined') { charged_user = retweeter; } // начисляем твит пользователю if(charge.hasOwnProperty(charged_user)) { var L = charge[charged_user]; if($.inArray(tweet_id, L) === -1) { L.push(tweet_id); } } else { charge[charged_user] = [tweet_id]; } } };

По сути, оказывается, что каждый твит имеет класс «tweet», поэтому перебирать их тривиально, как показано выше. Аналогично, изучив структуру HTML, оказывается, что мы можем просто извлечь имя пользователя и (уникальный) id твита и использовать их для построения словаря user_string -> [tweet id, ...]. Конечно, нужно подождать несколько дней, чтобы накопить хорошее распределение частоты публикаций для всех, на кого мы подписаны, — ведь мы заходим в Twitter снова и снова, каждый раз видя новые твиты от разных людей. Но это также означает, что нам нужно сохранять и загружать словарь charge из локального хранилища расширения Chrome, иначе мы потеряем всю накопленную статистику при закрытии вкладки! Это несложно:

var save_charge = function() { chrome.storage.local.set({'charge': charge}); } var load_charge = function() { chrome.storage.local.get('charge', function (result) { if(result.charge) { charge = result.charge; console.log('loaded tweet frequency stats:'); console.log(charge); } else { console.log('no tweet frequency to load'); } }); }

Теперь нужно просто убедиться, что load_charge() вызывается при запуске, а save_charge() — каждый раз, когда появляются новые твиты и наш словарь charge обновляется. На основе этого словаря charge мы можем легко найти, скажем, 50-й перцентиль частоты и подсветить любой твит от пользователя, который публикует реже, чем 50% людей, на которых мы подписаны:

var display_charges = function() { var items = $('.tweet'); for(var i=0;i<items.length;i++) { var it = items[i]; // ... как выше, а затем: var charged_tweets = charge[charged_user]; var charge_count = charged_tweets.length; // подстраиваем цвет подсветки твита в зависимости от редкости if(charge_percentile > 0) { var ratio = charge_count / charge_percentile; var x = Math.floor(Math.min(ratio,1)*255); $(it).css('background-color', 'rgb(255,255,' + x + ')'); } } }

Это лишь одна из множества возможностей. Здесь ratio будет низким для пользователей, которые редко твитят, и мы окрашиваем их твиты в жёлтый цвет в зависимости от редкости. Такое очень трудно не заметить в ленте! :) А раз уж мы тут, почему бы не добавить ещё:

var VIP = ['elonmusk']; if($.inArray(charged_user, VIP) !== -1) { $(it).css('background-color', 'rgb(150,255,150)'); }

Таким образом, твиты Elon Musk (или других ваших фаворитов в Twitter) будут всегда светиться ярким зелёным цветом, который трудно не заметить! Отлично. Вот что получается:

Только посмотрите на это! Mashable и некто, кому нужно было донести до каждого подписчика своё «Ааааррргх», выглядят обычно; твиты Elon невозможно пропустить благодаря зелёному цвету, а кто-то, кто публикует относительно редко, подсвечен жёлтым.

Итоги

Нам понадобилось ~100 строк и 10 минут JavaScript (с небольшой практикой), и мы подправили внешний вид Twitter, убрали э-э… нежелательный контент, сделали автообновление Twitter и добавили совершенно новую функцию — подсветку редко пишущих твиперов!