{"id":29543856,"url":"https://github.com/suyooo/firefox-nowplaying","last_synced_at":"2026-06-12T21:01:09.763Z","repository":{"id":291274156,"uuid":"977143222","full_name":"Suyooo/firefox-nowplaying","owner":"Suyooo","description":"Simple extension to automatically fetch the currently playing song from your tabs, and put it in a text or HTML file for stream widgets.","archived":false,"fork":false,"pushed_at":"2025-12-11T19:16:52.000Z","size":439,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-12T23:57:20.090Z","etag":null,"topics":["extension","firefox","now-playing","obs","obs-studio","soundcloud","spotify","youtube"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Suyooo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-03T14:22:23.000Z","updated_at":"2025-12-11T19:16:56.000Z","dependencies_parsed_at":"2025-05-03T15:40:05.033Z","dependency_job_id":null,"html_url":"https://github.com/Suyooo/firefox-nowplaying","commit_stats":null,"previous_names":["suyooo/firefox-songtitle"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/Suyooo/firefox-nowplaying","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Suyooo%2Ffirefox-nowplaying","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Suyooo%2Ffirefox-nowplaying/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Suyooo%2Ffirefox-nowplaying/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Suyooo%2Ffirefox-nowplaying/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Suyooo","download_url":"https://codeload.github.com/Suyooo/firefox-nowplaying/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Suyooo%2Ffirefox-nowplaying/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34262157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["extension","firefox","now-playing","obs","obs-studio","soundcloud","spotify","youtube"],"created_at":"2025-07-17T14:08:52.755Z","updated_at":"2026-06-12T21:01:09.715Z","avatar_url":"https://github.com/Suyooo.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# firefox-nowplaying\n\nGrab the current title of video or music playing in your Firefox and put it in a text file on your PC.\n\nMade primarily for streaming, so you can have a \"Now Playing\" overlay if you use your browser to play music.\n\n![Example screenshot of two stream overlays that can be created in OBS using this extension](example.png?raw=true)\n\nAny sites that use MediaMetadata will work with this extension. This includes, for example, YouTube, Spotify and\nSoundcloud.\n\n## Installation\n\nInstall the extension from the Firefox Addon store:\n[Now Playing](https://addons.mozilla.org/en-GB/firefox/addon/now-playing/)\n\nYou also need to download the native application on your PC to allow the addon to store the file on your disk. It comes\nwith a configuration tool you can use to connect or disconnect the application from Firefox and change the look.\n\n### Linux and Windows\n\n1. Head to [the release page](https://github.com/Suyooo/firefox-nowplaying/releases) and download the latest executable\n   for your OS\n1. Create a new folder in your favourite location and put the application in there\n1. Launch the executable to open the configuration tool and hit the \"Connect\" button\n\n### MacOS or other architectures\n\nInstead of using the prepared releases, you can also directly run the application using a Python installation on your\nPC. This is what you probably need to do on MacOS - I don't own any Macs, so I have no way to create prebundled releases\nfor them or test it there. If you're giving it a try on MacOS, let me know whether it works or what you had to do!\n\n1. Install Python 3 (on MacOS, try [Homebrew](https://brew.sh): `brew install python3`)\n1. Install `tkinter` (check your OS package manager for `python3-tk` or similar, on MacOS: `brew install python-tk`)\n1. Head to [the release page](https://github.com/Suyooo/firefox-nowplaying/releases) and download the `.pyzw` release\n1. Create a new folder in your favourite location and put the application in there\n1. Launch the `.pyzw` file to open the configuration tool and hit the \"Connect\" button\n\n### Updating\n\nThe extension will update automatically if you installed it from the Firefox Addon store. It will notify you if a new\nmajor update for the native application is required.\n\nTo update the native application, simply download the newest release and replace the previous file. As long as the\nfolder and filename stay the same, you don't even have to click \"Connect\" again (but it doesn't hurt to click it, if you\nwant to make sure everything is set up properly).\n\n## Usage\n\nOnce you have installed the extension and connected the application, you can now click the extension icon in Firefox to\nstart. The extension will be tracking the tab you activate it in - you can visit the same site in other tabs without\naffecting your Now Playing display.\n\nWhile active, the extension icon will have a badge added. If the badge is red, it means you are currently on the tab\nthat is being tracked. The addon will keep automatically updating the current song title until you click the extension\nicon again, close the tab, refresh or leave the page. If the badge is white instead of red, that means the extension is\nactive in another tab - click the icon to go to the tracked tab.\n\nTry playing a song or video - if it everything is set up correctly, you should see two new files, `nowplaying.txt` and\n`nowplaying.html`, created in the same folder as the application. If nothing happens, the site you use might not support\nMediaMetadata, so try one of the sites mentioned above to test.\n\nFrom now on, all you need to do to start using your Now Playing overlay is click the extension icon - no need to start\nan application in the background or update the configuration, just the browser is enough!\n\nYou have two ways of using this extension with OBS:\n\n### Text File\n\nWhen creating a Text source in OBS, you can choose to load text from a text file. Point it at the `nowplaying.txt` file\ncreated in the application's folder, then style the Text source as usual, and you have an auto-updating song title for\nyour stream!\n\n### Browser Source\n\nIf you'd like to be more flexible with styling, you can use a Browser source to display the `nowplaying.html` file.\nCreate a Browser source in OBS, check \"Local File\", and choose the HTML file in the application's folder.\n\nYou can now use the CSS field in the configuration tool to fully style the overlay however you want, by writing CSS\nrules for the `#nowplaying` selector to style the container around all of the text, the `#title`, `#artist` and `#album`\nselectors to style just those values, and the `#artwork` selector to position the cover art. Note that the HTML file\nwon't update until the song changes while the Firefox extension is active!\n\nBe warned that the \"Custom CSS\" option in the OBS Browser source settings might lead to flickering, since that CSS block\nis loaded with a slight delay after each refresh. But you can still use it for just trying out styles, and then simply\ncopy it into the configuration tool to properly set the CSS up.\n\nHere's the CSS used for the example screenshots at the top, to give you a start:\n\n```css\n/* Text Format: 🎜 {$title$}{$if_artist$ - $}{$artist$} */\n\n#nowplaying {\n\tbackground: rgba(0, 0, 0, 0.5);\n\tcolor: white;\n\tfont-family: sans-serif;\n\tfont-weight: semibold;\n\tfont-size: 24px;\n\tpadding: 0.25em 0.5em;\n}\n```\n\n```css\n/* Text Format: \u003cdiv id=\"my_container\"\u003e{$title$}{$artist$}\u003c/div\u003e{$artwork$} */\n\n/* This is the main container */\n#nowplaying {\n\t/* This is a flexbox - place items horizontally */\n\tdisplay: flex;\n\tgap: 5px;\n\twidth: 350px;\n\t/* Using a fancy gradient as the background - https://cssgradient.io/ */\n\tbackground: linear-gradient(0deg, rgba(255, 204, 255, 1) 0%, rgba(204, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);\n\t/* Add a border, round the corners, and add some space between items and the border */\n\tborder: 2px white solid;\n\tborder-radius: 20px;\n\tpadding: 5px;\n\t/* Choose a nice font */\n\tfont-family: Quicksand;\n}\n\n/* We can add extra text using the ::before and ::after pseudo-elements */\n#nowplaying::before {\n\tcontent: \"NOW PLAYING\";\n\t/* Place this at fixed coordinates */\n\tposition: absolute;\n\ttop: 5px;\n\tleft: 10px;\n\t/* Text style */\n\tcolor: #770077;\n\tfont-size: 10px;\n\tletter-spacing: 3px;\n}\n\n/* This is a custom container we defined in the text format */\n#my_container {\n\t/* This is a vertical flexbox */\n\tdisplay: flex;\n\tflex-direction: column;\n\t/* Center content along the main axis */\n\tjustify-content: center;\n\t/* Make this as big as possible in the parent's flexbox */\n\tflex-grow: 1;\n\t/* Cut off text if it is too long */\n\toverflow: hidden;\n\t/* Add some space on just the left side */\n\tpadding-left: 15px;\n}\n\n#title {\n\tcolor: #003333;\n\tfont-weight: bold;\n\tfont-size: 20px;\n\t/* Do not break lines - if the title is too long, cut it of with triple dots */\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n}\n\n#artist {\n\tcolor: #007777;\n\tfont-size: 14px;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n}\n\n#artwork {\n\t/* Fixed height, rounded corners */\n\theight: 64px;\n\tborder-radius: 12px;\n\t/* Make this element always a square, even if the image is a different aspect ratio */\n\taspect-ratio: 1;\n\t/* If the image is not square, cut off the sides so the square is fully filled */\n\t/* If you prefer letterboxing/pillarboxing, try object-fit: contain; */\n\tobject-fit: cover;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuyooo%2Ffirefox-nowplaying","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuyooo%2Ffirefox-nowplaying","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuyooo%2Ffirefox-nowplaying/lists"}