Git Product home page Git Product logo

webext-gnome-media-control's Introduction

A browser extension for controlling Firefox media playback with keyboard media keys under GNOME.

Features

  • Play / Pause playback of <audio> and <video> elements with the media keys of your keyboard

Installation

To install the add-on, do the following:

  • Install the native components by executing the ./install-native.sh script.
  • Install the add-on to Firefox

Requirements

Before installing the native component, you need to install the following dependencies:

  • python3
  • gir1.2-glib-2.0

Additionally, this only works under GNOME based sessions that are running the GNOME settings daemon (like Unity in Ubuntu 16.04).

How it Works?

The add-on contains following logic to decide which media element to control when play / stop media key is clicked.

  • If any element is playing, pause the playback of all elements
  • If no element is playing, start playing the element whose playback started most recently

TODO / Ideas

  • Configurable logic on how to choose which element(s) to pause when the browser is playing media:
    • Pause all (current)
    • Pause all except the most recent element
    • Pause all except the most recent element in the current tab
  • Configurable logic on which element to play when all tracks are paused:
    • Play the most recent one (current)
    • Play the most recent one in the current tab
  • Configurable timeout until the add-on releases media keys after last track has stopped playing
  • Better instructions on how to install the native components
  • Chrome / Chromium support

Development

Add-on

The add-on is built with webpack. Use npm install to install the required dependencies.

The add-on code lives in the add-on directory. The top-level files background.js and content.js are automatically generated with webpack. The entrypoints for these two scripts are:

  • add-on/background/main.js - entrypoint to the background.js script (top-level statements in this file are executed when the add-on is loaded)
  • add-on/content/main.js - entrypoint to the content.js script (top-level statements in this file are executed when a page is loaded).

To build the entrypoint bundles, run the following:

npm run build

If you want to continuously test your changes, make sure to run the following commands (needs different terminals):

npm run build:watch # to make webpack build the bundles when sources change
npm run start # to make web-ext cli reload the extension when the bundles change

To make a production build (silences debug logging), run the following command

npm run build:prod

Native Component

The native component is avaiable in the native/ directory. The component is in charge of talking to GNOME Settings Daemon over DBus to grab media keys and listen for media key presses.

To test changes made to the script or the manifest:

  • Install the new versions with the install-native.sh script
  • Reload the add-on manually from about:debugging

The log output of the native component can be found from the file ~/.mozilla/native-messaging-hosts/gnome_media_control.log.

webext-gnome-media-control's People

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.