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);

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

When this gets run when twitter.com loads, it sets up the code to look for the annoying bar every second (1000 milliseconds) and then runs its click event handler which loads the new tweets. That’s all it takes, and now your tweets are streaming down automatically whenever they are available without you having to explicitly refresh them all the time. We’ve only written code for 5 minutes and in that time we tweaked the way Twitter looked, removed some “functionality” and added some functionality! We’re on a roll! Let’s do something fancier now.

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

Highlighting tweets from rare tweeters (wait, or tweepers?)

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

One day I decided to collect tweets on my timeline over a period of a week using Twitter’s REST API and saw that 30 accounts make up 50% of everything I see on Twitter. Since I follow 384 accounts in total, that’s only 7%! Unfortunately, for Twitter every tweet is created equal, which means that this annoying social media guru person who tweets 100 times a day completely drowns tweets coming from your other friends who believe that one should also have something worthy of tweeting too. Okay well it’s not exactly like that but I wished there was a mechanism for highlighting the very infrequent tweeters and seeing that low frequency content. Twitter will never implement this because it makes Zero sense for their revenue model, but luckily, we can hack this together quite easily! First, here’s a function that goes through all tweets on your timeline, looks at who tweeted, and “charges” every unique tweet to the originating user:

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

var charge_tweets = function() { // get all tweets in twitter timeline var items = $('.tweet'); for(var i=0;i<items.length;i++) { var it = items[i]; // extract information from tweet HTML var original_user = $(it).attr('data-screen-name'); var retweeter = $(it).attr('data-retweeter'); var tweet_id = $(it).attr('data-tweet-id'); // a bit of logic var charged_user = original_user; if(typeof retweeter !== 'undefined') { charged_user = retweeter; } // charge tweet to the user 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]; } } };

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]; } } };

Basically, it turns out every tweet has class “tweet”, so it is trivial to iterate over them as seen above. Similarly, by inspecting the way the HTML is laid out, it turns out we can simply scrape the user and the (unique) tweet id and use it to build up a dictionary of user_string -> [tweet id, ...]. Of course, we will have to let this accumulate for a few days before it measures a good tweeting frequency distribution for all people we follow as we visit Twitter again and again always seeing new tweets from more people. But this also means we have to load and save the charge dictionary from Chrome’s local extension storage or otherwise we would lose all our charging work whenever we close the Tab! Easy enough:

По сути, оказывается, что каждый твит имеет класс «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'); } }); }

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'); } }); }

Now we just make sure to run load_charge() at start up, and save_charge() anytime there are new tweets and our charge dictionary changes. Based on this charge dictionary we can easily find, say, the 50th percentile frequency, and highlight any tweet that comes from a user who tweets less often than 50% of the users we follow:

Теперь нужно просто убедиться, что 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]; // ... as above and then: var charged_tweets = charge[charged_user]; var charge_count = charged_tweets.length; // adjust highlight color of the tweet according to rareness 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 + ')'); } } }

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 + ')'); } } }

This is just one possibility out of many. Here, ratio will be low for users who rarely tweet, and we’re setting their tweet to be yellow based on their rareness. Very hard to not notice on your timeline! :) And while we’re at it, why not also fit in:

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

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

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

This way, Elon Musk’s (or your other Twitter favorites) tweets will always glow a vibrant, green color that is hard to notice! Nice. Here’s what we get:

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

Just look at that! Mashable and some person who needed every single one of his followers to know “Aarrrgh” look normal, Elon’s tweets are hard to miss green, and someone who doesn’t tweet relatively as often is highlighted a bit as yellow.

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

Summary

Итоги

It took us ~100 lines and 10 minutes of Javascript (with a bit of practice) and we tweaked Twitter’s look, removed err… undesirable content, made Twitter autorefresh, and added an entirely new feature that highlights infrequent tweepers!

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