Lets you control various media sites using the media keys on your keyboard.
Your media keys should work without the browser window active for Chrome and Opera. Firefox only supports the play/pause key and only if the browser window is active. You can however change the key assignments for this extension, to any key combination that you'd like, by using the shortcuts manager for the browser.
Supported Sites: youtube, pandora, spotify, bandcamp, google play, yandex, soundcloud, tidal, deezer, plex, vk, subsonic, jamstash, jango, overcast.fm, music.amazon.co.uk, music.amazon.com, music.amazon.com.au, di.fm, netflix.com, and tunein.com.
Please find us on GitHub if you'd like to request features, post issues or contribute to the project.
Firefox Opera/Chrome - Still awaiting store approval but you can install using the crx file.
If you'd like support for a multimedia website to be added, please create an issue with the following information:
- Link to the website
- Name of the website
- Player control element html; see below on how to capture that.
- Navigate to the multimedia website you'd like added.
- Start playing something on the site
- Inspect the pause button
- Right-Click on the button
- Click "Inspect Element"
- Copy the outer HTML of the element
- Right-Click on the highlighted text in the Inspector panel
- Click "Copy > Outer HTML"
- Paste that HTML into the new issue description
- Repeat these steps for the following buttons: Play, Next/Skip, Back/Previous.
Note: If you cannot inspect the player controls, then player is a custom page element and you will have to figure out the Application Programming Interface (API) for the element in order to add support for it. The Youtube player is such an element so you can use the code for that as an example of how to do this. Fortunately the youtube player has really good documentation but the player you are attempting to add may not.
Most sites have standard html elements for player controls. If you were able to follow the instructions in the previous section then the process for adding support is fairly painless:
- The
data
folder contains -view.js scripts for each website that has standard html player control elements. - Copy one of -view.js scripts for another site you're familiar with, and rename it to match the new site.
- Review the html you extracted earlier and look for an html attribute that seems unique to the element and hopefully one that clearly identifies it.
For instance,<button qa-id="play-button" class="player-control-button play-button"/>
hasqa-id="play-button"
. - Replace the xpath for each element using what you learned from reviewing each elements html.
eg.'//button[@qa-id="play-button"]'
- Sometimes the player controls are contained inside of an iframe. If that's the case, then you need to provide an xpath for locating the iframe using the optional variable
MediaKeys.basePlayer
. - Now that you've created the view script, you will need to update the add-on manifest.json to include the website. So open it in the base directory.
- Look for the content_scripts section which should be organized alphabetically by multimedia website.
- Find the section for the website you used as your starting point and copy it.
- Paste the copied section into the appropriate spot to maintain alphabetical ordering.
- Rename the lines that are specific to the old site.
- Time to test!
This add-on utilizes web-ex
for building the extension and the Debugger for Firefox/Chrome
Visual Studio Code extensions for debugging. npm install
will set up web-ex for you provided you use the npm scripts included in package.json or have ./node_modules/.bin in your PATH.
To start the browser test environment without running tests, select Debug->'Start Debugging' from the VSCode menu bar.
Chrome/Opera Debugging: You must load the extension yourself from the extension manager, using the "Load unpacked extension..." option.
Pandora, Youtube and Spotify also can be launched in the test environment. e.g. npm run pandora
Always start with Firefox, because it knows better than the other packers of what is included in the webextension.
The npm build script will generate a zip file that's ready for uploading to Firefox.
npm run build
- Extract the zip file created for Firefox to a folder
- Open Opera
- Go to the extension manager
- Pack extension, providing the secret key not in this repo
I haven't done this one yet but it's probably the same as Opera.