05 January 2016
It would be cool if I could press the play/pause button on my headset and cause the current video I'm watching to react accordingly. A feature like this has already been built in the form of a Chrome extension, but there were a few tweaks I wanted to make.
This Chrome extension called "Key Socket Media Keys" does the job for the most part, giving us the ability to use the standard media keys you would find on an Apple keyboard for a handful of websites. The two issues I have with it though is that it sends the command to all open tabs at once, which I would prefer if it only sent to the active tab, and it doesn't have a plugin for Netflix. The following is a tutorial on modifying the extension to fix these issues.
When you install the Key Socket Media Keys extension, it will be installed here: /Users/$USERNAME/Library/Application Support/Google/Chrome/Default/Extensions/
followed by some unique hash. If we go into that directory then it's child's directory, we have the code for the extension.
To only send the command to the tab you're currently looking at, open the background.js file, find the following line
for (var i = 0; i < registeredTabs.length; i++) {
chrome.tabs.sendMessage(registeredTabs[i], {command: command});
}
and replace it with this:
chrome.tabs.query({active: true, currentWindow: true}, function(tabsList) {
chrome.tabs.sendMessage(tabsList[0].id, {command: command});
});
This will instead of sending the message to all registered tabs, just send it to the most recently active tab.
Then to enable Netflix control, create a file in that same directory named keysocket-netflix.js, and insert the following code:
function onKeyPress(key) {
var video = document.querySelector('video');
if (key === PLAY) {
var playPauseButton = document.querySelector('.player-play-pause');
simulateClick(playPauseButton);
} else if (key === NEXT) {
var nextButton = document.querySelector('.player-next-episode');
simulateClick(nextButton);
}
}
Once that's done, we need to edit the manifest.json file by locating the "content_scripts" list and appending the following object:
{
"js": [ "shared.js", "keysocket-netflix.js" ],
"matches": [ "*://*.netflix.com/*" ]
}
So you'll end up with something that looks like this:
"content_scripts": [ {
"js": [ "media-control-api.js" ],
"matches": [ "\u003Call_urls>" ]
}, {
"js": [ "shared.js", "keysocket-netflix.js" ],
"matches": [ "*://*.netflix.com/*" ]
}, {
Once that is done, it's good to go! All we need to do now is reload the extension. We can do that by going to chrome://extensions/ in the Chrome browser, enabling Developer Mode in the upper right hand corner, then clicking Load unpacked extension... and selecting the directory with the code that we were just editing. Note, you may have to remove the _metadata folder in order for Chrome to accept it.
This tweak, when combined with the Bluetooth Headset hack will enable you to use the media keys on your headset to play and pause YouTube, Netflix and more!