Let's say you open two GitHub tabs, the [rust repository](https://github.com/rust-lang/rust) and [your stars](https://github.com/stars) page. You decide to star the awesome rust repository, but then you have to
refresh your stars page to see your new star. That's sad. There must be a way for GitHub to refresh
your stars page in case you star something in another tab, right?
BroadcastChannels are constructed with a single argument, their name. Browsing contexts should use
this name to communicate over a specified channel. There's no limit to how many channels you can create.
In the first sentence of article I said it's used to communicate between tabs, but it's actually "browsing contexts".
[Browsing contexts](http://www.w3.org/TR/html5/browsers.html#browsing-context) are any environments owning a `Document`, e.g. tabs, windows, iframes, etc.
Channels inherit from [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget), so you can use `addEventListener`, `removeEventListener` and `dispatchEvent` methods.
The event object passed to this event is a [`MessageEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent) with the `data` property set to the actual message sent using `postMessage`.
Okay, let's try something cool, I promise you will love it. Open a browser with [BroadcastChannel support](http://caniuse.com/#feat=broadcastchannel) and Install [GreaseMonkey](http://www.greasespot.net/).
You have to add two scripts, one for repository pages, and one for the stars page.
Click "New User Script", and fill the inputs like this:
In the Script Editor, enter this:
{% highlight javascript %}
// join the "Stars" channel
var channel = new BroadcastChannel('Stars');
// reload the page when someone from a github.com tab broadcasts a message
channel.addEventListener('message', message => {
location.reload();
});
{% endhighlight %}
Now create another script and fill the form like this:
Use this code:
{% highlight javascript %}
// join the "Stars" channel
var channel = new BroadcastChannel('Stars');
// once the star/unstar forms are submitted, broadcast a message to
// all github.com tabs
$('.starring-container form').submit(e => {
channel.postMessage('refresh');
});
{% endhighlight %}
Save, refresh your pages and Voila! You can now Star/Unstar any repository while your stars page
is open, and your stars page will refresh immediately.
