🎉 Init

laurens94 · Jun 7, 2023 · b14c254 · b14c254
commit b14c254
Show file tree

Hide file tree

Showing 15 changed files with 409 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{js,ts,json}]
+indent_size = 2
+indent_style = space
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+  "extends": "eslint:recommended",
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2017
+  }
+};
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+ko_fi: lauwerens
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+web-ext-artifacts
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.format.enable": true,
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/L3L0BR8QG)
+
+# Video Seeking Everywhere
+_A [Firefox](https://addons.mozilla.org/en-US/firefox/addon/video-seeking-everywhere/) extension that allows you to seek through any playing video on most websites using the < or > keys._
+
+- Use <kbd><</kbd> or <kbd>,</kbd> to rewind with 5 seconds
+- Use <kbd>></kbd> or <kbd>.</kbd> to seek forward with 5 seconds
+
+🛠️ It's possible to change the amount of seconds using the Options page of this extension.
+
+## Development
+Please feel free to contribute by sending a Pull Request.
+
+### Dependencies
+You can either use `npm` or `pnpm` with the commands below or run `web-ext` directly:
+
+### Running the extension
+`pnpx web-ext run`
+
+### Building
+`pnpx web-ext build`
+
+## Reference
+See https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/ for information about the `web-ext` command.
diff --git a/browser-polyfill.min.js b/browser-polyfill.min.js
diff --git a/contentscript.js b/contentscript.js
@@ -0,0 +1,35 @@
+;
+(function () {
+  const settings = {
+    rewindSec: 5,
+    seekForwardSec: 5
+  }
+
+  function onError(error) {
+    console.warn(`Could not load settings for Video Seeking Everywhere, falling back to defaults...`, error);
+    inject();
+  }
+
+  function onGot(item) {
+    if (item.rewindSec > 0) {
+      settings.rewindSec = item.rewindSec;
+    }
+    if (item.seekForwardSec > 0) {
+      settings.seekForwardSec = item.seekForwardSec;
+    }
+    inject()
+  }
+
+  let getting = browser.storage.sync.get();
+  getting.then(onGot, onError);
+
+  // Inject the script to the page:
+  function inject() {
+    var s = document.createElement('script');
+    s.src = chrome.runtime.getURL('video-seeking-everywhere.js?') + new URLSearchParams(settings);
+    s.onload = function () {
+      this.remove();
+    };
+    (document.head || document.documentElement).appendChild(s);
+  }
+})()
diff --git a/icons/128.png b/icons/128.png
diff --git a/icons/video-seeking-everywhere.svg b/icons/video-seeking-everywhere.svg
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,45 @@
+{
+  "manifest_version": 3,
+  "name": "Video Seeking Everywhere",
+  "version": "1.0.0",
+  "description": "Allows you to seek through any playing video on most websites using the < or > keys.",
+  "icons": {
+    "48": "icons/128.png"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "http://*/*",
+        "https://*/*"
+      ],
+      "js": [
+        "browser-polyfill.min.js",
+        "contentscript.js"
+      ]
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "video-seeking-everywhere.js"
+      ],
+      "matches": [
+        "http://*/*",
+        "https://*/*"
+      ]
+    }
+  ],
+  "permissions": [
+    "storage"
+  ],
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "@video-seeking-everywhere",
+      "strict_min_version": "109.0"
+    }
+  }
+}
diff --git a/options.html b/options.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Options for Video Seeking Everywhere</title>
+
+  <link rel="icon" href="./icons/video-seeking-everywhere.svg">
+  <link rel="stylesheet" href="./options/options.css">
+  <script type="application/javascript" src="browser-polyfill.min.js"></script>
+  <script src="./options/options.js" defer></script>
+</head>
+
+<body>
+  <div class="wrapper">
+    <fieldset>
+      <legend>
+        <h1 style="display: flex; align-items: center; gap: 1em;">
+          <img style="width: 2em; height: 2em;" src="./icons/video-seeking-everywhere.svg" alt="">
+          Options for Video Seeking Everywhere
+        </h1>
+      </legend>
+
+      <p>
+        Allows you to seek through any playing video on most websites using the <kbd>&lt;</kbd><kbd>&gt;</kbd> keys.
+      </p>
+
+      <p>
+        Use <kbd>&lt;</kbd> (or <kbd>,</kbd>) to rewind with <span data-rewind-sec>5</span> seconds<br>
+        Use <kbd>&gt;</kbd> (or <kbd>.</kbd>) to seek forward with <span data-forward-sec>5</span> seconds
+      </p>
+
+      <p>
+        You can change the amount of seconds to rewind or seek forward.
+      </p>
+
+      <form action="options.html" method="post">
+        <label for="rewind-seconds">Rewind Seconds
+          <input type="number" name="rewind-seconds" id="rewind-seconds" value="5" min="1">
+        </label>
+
+        <label for="forward-seconds">Forward Seconds
+          <input type="number" name="forward-seconds" id="forward-seconds" value="5" min="1">
+        </label>
+
+        <button type="reset" id="reset">Reset to defaults</button>
+        <button type="submit" id="save">Save</button>
+      </form>
+    </fieldset>
+
+    <div class="footer">
+      <a href="https://github.com/laurens94/video-seeking-everywhere" target="_blank" rel="noopener noreferrer">👨‍💻
+        Source Code</a>
+      <a href="https://github.com/laurens94/video-seeking-everywhere/issues/new" target="_blank"
+        rel="noopener noreferrer"><span>🐛 Report issue</span> &nbsp; <span>✨ Request feature</span></a>
+      <a href="https://ko-fi.com/lauwerens" target="_blank" rel="noopener noreferrer">☕ Buy me a coffee 🫶</a>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/options/options.css b/options/options.css
@@ -0,0 +1,99 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: sans-serif;
+  line-height: 1.5;
+}
+
+.wrapper {
+  max-width: 46rem;
+  margin: 2.5em auto;
+}
+
+p {
+  margin: .5em 0 2em;
+}
+
+.footer {
+  margin-top: 1em;
+  text-align: center;
+  display: flex;
+  justify-content: space-around;
+}
+
+kbd {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-radius: 0.5em;
+  padding: 0.2em 0.5em;
+  font-size: 0.9em;
+  font-family: monospace;
+  margin: 0 0.2em;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+}
+
+a {
+  text-decoration: none;
+  padding: .5em;
+  display: inline-block;
+  color: rgb(108, 128, 144);
+  border-radius: 0.5em;
+}
+
+a span {
+  white-space: nowrap;
+}
+
+a:hover {
+  background-color: black;
+  color: white;
+}
+
+fieldset {
+  border: 1px solid #ccc;
+  padding: 1em;
+  border-radius: 0.5em;
+}
+
+form {
+  display: grid;
+  flex-wrap: wrap;
+  gap: 2.5em;
+  justify-content: space-between;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+label {
+  font-weight: bold;
+  grid-column: span 1;
+}
+
+input {
+  display: block;
+  padding: 0.5em;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 0.5em;
+  font-size: 1.2em;
+}
+
+button {
+  grid-column: span 1;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  border-radius: 0.5em;
+}
+
+button#save {
+  color: white;
+  background-color: rgb(51, 51, 51);
+}
+
+button#save:hover {
+  background-color: black;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# These are supported funding model platforms

		ko_fi: lauwerens