Skip to content

Commit

Permalink
feat: add support for Firefox
Browse files Browse the repository at this point in the history
  • Loading branch information
drodil committed Aug 6, 2024
1 parent 064aa18 commit ed8ece2
Show file tree
Hide file tree
Showing 24 changed files with 1,061 additions and 32 deletions.
5 changes: 3 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.idea
.DS_Store
Archive.zip
images/store
package.zip
**/images/store
web-ext-artifacts
node_modules
35 changes: 27 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
![Youtube Auto Pause](yt_auto_pause.png)

This is a Chrome extension that pauses Youtube videos when losing the tab/window focus by
This is a Chrome & Firefox extension that pauses Youtube videos when losing the tab/window focus by
sending events to the player. Resumes the playback once the Youtube tab/window is back in focus.

Also listens for computer lock events and when the video goes out of viewport
Expand All @@ -10,18 +10,28 @@ Features some useful keyboard shortcuts to control videos in the window.

## Installing

**From chrome web store**
**From web store**

https://chrome.google.com/webstore/detail/pbehcnkdmffkllmlfjpblpjhflnafioo/
Chrome: https://chrome.google.com/webstore/detail/pbehcnkdmffkllmlfjpblpjhflnafioo/
Firefox: https://addons.mozilla.org/en-US/firefox/addon/youtube-auto-pause/

**Manually**
**Manually (chrome)**

1. Clone the repository
2. Start chrome
3. Go to chrome://extensions
3. Go to `chrome://extensions`
4. Enable developer mode
5. Click on "Load unpacked"
6. Select the cloned folder
6. Select the `chrome` directory in the repository

**Manually (firefox)**

1. Clone the repository
2. Start firefox
3. Go to `about:debugging`
4. Click on "This Firefox"
5. Click on "Load Temporary Add-on"
6. Select the `firefox` directory in the repository

## Supported services

Expand All @@ -37,6 +47,15 @@ Please feel free to contribute with pull requests or by creating issues. In case
the extension does not work, please also list all other extensions you have
enabled as this might conflict with other extensions.

## TODO
### Running and developing

To run the extension, either use `npm run start:chrome` or `npm run start:firefox` to start
specific browser. This will open a new browser window with the extension enabled.

If you want to debug the extension further, use `npm run debug:chrome` and `npm run debug:firefox`
respectively. This will open the browser's developer tools that you can use to debug the extension.

### Building

- Allow selecting video services
Run `npm install` to fetch necessary dependencies. Then run `npm run build` to build
the extension packages under `web-ext-artifacts`.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes.
4 changes: 2 additions & 2 deletions options.js → chrome/options.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,15 @@ for (host of hosts) {
label.appendChild(checkbox);
const span = document.createElement("span");
span.className = "label-text";
span.innerHTML = formatHostName(host);
span.textContent = formatHostName(host);
label.appendChild(span);
hostsDiv.appendChild(label);
checkbox.addEventListener("change", save_options);
}

// Show version in the options window
const version = document.getElementById("version");
version.innerHTML = "v" + chrome.runtime.getManifest().version;
version.textContent = "v" + chrome.runtime.getManifest().version;

// Restore options on load and when they change in the store
document.addEventListener("DOMContentLoaded", restore_options);
Expand Down
21 changes: 12 additions & 9 deletions yt.js → chrome/yt.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ let options = {
debugMode: false,
};

var hosts = chrome.runtime.getManifest().host_permissions;
for (var host of hosts) {
const hosts = chrome.runtime.getManifest().host_permissions;
for (const host of hosts) {
options[host] = true;
}

Expand Down Expand Up @@ -75,7 +75,7 @@ function isEnabledForTab(tab) {
});

if (optionKey) {
return options[optionKey];
return !!options[optionKey];
}

return false;
Expand Down Expand Up @@ -144,7 +144,7 @@ function toggle_mute(tab) {
}

// Listen options changes
chrome.storage.onChanged.addListener(async function (changes, namespace) {
chrome.storage.onChanged.addListener(async function (changes) {
enabledTabs = [];
for (const key in changes) {
debugLog(
Expand All @@ -154,14 +154,17 @@ chrome.storage.onChanged.addListener(async function (changes, namespace) {
}

if ("disabled" in changes) {
refresh_settings();
const tabs = await chrome.tabs.query({ active: true });
const tabs = await browser.tabs.query({ active: true });
if (!options.disabled) {
debugLog(`Extension enabled, resuming active tabs`);
} else {
debugLog(`Extension disabled, stopping active tabs`);
}

for (let i = 0; i < tabs.length; i++) {
if (options.disabled === true) {
debugLog(`Extension enabled, resuming active tabs`);
if (!options.disabled) {
resume(tabs[i]);
} else {
debugLog(`Extension disabled, stopping active tabs`);
stop(tabs[i]);
}
}
Expand Down
File renamed without changes.
11 changes: 0 additions & 11 deletions create_package.sh

This file was deleted.

Binary file added firefox/images/icon_1024.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added firefox/images/icon_128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added firefox/images/icon_16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added firefox/images/icon_32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added firefox/images/icon_64.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
84 changes: 84 additions & 0 deletions firefox/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
{
"name": "YouTube Auto Pause",
"version": "1.7.0",
"description": "Stops YouTube (+ other video services) on tab unfocus and continues on focus",
"permissions": ["tabs", "storage", "activeTab", "scripting", "idle"],
"browser_specific_settings": {
"gecko": {
"id": "drodil@youtube_auto_pause",
"strict_min_version": "127.0"
}
},
"host_permissions": [
"https://*.youtube.com/*",
"https://*.vimeo.com/*",
"https://*.netflix.com/watch/*",
"https://*.youtubekids.com/*",
"https://*.primevideo.com/*",
"https://*.hbomax.com/*",
"https://*.disneyplus.com/*",
"https://*.twitch.tv/*",
"https://*.udacity.com/*"
],
"homepage_url": "https://github.com/drodil/youtube_auto_pause",
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
"icons": {
"16": "images/icon_16.png",
"32": "images/icon_32.png",
"64": "images/icon_64.png",
"128": "images/icon_128.png"
},
"action": {
"default_popup": "options.html",
"default_icon": {
"16": "images/icon_16.png",
"32": "images/icon_32.png",
"64": "images/icon_64.png",
"128": "images/icon_128.png"
}
},
"background": {
"scripts": ["yt.js"]
},
"externally_connectable": {
"ids": ["*"],
"matches": [
"https://*.youtube.com/*",
"https://*.youtubekids.com/*",
"https://*.vimeo.com/*",
"https://*.netflix.com/watch/*",
"https://*.primevideo.com/*",
"https://*.hbomax.com/*",
"https://*.disneyplus.com/*",
"https://*.twitch.tv/*",
"https://*.udacity.com/*"
]
},
"commands": {
"toggle-extension": {
"suggested_key": {
"default": "Ctrl+Shift+K",
"mac": "Command+Shift+K"
},
"description": "Toggle auto pause/resume"
},
"toggle-play": {
"suggested_key": {
"default": "Ctrl+Shift+Space",
"mac": "Command+Shift+Space"
},
"description": "Toggle play/pause"
},
"toggle_mute": {
"suggested_key": {
"default": "Ctrl+Shift+O",
"mac": "Command+Shift+O"
},
"description": "Toggle mute"
}
},
"manifest_version": 3
}
139 changes: 139 additions & 0 deletions firefox/options.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html>

<head>
<title>Youtube Auto Pause options</title>
<style>
@charset "UTF-8";
@import 'https://fonts.googleapis.com/css?family=Nunito:300';

body {
font-family: "Nunito", sans-serif;
font-weight: 300;
padding: 0;
margin: 0;
}

.container {
padding: 10px;
}

label {
cursor: pointer;
color: #383A3F;
display: block;
font-size: 1.2em;
}

p, label {
margin-top: 5px;
margin-bottom: 5px;
}

h2 {
font-size: 20px;
text-align: center;
user-select: none;
}

h4, hr, h2 {
margin: 0;
}

#logo {
margin-right: 6px;
margin-left: 3px;
width: 22px;
height: 22px;
vertical-align: sub;
}

#version {
float: right;
}

a, a:hover, a:focus, a:active {
text-decoration: underline;
color: inherit;
}

.collapsible_button {
cursor: pointer;
color: #383A3F;
background-color: white;
padding: 2px 0 2px 0;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 13px;
}

.collapsible_button::after {
content: ' \25BC'
}

.collapsible_button.active::after {
content: ' \25B2'
}

.collapsible_content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>

<body>
<div style="width: 350px">
<div class="container">
<h2><img src="images/icon_32.png" id="logo" alt="YouTube Auto Pause"/>YouTube Auto Pause</h2>
</div>
<hr>
<div class="container">
<h4>Settings</h4>
<label><input type="checkbox" id="autopause"><span class="label-text">Enable auto pause on tab unfocus</span></label>
<label><input type="checkbox" id="autoresume"><span class="label-text">Enable auto resume on tab focus</span></label>
<label><input type="checkbox" id="focuspause"><span class="label-text">Enable auto pause on window unfocus</span></label>
<label><input type="checkbox" id="focusresume"><span class="label-text">Enable auto resume on window focus</span></label>
<label><input type="checkbox" id="lockpause"><span class="label-text">Enable auto pause on computer lock</span></label>
<label><input type="checkbox" id="lockresume"><span class="label-text">Enable auto resume on computer unlock</span></label>
<label><input type="checkbox" id="scrollpause"><span class="label-text">Enable auto pause when out of viewport</span></label>
<label><input type="checkbox" id="cursorTracking"><span class="label-text">Enable cursor on window tracking</span></label>
<label><input type="checkbox" id="manualPause"><span class="label-text">Manual pause disables auto resume</span></label>
<label><input type="checkbox" id="disabled"><span class="label-text">Disable auto pause/resume</span></label>
</div>
<hr>
<div class="container">
<button class="collapsible_button">Advanced settings</button>
<div class="collapsible_content">
<div id="hosts">
<h4>Enabled sites</h4>
</div>
<h4>Other settings</h4>
<label><input type="checkbox" id="debugMode"><span class="label-text">Enable debug mode</span></label>
</div>
</div>
<hr>
<div class="container">
<h4>Hotkeys</h4>
<div id="hotkeys">
</div>
<p>You can configure hotkeys in the Extensions menu</p>
</div>
<hr>
<div class="container" style="padding-top: 0">
<p style="float: left;"><a href="https://github.com/drodil/youtube_auto_pause" target="_blank">Source</a></p>
<p id="version"></p>
</div>
<hr style="clear: both">
<div class="container" style="padding-top: 0">
<p style="float: left"><a href="https://github.com/sponsors/drodil" target="_blank">Support on GitHub</a></p>
<p style="float: right"><a href="https://patreon.com/drodil" target="_blank">Support on Patreon</a></p>
</div>
</div>
<script src="options.js"></script>
</body>

</html>
Loading

0 comments on commit ed8ece2

Please sign in to comment.