initial

LICENSE

@@ -0,0 +1,6 @@
+ CC BY-NC-SA 4.0 Deed
+Attribution-NonCommercial-ShareAlike 4.0 International 
+
+https://creativecommons.org/licenses/by-nc-sa/4.0/
+
+Full text is available at: https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode.en

README.md

@@ -0,0 +1,20 @@
+# Hop the Fence!
+
+An easy to use, fully customizable and privacy first web page simplifier!
+
+## What is HTF?
+
+HTF (Hop the Fence) is a simple extension that makes it easy to use services like 1ft.io, 12ft.io and self hosted services like Ladder and 13ft.
+
+## What HTF isn't
+
+HTF is NOT a way to bypass restrictions or paywalls or anything illegal.
+Users should always ensure that they are allowed to access the services and the pages.
+
+## How to use HTF
+
+By default, HTF uses 12ft.io . You can click on the extension button and configure your own instance or your favorite provider in the options section.
+
+## Note
+
+HTF uses localStorage and the active tab url. Nothing is sent over to any server.

icons/LICENSE

@@ -0,0 +1 @@
+These icons are taken from https://www.flaticon.com/free-icons/entrance by Rean-me

manifest.json

@@ -0,0 +1,19 @@
+{
+  "manifest_version": 2,
+  "name": "HopTheFence",
+  "version": "1.0",
+
+  "description": "Hop the fence! Access ladder services such as 12ft.io, 1ft.io and self hosted alternatives (Ladder & 13ft for example) with a button!",
+
+  "icons": {
+    "512": "icons/dd.png"
+  },
+
+  "permissions": ["activeTab", "tabs"],
+
+  "browser_action": {
+    "default_icon": "icons/dd.png",
+    "default_title": "Hop The Fence!",
+    "default_popup": "popup/ui.html"
+  }
+}

popup/options.css

@@ -0,0 +1,112 @@
+/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
+/* Animations */
+@-webkit-keyframes bg-scrolling-reverse {
+    100% {
+      background-position: 50px 50px;
+    }
+  }
+  @-moz-keyframes bg-scrolling-reverse {
+    100% {
+      background-position: 50px 50px;
+    }
+  }
+  @-o-keyframes bg-scrolling-reverse {
+    100% {
+      background-position: 50px 50px;
+    }
+  }
+  @keyframes bg-scrolling-reverse {
+    100% {
+      background-position: 50px 50px;
+    }
+  }
+  @-webkit-keyframes bg-scrolling {
+    0% {
+      background-position: 50px 50px;
+    }
+  }
+  @-moz-keyframes bg-scrolling {
+    0% {
+      background-position: 50px 50px;
+    }
+  }
+  @-o-keyframes bg-scrolling {
+    0% {
+      background-position: 50px 50px;
+    }
+  }
+  @keyframes bg-scrolling {
+    0% {
+      background-position: 50px 50px;
+    }
+  }
+
+
+
+body {
+    font-family: sans-serif;
+    font-size: 1.15em;
+    background-color: #fff;
+    color: #000;
+
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
+  -webkit-animation: bg-scrolling-reverse 3s infinite;
+  /* Safari 4+ */
+  -moz-animation: bg-scrolling-reverse 3s infinite;
+  /* Fx 5+ */
+  -o-animation: bg-scrolling-reverse 3s infinite;
+  /* Opera 12+ */
+  animation: bg-scrolling-reverse 3s infinite;
+  /* IE 10+ */
+  -webkit-animation-timing-function: ease-in-out;
+  -moz-animation-timing-function: ease-in-out;
+  -o-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+}
+
+
+.card {
+    margin: 5px;
+    padding: 10px;
+    border: solid 1px #ccc;
+    border-radius: 25px;
+    width: fit-content;
+}
+
+.centered {
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: 1.25em !important;
+}
+
+.sameline {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+input {
+    margin: 5px;
+    padding: 5px;
+    border-radius: 5px;
+    border: solid 1px #ccc;
+
+}
+
+button {
+    border: solid 1px #ccc;
+    background-color: #fff;
+    color: #000;
+    font-size: 1.15em;
+    padding: 5px;
+    margin: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.label {
+    color: rgb(138, 8, 8);
+    font-style: italic;
+}

popup/options.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="options.css">
+    </head>
+<body>
+
+<h1>Hop the Fence!</h1>
+<h2>Options</h2>
+<div class="centered">
+    <br><hr><br>
+    <p>Please do not use this extension for illegal purpose. Is just a simplifier of many webpages.</p>
+    <br><hr><br>
+</div>
+
+
+<div class="card">
+    <div class="sameliner">
+        <input id="provider">
+        <button id="provider-button">Set provider</button>
+
+        <p class="label">Actual Provider</p>
+        <p id="actual-provider">Loading...</p>
+    </div>
+</div>
+
+<div class="card">
+    <p class="label">You can either keep the fallback provider or use your own instance of Ladder or 13ft. You can also use 12ft.io and 1ft directly.</p>
+    <p class="label">The fallback provider is 12ft.io</p>
+    <p class="label"><a href="https://12ft.io/">12ft Home Page</a></p>
+    <p class="label">The following services are supported (both self hosted or cloud hosted)</p>
+    <p class="label"><a href="https://github.com/everywall/ladder">Ladder GitHub</a></p>
+    <p class="label"><a href="https://github.com/SomeAspy/13ft">13ft GitHub</a>
+    <p class="label"><a href="https://1ft.io/">1ft Home Page</a></p>
+    <p class="label">If you want to use your own instance, please set the provider in the input above.</p>
+    <p class="label">In general, this extension works on every service that use the same syntax as the above ones.</p>
+</div>
+
+</body>
+
+<script type="text/javascript" src="options.js"></script>
+</html>

popup/options.js

@@ -0,0 +1,27 @@
+// GUI elements
+
+let actualProvider = document.getElementById('actual-provider');
+
+let inputProvider = document.getElementById('provider');
+let inputProviderButton = document.getElementById('provider-button');
+
+// Listeners
+inputProviderButton.addEventListener('click', () => {
+    let provider = inputProvider.value;
+    if (provider) {
+        actualProvider.innerText = provider;
+        window.localStorage.setItem('ladderProvider', provider);
+    }
+});
+
+// Main function
+async function ui() {
+    let provider = window.localStorage.getItem('ladderProvider');
+    if (provider) {
+        actualProvider.innerText = provider;
+    } else {
+        actualProvider.innerText = 'Fallback (https://12ft.io/)';
+    }
+}
+
+ui()

popup/ui.css

@@ -0,0 +1,37 @@
+body {
+    font-family: sans-serif;
+    font-size: 1.15em;
+    color: #000;
+    background-image: url("assets/fence.jpeg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.popup {
+    background-color: #ffffff00;
+    border: solid 1px #cccccc5f;
+    border-radius: 25px;
+    width: fit-content;
+    padding: 10px;
+    margin: 5px;
+}
+
+button {
+    border: solid 1px #ccc;
+    background-color: #ffffffb7;
+    color: #000;
+    font-size: 1.15em;
+    padding: 5px;
+    margin: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+
+.dim {
+    background-color: #ffffff9a;
+    width: fit-content;
+    padding: 10px;
+    margin: 5px;
+}

popup/ui.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="ui.css" />
+  </head>
+
+  <body>
+    <div class="popup" id="ui-content">
+      <button id="config-button">Configuration</button>
+      <button id="ladderize-button">Ladderize this!</button>
+    </div>
+
+    <div class="dim">
+      <p>This extension is made for legitimate use only.</p>
+    </div>
+    <script src="ui.js"></script>
+  </body>
+</html>

popup/ui.js

@@ -0,0 +1,65 @@
+// GUI Stuff
+let configButton = document.getElementById('config-button');
+let ladderizeButton = document.getElementById('ladderize-button');
+
+// Listeners
+
+configButton.addEventListener('click', function() {
+    chrome.tabs.create({url: "options.html"});
+})
+
+ladderizeButton.addEventListener('click', function() {
+    ladderize()
+})
+
+// Main function
+async function ui() {
+    let currentURL = window.location.href
+    console.log("Here we are: " + currentURL)
+}
+
+
+// Ladderize
+async function ladderize() {
+
+    const fallbackProvider = "https://12ft.io/"
+    var ladderProvider = null
+
+    // Supporting user configurations
+    try {
+        ladderProvider = window.localStorage.getItem("ladderProvider")
+    } catch (error) {
+        ladderProvider = null
+    }
+    // Also managing the "" case so I dont have to test it manually
+    if (ladderProvider=="") {
+        ladderProvider = null
+    }
+
+    console.log("Provisory provider: ")
+    console.log(ladderProvider)
+
+    // Fallback management
+    if (!ladderProvider) {
+        ladderProvider = fallbackProvider
+    }
+
+    console.log("Ladder provider: ")
+    console.log(ladderProvider)
+
+    // Adding the "/" if not present
+    if ( !ladderProvider.endsWith("/") ) {
+        ladderProvider = ladderProvider + "/"
+        console.log("Fixed ladderProvider for you")
+    }
+    'use strict';
+    let allTabs = await browser.tabs.query({currentWindow: true, active: true})
+    console.log(allTabs)
+    let currentTab = allTabs[0]
+    let currentURL = currentTab.url
+
+    let ladderURL = ladderProvider + currentURL
+    window.open(ladderURL, '_blank');
+}
+
+ui()