Merge branch 'upgrade-version-2.1.3' into 'master'

Upgrade version 2.1.3 See merge request mickie1/share-freedom-extension!1
2021-01-08 15:59:09 +00:00 · 2021-01-08 15:59:09 +00:00 · 674efba41d
parent 134be1e88f 6fb57fcd86
commit 674efba41d
25 changed files with 579 additions and 2826 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
 web-ext-artifacts
 web-ext-artifacts.*
 src.*
+*.org
--- a/README.md
+++ b/README.md
@ -1,8 +1,9 @@
-# ![](/img/icon64.png) Share freedom - Firefox addon
+# ![img](/img/logo.png) Share Freedom - browser extension

-Share the current tab on the fediverse.
+Share the current tab on the [fediverse](https://fediverse.party/).
+
+[![Firefox Add-on](/img/badge-amo.png)](https://addons.mozilla.org/en-US/firefox/addon/share-freedom/) 

-[Get the extension](https://addons.mozilla.org/en-US/firefox/addon/share-freedom/) (require Firefox 57+)

 ## Features

@ -19,29 +20,32 @@ Supported services/protocols:
 - Pleroma
 - Osada / Zap / Zot6
 - XMPP
- Nextcloud

-## Screenshot

-![](/img/captura.png)
+## Screenshots

-## Notes
+![img](/img/screenshot_1.png)
+![img](/img/screenshot_2.png)

- This add-on is a fork of [URL-sharer](https://github.com/shivarajnaidu/URL-sharer) (for centralized/privative social
-networks) by shivarajnaidu.

 ## Build

-Run on project root directory
+You need Node.js/npm to use the command line tool web-ext

-```bash
-npm install
-gulp
-```
+`npm install --global web-ext`

-## Hint to settings
+then, use the next command to generate the package (.zip file)
+
+`web-ext build`
+
+See [web-ext page](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/).
+
+**Optional:** Add-ons Linter by Mozilla
+
+`npm install -g addons-linter`
+
+See [repo](https://github.com/mozilla/addons-linter).

-In order to work properly, this addon requires that you specify the nodes (=servers) on which you are registered. This is due to the federation of the networks. You can do it on the settings page of the addon, found at **about:addons** in your firefox browser.

 ## Contributing

@ -50,29 +54,36 @@ You can contribute in the following ways:
 -   Finding and reporting bugs
 -   Contributing code to the project by fixing bugs or implementing features

+
 ### Bug reports

 Bug reports and feature suggestions can be submitted to [Gitlab Issues](https://gitlab.com/mickie1/share-freedom-extension/issues). Please make sure that you are not submitting duplicates, and that a similar report or request has not already been resolved or rejected in the past using the search function. Please also use descriptive, concise titles.

-### Pull requests
+
+### Pull request

 Please use clean, concise titles for your pull requests.

+
 ## Invite an ice cream

-You can collaborate with some __criptocurrencies__ for the project :)
+You can collaborate with __donations__ for the project :)

 __faircoins:__ fVXruVLErxawnKAchcfbMQXya8YYYPvaZN

 __Bitcoins:__ 15Y9cBeGhGmVGZxFQvQCsQhcCvxgzvKmcR

-![](/img/helado.png)
+__Liberapay__ https://liberapay.com/mickie/
+
+![](/img/ice-cream.png)
 [CC-BY 4.0 by Vincent Le Moign](https://commons.wikimedia.org/wiki/File:552-soft-ice-cream-2.svg)

+
 ## License

-This Program is Licensed under GPL v3
+This program is licensed under GPL v3

-Copyleft (ɔ) 2019 - Miguel (mickie)
+Copyleft (ɔ) 2021 - Miguel (mickie)

 See LICENSE file for more information.
+
--- a/css/sharer.css
+++ b/css/sharer.css
@ -1,19 +1,23 @@
+/*by Kim*/
+
 /* Button Style 1 (Left Icons) */
 html,
 body {
-   width:540px;
+   width: auto;
   height: auto;
 }

+
 .btns-container{
    height:auto;
-    background:#f5f5f5;
-    float:left;
+    width: auto;
+    float:right;
+    padding: 5px 5px 5px 1px;
 }

 .btns-container a{
-    float:left;
-    margin:10px;
+    float:right;
+    margin:2px;
 }

 .btns-container a:hover{
@ -166,3 +170,61 @@ a.btn-grey, a.btn-grey:hover{
  justify-content:center;
  align-items:center;
 }
+
+.flex {
+    float: relative;
+    display: flex;
+    flex-direction: row;
+}
+
+.options-container {
+    display: flex;
+    flex: initial;
+    flex-direction: row;
+    float: left;
+    cursor: pointer;
+    color: #7d7d7d;
+}
+
+.btn-options {
+    font-size: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+label {
+    display: block;
+    color: #ffffff;
+    padding: 3px;
+    margin: 5px;
+}
+
+button {
+    margin: 15px;
+    padding: 3px;
+    border: none;
+    border-radius: 5px;
+    width: 190px;
+    height: 35px;
+    text-align: center;
+    background-color: #3455b8;
+    color: #ffffff;
+    font-size: 19px;
+}
+
+button:hover {
+    background-color: #3a5fcd;
+}
+
+button:active {
+    background-color: #22397b;
+}
+
+h2 {
+    color: #ffffff;
+}
+
+.credits {
+    color: #ffffff;
+}
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,53 +0,0 @@
-'use strict';
-const gulp = require('gulp');
-const concat = require('gulp-concat');
-const cleanCSS = require('gulp-clean-css');
-const htmlReplace = require('gulp-html-replace');
-const htmlmin = require('gulp-htmlmin');
-const uglify = require('gulp-uglify-es').default;
-const rename = require('gulp-rename');
-
-gulp.task('scripts', () => {
-    return gulp.src('js/*.js')
-        .pipe(concat('app.js'))
-        .pipe(uglify())
-        .pipe(rename('app.min.js'))
-        .pipe(gulp.dest('build/js'));
-});
-
-gulp.task('styles', () => {
-    return gulp.src('css/*.css')
-        .pipe(concat('app.css'))
-        .pipe(cleanCSS())
-        .pipe(rename('app.min.css'))
-        .pipe(gulp.dest('build/css/'))
-});
-
-gulp.task('html', () => {
-    return gulp.src('index.html')
-        .pipe(htmlmin({ collapseWhitespace: true }))
-        .pipe(htmlReplace({
-            'styles': 'css/app.min.css',
-            'scripts': 'js/app.min.js'
-        }))
-        .pipe(gulp.dest('build'))
-});
-
-gulp.task('fonts', () => {
-    return gulp.src('fonts/*')
-        .pipe(gulp.dest('build/fonts'))
-});
-
-gulp.task('icons', () => {
-    return gulp.src('icons/*')
-        .pipe(gulp.dest('build/icons'))
-});
-
-gulp.task('manifest', () => {
-    return gulp.src('./manifest.json')
-        .pipe(gulp.dest('build'))
-});
-
-gulp.task('copy', ['fonts', 'icons', 'manifest']);
-
-gulp.task('default', ['scripts', 'styles', 'html', 'copy']);
--- a/html/index.html
+++ b/html/index.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <base target="_blank" />
+    <title>Share freedom</title>
+    <link rel="stylesheet" href="../css/bootstrap.css">
+    <link rel="stylesheet" href="../css/fork-awesome.css">
+    <link href="../css/style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="flex">
+      <div class="btns-container">
+	<div>
+	  <a target="_blank" class="btn btn-gnusocial" id="url-gnusocial" title="Share on GNU Social" hidden>
+            <span class="btn-gradient">
+              <i class="fa fa-gnu-social"></i>
+            </span>
+            <span class="btn-text">GnuSocial</span>
+	  </a>
+	  
+	  <a target="_blank" class="btn btn-mastodon" id="url-mastodon" title="Share on Mastodon" hidden>
+            <span class="btn-gradient">
+              <i class="fa fa-mastodon"></i>
+            </span>
+            <span class="btn-text">Mastodon</span>
+	  </a>
+
+	  <a target="_blank" class="btn btn-pleroma" id="url-pleroma" title="Share on Pleroma" hidden>
+	    <span class="btn-gradient">
+	      <i class="fa fa-pleroma"></i>
+	    </span>
+	    <span class="btn-text">Pleroma</span>
+	  </a>
+	  
+	  <a target="_blank" class="btn btn-hubzilla" id="url-hubzilla" title="Share on Hubzilla" hidden>
+            <span class="btn-gradient">
+              <i class="fa fa-hubzilla"></i>
+            </span>
+            <span class="btn-text">Hubzilla</span>
+	  </a>
+	  
+	  <a target="_blank" class="btn btn-diaspora" id="url-diaspora" title="Share on Diaspora" hidden>
+            <span class="btn-gradient">
+              <i class="fa fa-diaspora"></i>
+            </span>
+            <span class="btn-text">Diaspora</span>
+	  </a>
+
+	  <a target="_blank" class="btn btn-friendica" id="url-friendica" title="Share on Friendica" hidden>
+            <span class="btn-gradient">
+              <i class="fa fa-friendica"></i>
+            </span>
+            <span class="btn-text">Friendica</span>
+	  </a>
+	  
+	  <a target="_blank" class="btn btn-lemmy" id="url-lemmy" title="Share on Lemmy" hidden>
+            <span class="btn-gradient">
+              <i class="fa fa-activitypub"></i>
+            </span>
+            <span class="btn-text">Lemmy</span>
+	  </a>
+	  
+	  <a target="_blank" class="btn btn-socialhome" id="url-socialhome" title="Share on SocialHome" hidden>
+            <span class="btn-gradient">
+              <i class="fa fa-social-home"></i>
+            </span>
+            <span class="btn-text">SocialHome</span>
+	  </a>
+	  
+	  <a target="_blank" class="btn btn-xmpp" id="url-xmpp" title="Share on Jabber" hidden>
+            <span class="btn-gradient">
+              <i class="fa fa-xmpp"></i>
+            </span>
+            <span class="btn-text">XMPP</span>
+	  </a>
+	</div>
+	
+      </div>
+      
+      <div class="options-container">
+	<a class="btn btn-options" id="options" target="_blank"><i class="fa fa-cog"></i></a>
+      </div>
+      
+    </div>
+    
+  </body>
+  <script src="../js/index.js" type="module"></script>
+  <script src="../js/background.js" type="module"></script>
+</html>
--- a/html/options.html
+++ b/html/options.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base target="_blank" />
+    <link rel="stylesheet" href="../css/bootstrap.css">
+    <link rel="stylesheet" href="../css/fork-awesome.css">
+    <link rel="stylesheet" href="../css/style.css">
+    <style>
+     body {
+	 background-image: url('../img/wallpaper.png');
+	 background-repeat: no-repeat;
+	 background-attachment: fixed;
+	 background-size: cover;
+     }
+    </style>
+  </head>
+
+  <body>
+    <div class="container-fluid py-3">
+      <div class="row">
+        <div class="col-8 text-left"><h2>Settings</h2></div>
+        <div class="col-4 text-right credits">Wallpaper by:
+	  <a href="https://fosstodon.org/@yarmo/101907879701964911">Yarmo</a>
+	</div>
+      </div>
+	<form>
+	  <label>Diaspora</label>
+	  <input type="text" id="diaspora-host" />
+	  <input type="checkbox" id="diaspora-check">
+	  <br />
+    <label>Friendica</label>
+    <input type="text" id="friendica-host" />
+    <input type="checkbox" id="friendica-check">
+    <br />
+    <label>GNU social</label>
+    <input type="text" id="gnusocial-host" />
+    <input type="checkbox" id="gnusocial-check">
+    <br />
+    <label>Hubzilla</label>
+    <input type="text" id="hubzilla-host" />
+    <input type="checkbox" id="hubzilla-check">
+    <br />
+    <label>Lemmy</label>
+    <input type="text" id="lemmy-host" />
+    <input type="checkbox" id="lemmy-check">
+    <br />
+    <label>Mastodon</label>
+    <input type="text" id="mastodon-host" />
+    <input type="checkbox" id="mastodon-check">
+    <br />
+    <label>Pleroma</label>
+    <input type="text" id="pleroma-host" />
+    <input type="checkbox" id="pleroma-check">
+    <br />
+    <label>Socialhome</label>
+    <input type="text" id="socialhome-host" />
+    <input type="checkbox" id="socialhome-check">
+    <br />
+    <label>XMPP</label>
+    <input type="text" id="xmpp-host" />
+    <input type="checkbox" id="xmpp-check">
+    <br />
+    <button type="submit">Save changes</button>
+	</form>
+  <script src="../js/options.js" type="module"></script>
+  <script src="../js/background.js" type="module"></script>
+</body>
+
+</html>
--- a/img/badge-amo.png
+++ b/img/badge-amo.png
--- a/img/captura.png
+++ b/img/captura.png
--- a/img/ice-cream.png
+++ b/img/ice-cream.png
--- a/img/icon-16-dark.png
+++ b/img/icon-16-dark.png
--- a/img/icon-32-dark.png
+++ b/img/icon-32-dark.png
--- a/img/icon64.png
+++ b/img/icon64.png
--- a/img/screenshot_1.png
+++ b/img/screenshot_1.png
--- a/img/screenshot_2.png
+++ b/img/screenshot_2.png
--- a/index.html
+++ b/index.html
@ -1,122 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <base target="_blank" />
-        <title>Fedishare</title>
-        <!-- build:styles -->
-        <link rel="stylesheet" href="css/bootstrap.css">
-        <link rel="stylesheet" href="css/fork-awesome.css">
-        <link rel="stylesheet" href="css/sharer.css">
-        <!-- endbuild -->
-        <!-- build:scripts -->
-        <script src="js/jquery.js"></script>
-        <script src="js/index.js"></script>
-        <!-- endbuild -->
-    </head>
-
-    <body>
-      <div class="container-fluid btns-container py-3">
-        <div class="row">
-          <div class="col-8 text-left"><img src="img/icon.png" class="img-fluid" alt="Fedishare"></div>
-          <div class="col-4 text-right">Share freedom v.2.1.1 [Beta]</div>
-        </div>
-        <hr>
-        <div class="row">
-          <div class="col-12">
-            <div class="alerta"></div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-6">
-           <a target="_blank" class="btn btn-gnusocial" id="url-gnusocial" title="Share on GnuSocial">
-              <span class="btn-gradient">
-                <i class="fa fa-gnu-social"></i>
-              </span>
-              <span class="btn-text">GnuSocial</span>
-           </a>
-          </div>
-          <div class="col-6">
-            <a target="_blank" class="btn btn-mastodon" id="url-mastodon" title="Share on Mastodon">
-               <span class="btn-gradient">
-                 <i class="fa fa-mastodon"></i>
-               </span>
-               <span class="btn-text">Mastodon</span>
-            </a>
-          </div>
-          <div class="col-6">
-          <a target="_blank" class="btn btn-pleroma" id="url-pleroma" title="Share on Pleroma">
-             <span class="btn-gradient">
-               <i class="fa fa-pleroma"></i>
-             </span>
-             <span class="btn-text">Pleroma</span>
-          </a>
-        </div>
-        <div class="col-6">
-          <a target="_blank" class="btn btn-hubzilla" id="url-hubzilla" title="Share on Hubzilla">
-             <span class="btn-gradient">
-               <i class="fa fa-hubzilla"></i>
-             </span>
-             <span class="btn-text">Hubzilla</span>
-          </a>
-        </div>
-        <div class="col-6">
-          <a target="_blank" class="btn btn-diaspora" id="url-diaspora" title="Share on Diaspora">
-             <span class="btn-gradient">
-               <i class="fa fa-diaspora"></i>
-             </span>
-             <span class="btn-text">Diaspora</span>
-          </a>
-        </div>
-        <div class="col-6">
-          <a target="_blank" class="btn btn-friendica" id="url-friendica" title="Share on Friendica">
-             <span class="btn-gradient">
-               <i class="fa fa-friendica"></i>
-             </span>
-             <span class="btn-text">Friendica</span>
-          </a>
-        </div>
-        <div class="col-6">
-          <a target="_blank" class="btn btn-lemmy" id="url-lemmy" title="Share on Lemmy">
-             <span class="btn-gradient">
-               <i class="fa fa-activitypub"></i>
-             </span>
-             <span class="btn-text">Lemmy</span>
-          </a>
-        </div>
-        <div class="col-6">
-          <a target="_blank" class="btn btn-socialhome" id="url-socialhome" title="Share on SocialHome">
-             <span class="btn-gradient">
-               <i class="fa fa-social-home"></i>
-             </span>
-             <span class="btn-text">SocialHome</span>
-          </a>
-        </div>
-        <div class="col-6">
-          <a target="_blank" class="btn btn-xmpp" id="url-xmpp" title="Share on Jabber">
-             <span class="btn-gradient">
-               <i class="fa fa-xmpp"></i>
-             </span>
-             <span class="btn-text">Xmpp</span>
-          </a>
-        </div>
-        <div class="col-6">
-          <a target="_blank" class="btn btn-nextcloud" id="url-nextcloud" title="Share bookmark on Nextcloud">
-             <span class="btn-gradient">
-               <i class="fa fa-nextcloud"></i>
-             </span>
-             <span class="btn-text">Nextcloud</span>
-          </a>
-        </div>
-        <hr>
-        <div class="col-12 mx-auto">
-          <a class="btn-grey" href="https://gitlab.com/mickie1/share-freedom-extension" target="_blank"><i class="fa fa-info-circle"></i> Info</a>
-          <a class="btn-grey" href="options.html" target="_blank"><i class="fa fa-cog"></i> Settings</a>
-        </div>
-        </div>
-        </div>
-    </body>
-
-</html>
--- a/js/apiRequest.js
+++ b/js/apiRequest.js
@ -1,48 +0,0 @@
-/**
-* Basic wrapper method for api calls to a nextcloud instance.
-*
-* @param {string} endpoint Full URL
-* @param {string} method GET|POST
-* @param {mixed} data Payload
-* @param {string} username
-* @param {string} password
-* @returns {Promise}
-*/
-function apiRequest(endpoint, method, data, username, password) {
-    const headers = new Headers();
-    headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
-    headers.append('Accept', 'application/json, text/plain, */*');
-    const opts = { method, headers, credentials: 'omit' };
-
-    if (method.toLowerCase() !== 'get') {
-        headers.append('Content-Type','application/json;charset=UTF-8');
-        opts.body = JSON.stringify(data);
-    }
-
-    const request = new Request(endpoint, opts);
-
-    return new Promise((resolve, reject) => {
-        fetch(request).then(response => {
-            if (response.status !== 200) {
-                reject(response);
-                return;
-            }
-
-            const contentType = response.headers.get('content-type');
-            if (contentType && contentType.indexOf('application/json') !== -1) {
-                response.json().then(json => {
-                    if (!json) {
-                        reject({ statusText: 'Empty reply from server', status: 0 });
-                        return;
-                    }
-
-                    resolve(json);
-                });
-            } else {
-                reject({ statusText: 'Invalid reply from server', status: 0 });
-            }
-        }).catch(function (e) {
-            reject({ statusText: e, status: 0 });
-        });
-    });
-} 
--- a/js/background.js
+++ b/js/background.js
@ -0,0 +1,17 @@
+const host = {
+  diasporaDefault: `https://joindiaspora.com`,
+  friendicaDefault: `https://libranet.de`,
+  gnusocialDefault: `https://gnusocial.net`,
+  hubzillaDefault: `https://demo.hubzilla.org`,
+  lemmyDefault: `https://dev.lemmy.ml`,
+  mastodonDefault: `https://mastodon.social`,
+  pleromaDefault: `https://blob.cat`,
+  socialhomeDefault: `https://socialhome.network`,
+  xmppDefault: `https://suchat.org`,
+
+  // shortcut command
+  shortcutDefault: `Ctrl+Shift+U`,
+}
+
+
+export {host}
--- a/js/index.js
+++ b/js/index.js
@ -1,8 +1,6 @@
 /*
-  Original by yuvaraj
-  Copyright (c) 2016
-  Forked by Mickie
-  Copyleft (ɔ) 2019
+    Copyleft (ɔ) 2021  Mickie
+
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
@ -14,247 +12,137 @@
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

-;
-(function () {
-    'use strict';
+import {host} from './background.js'

-    // Send Message To Background Script

-    function sendMessage(tab) {
-	const { id } = tab;
-	browser.runtime.sendMessage({
-	    type: 'sharer-tab-id',
-	    data: { id }
-	});
-    }
+window.onload = () => {
  
  /*
-     * Assign URLs To Respective Element
+   * Assign and get URLs To Respective Element
   */
-    function urlAssigner(btn = {}) {
-	const { id, href } = btn;
-	const a = document.getElementById(id);
-	a.href = href;
-	a.target = '_blank';
-	a.addEventListener('click', event => {
-	    console.log(id);
-	    if(id == 'url-nextcloud') {
-		event.preventDefault();
-		sendNextcloudBookmark();
-	    }
-	    //window.setTimeout(() => window.close(), 10)
-	});
-    }
  
-    function sendNextcloudBookmark(tabUrl) {
-
-	$.support.cors = true;
-
-	console.log('Sending...');
-
-	var server     = $('#url-nextcloud').attr('data-server');
-	var username   = $('#url-nextcloud').attr('data-username');
-	var password   = $('#url-nextcloud').attr('data-password');
-	var endpoint   = server + '/index.php/apps/bookmarks/public/rest/v2/bookmark';
-	var tabUrL     = $('#url-nextcloud').attr('data-url');
-	var tabTitle   = $('#url-nextcloud').attr('data-title');
-
-	console.log(server);
-	console.log(username,password);
-	console.log(tabUrL,tabTitle);
-
-	$.ajax({
-	    url: endpoint,
-	    method: "POST",
-	    //basic authentication
-	    beforeSend: function (xhr) {
-		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
-	    },
-	    data: {
-		url: tabUrL,
-		title: tabTitle,
-		description: '',
-		is_public: true
-	    },
-	    dataType: 'json',
+  const urlAssigner = (btn = {}) => {
+    const { id, href } = btn
+    const a = document.getElementById(id)
+    a.href = href
+    a.target = '_blank'
+    a.addEventListener('click', e => {
+      window.setTimeout(() => window.close(), 10)
    })
-	    .success(function(result) {
-		console.log(result);
-		$('.alerta').html('<div class="alert alert-info">Successfully bookmarked!</div>');
-	    })
-	    .error(function(XMLHttpRequest, status, errorThrown){
-		$('.alerta').html('<div class="alert alert-danger">Error, something was wrong!</div>');
-		console.log('ajax error');
-		console.log("Status: " + status);
-		console.log("Error: " + errorThrown);
-	    });
  }

+  (function getCurrentTabUrl() {
+    const queryInfo = {
+      active: true,
+      currentWindow: true,
+    }
+
+    chrome.tabs.query(queryInfo, (tabs = []) => {
+      if (tabs.length === 0) {
+	return
+      }
+
+      const tab = (tabs[0] || {});
+      const tabUrL = encodeURIComponent(tab.url)
+      const tabTitle = encodeURIComponent(tab.title)
+      mkBtns(tabUrL, tabTitle)
+    })
+  })()
+
+  
  /*
   * Make Social Button Objects
   */

-    function mkBtns(tabUrl = '', tabTitle = '') {
+  const  mkBtns = (tabUrl = '', tabTitle = '') => {

-	// Set hosts
+    // Set post items

-	var gnusocialItem = browser.storage.sync.get('gnusocialHost');
-	gnusocialItem.then((res) => {
-	    document.querySelector("#url-gnusocial").href = [res.gnusocialHost || `https://gnusocial.no`] + `/?action=newnotice&status_textarea=${tabTitle} ${tabUrl}`;
-	});
-
-	var mastodonItem = browser.storage.sync.get('mastodonHost');
-	mastodonItem.then((res) => {
-	    document.querySelector("#url-mastodon").href = [res.mastodonHost || `https://mastodon.social`] + `/share?text=${tabTitle}&url=${tabUrl}`;
-	});
-
-	var hubzillaItem = browser.storage.sync.get('hubzillaHost');
-	hubzillaItem.then((res) => {
-	    document.querySelector("#url-hubzilla").href = [res.hubzillaHost || `https://start.hubzilla.org`] + `/rpost?body=${tabTitle} &url=${tabUrl}`;
-	});
-
-	var diasporaItem = browser.storage.sync.get('diasporaHost');
-	diasporaItem.then((res) => {
-	    document.querySelector("#url-diaspora").href = [res.diasporaHost || `https://diasp.eu`] + `/bookmarklet?url=${tabUrl}&title=${tabTitle}&jump-doclose`;
-	});
-
-	var friendicaItem = browser.storage.sync.get('friendicaHost');
-	friendicaItem.then((res) => {
-	    document.querySelector("#url-friendica").href = [res.friendicaHost || `https://libranet.de`] + `/bookmarklet?url=${tabUrl}&title=${tabTitle}&jump-doclose`;
-	});
-
-	var socialhomeItem = browser.storage.sync.get('socialhomeHost');
-	socialhomeItem.then((res) => {
-	    document.querySelector("#url-socialhome").href = [res.socialhomeHost || `https://socialhome.network`] + `/bookmarklet?url=${tabUrl}&title=${tabTitle}&jump-doclose`;
-	});
-
-	var lemmyItem = browser.storage.sync.get('lemmyHost');
-	lemmyItem.then((res) => {
-	    document.querySelector("#url-lemmy").href = [res.lemmyHost || `https://dev.lemmy.ml`] + `/create_post?url=${tabUrl}&title=${tabTitle}`;
-	});
-
-	var pleromaItem = browser.storage.sync.get('pleromaHost');
-	pleromaItem.then((res) => {
-	    document.querySelector("#url-pleroma").href = [res.pleromaHost || `https://pleroma-social.ml`] + `/share?message=${tabTitle} ${tabUrl}`;
-	});
-
-	var xmppItem = browser.storage.sync.get('xmppHost');
-	xmppItem.then((res) => {
-	    document.querySelector("#url-xmpp").href = `xmpp:` + [res.xmppHost] + `?message=${tabTitle} ${tabUrl}`;
-	});
-
-	var nextcloudHost      = browser.storage.sync.get('nextcloudHost');
-	var nextcloudUsername  = browser.storage.sync.get('nextcloudUsername');
-	var nextcloudPassword  = browser.storage.sync.get('nextcloudPassword');
-	nextcloudHost.then((res) => {
-	    document.querySelector("#url-nextcloud").href = [res.nextcloudHost];
-	    document.querySelector("#url-nextcloud").dataset.server = [res.nextcloudHost];
-	    document.querySelector("#url-nextcloud").dataset.url = tabUrl;
-	    document.querySelector("#url-nextcloud").dataset.title = tabTitle;
-	});
-	nextcloudUsername.then((res) => {
-	    document.querySelector("#url-nextcloud").dataset.username = [res.nextcloudUsername];
-	});
-	nextcloudPassword.then((res) => {
-	    document.querySelector("#url-nextcloud").dataset.password = [res.nextcloudPassword];
-	});
+    const diasporaPost = `/bookmarklet?url=${tabUrl}&title=${tabTitle}&jump-doclose`
+    const friendicaPost = `/bookmarklet?url=${tabUrl}&title=${tabTitle}&jump-doclose`
+    const gnusocialPost = `/?action=newnotice&status_textarea=${tabTitle} ${tabUrl}`
+    const hubzillaPost = `/rpost?body=${tabTitle} &url=${tabUrl}`
+    const lemmyPost = `/create_post?url=${tabUrl}&title=${tabTitle}`
+    const mastodonPost = `/share?text=${tabTitle}&url=${tabUrl}`
+    const pleromaPost = `/share?message=${tabTitle} ${tabUrl}`
+    const socialhomePost = `/bookmarklet?url=${tabUrl}&title=${tabTitle}&jump-doclose`
+    const xmppPost = `?message=${tabTitle} ${tabUrl}`

    // Set social Buttons

-	const socialBtns = [];
+    const socialBtns = []

-	const gnusocial = {};
-	gnusocial.href = gnusocialItem;
-	gnusocial.id = 'url-gnusocial';
-	socialBtns.push(gnusocial);
+    const diaspora = {}
+    const friendica = {}
+    const gnusocial = {}
+    const hubzilla = {}
+    const lemmy = {}
+    const mastodon = {}
+    const pleroma = {}
+    const socialhome = {}
+    const xmpp = {}

-	const mastodon = {};
-	mastodon.href =  mastodonItem;
-	mastodon.id = 'url-mastodon';
-	socialBtns.push(mastodon);
-
-	const hubzilla = {};
-	hubzilla.href = hubzillaItem;
-	hubzilla.id = 'url-hubzilla';
-	socialBtns.push(hubzilla);
-
-	const diaspora = {};
-	diaspora.href = diasporaItem;
-	diaspora.id = 'url-diaspora';
-	socialBtns.push(diaspora);
-
-	const friendica = {};
-	friendica.href = friendicaItem;
-	friendica.id = 'url-friendica';
-	socialBtns.push(friendica);
-
-	const socialhome = {};
-	socialhome.href = socialhomeItem;
-	socialhome.id = 'url-socialhome';
-	socialBtns.push(socialhome);
-
-	const lemmy = {};
-	lemmy.href = lemmyItem;
-	lemmy.id = 'url-lemmy';
-	socialBtns.push(lemmy);
-
-	const pleroma = {};
-	pleroma.href = pleromaItem;
-	pleroma.id = 'url-pleroma';
-	socialBtns.push(pleroma);
-
-	const xmpp = {};
-	xmpp.href = xmppItem;
-	xmpp.id = 'url-xmpp';
-	socialBtns.push(xmpp);
-
-	const nextcloud = {};
-	nextcloud.href = nextcloudHost;
-	nextcloud.id = 'url-nextcloud';
-	socialBtns.push(nextcloud);
-
-	socialBtns.forEach(urlAssigner);
+    const itemBtn = (item, hostId, hostKey, hostDefault, hostPost) => {
+      let itemHost = browser.storage.sync.get(`${hostKey}`)
+      itemHost.then((res) => {
+	document.querySelector(`#${hostId}`)
+	  .href = [res[hostKey] || hostDefault] + hostPost
+      })
+      item.href = itemHost
+      item.id = hostId
+      socialBtns.push(item)
    }

-    ;
-    (function getCurrentTabUrl() {
-	const queryInfo = {
-	    active: true,
-	    currentWindow: true
-	};
+    itemBtn(diaspora, 'url-diaspora', 'diasporaHost', host.diasporaDefault, diasporaPost)
+    itemBtn(friendica, 'url-friendica', 'friendicaHost', host.friendicaDefault, friendicaPost)
+    itemBtn(gnusocial, 'url-gnusocial', 'gnusocialHost', host.gnusocialDefault, gnusocialPost)
+    itemBtn(hubzilla, 'url-hubzilla', 'hubzillaHost', host.hubzillaDefault, hubzillaPost)
+    itemBtn(lemmy, 'url-lemmy', 'lemmyHost', host.lemmyDefault, lemmyPost)
+    itemBtn(mastodon, 'url-mastodon', 'mastodonHost', host.mastodonDefault, mastodonPost)
+    itemBtn(pleroma, 'url-pleroma', 'pleromaHost', host.pleromaDefault, pleromaPost)
+    itemBtn(socialhome, 'url-socialhome', 'socialhomeHost', host.socialhomeDefault, socialhomePost)
+    itemBtn(xmpp, 'url-xmpp', 'xmppHost', host.xmppDefault, xmppPost)
    
-	chrome.tabs.query(queryInfo, (tabs = []) => {
-	    if (tabs.length === 0) {
-		return;
+    socialBtns.forEach(urlAssigner)
  }

-	    const tab = (tabs[0] || {});
-	    const tabUrL = encodeURIComponent(tab.url);
-	    const tabTitle = encodeURIComponent(tab.title);
-	    mkBtns(tabUrL, tabTitle);
-	});
-
-	// End
-    })();
-
-})();
  
  /*
- * Make Shortcut
+   * hide/show buttons
   */

-let gettingAllCommands = browser.commands.getAll();
-gettingAllCommands.then((commands) => {
-    for (let command of commands) {
-	console.log(command);
+  const enableItem = (hostKey, hostId) => {
+    const item = chrome.storage.sync.get(`${hostKey}`, value => {
+      if (value[hostKey]) {
+	document.getElementById(`${hostId}`).removeAttribute('hidden')
+      }
+    })
  }
-});

-browser.commands.onCommand.addListener(function(command) {
-    if (command == "_execute_browser_action") {
-	// console.log("execute the feature!");
+  enableItem('diasporaCheck', 'url-diaspora')
+  enableItem('friendicaCheck', 'url-friendica')
+  enableItem('gnusocialCheck', 'url-gnusocial')
+  enableItem('hubzillaCheck', 'url-hubzilla')
+  enableItem('lemmyCheck', 'url-lemmy')
+  enableItem('mastodonCheck', 'url-mastodon')
+  enableItem('pleromaCheck', 'url-pleroma')
+  enableItem('socialhomeCheck', 'url-socialhome')
+  enableItem('xmppCheck', 'url-xmpp')
+
+  
+  /*
+   * Open options page
+   */
+  
+  function openOptions() {
+    browser.runtime.openOptionsPage()
+  }
+
+  const el = document.getElementById('options')
+  el.addEventListener('click', function() {openOptions()}, false)
+
+  
 }
-});
--- a/js/jquery.js
+++ b/js/jquery.js
--- a/js/options.js
+++ b/js/options.js
@ -1,131 +1,105 @@
-function saveOptions(e) {
+import {host} from './background.js'
+
+
+const saveOptions = (e) => {
+  saveHost('diaspora-host', 'diasporaHost')
+  saveHost('friendica-host', 'friendicaHost')
+  saveHost('gnusocial-host', 'gnusocialHost')
+  saveHost('hubzilla-host', 'hubzillaHost')
+  saveHost('lemmy-host', 'lemmyHost')
+  saveHost('mastodon-host', 'mastodonHost')
+  saveHost('pleroma-host', 'pleromaHost')
+  saveHost('socialhome-host', 'socialhomeHost')
+  saveHost('xmpp-host', 'xmppHost')
+  
+  saveCheckbox('diaspora-check', 'diasporaCheck')
+  saveCheckbox('friendica-check', 'friendicaCheck')
+  saveCheckbox('gnusocial-check', 'gnusocialCheck')
+  saveCheckbox('hubzilla-check', 'hubzillaCheck')
+  saveCheckbox('lemmy-check', 'lemmyCheck')
+  saveCheckbox('mastodon-check', 'mastodonCheck')
+  saveCheckbox('pleroma-check', 'pleromaCheck')
+  saveCheckbox('socialhome-check', 'socialhomeCheck')
+  saveCheckbox('xmpp-check', 'xmppCheck')
+  
+  e.preventDefault()
+}
+
+
+const saveHost = (hostId, hostKey) => {
  browser.storage.sync.set({
-      gnusocialHost: document.querySelector("#gnusocialHost").value,
-      mastodonHost: document.querySelector("#mastodonHost").value,
-      pleromaHost: document.querySelector("#pleromaHost").value,
-      hubzillaHost: document.querySelector("#hubzillaHost").value,
-      diasporaHost: document.querySelector("#diasporaHost").value,
-      friendicaHost: document.querySelector("#friendicaHost").value,
-      lemmyHost: document.querySelector("#lemmyHost").value,
-      socialhomeHost: document.querySelector("#socialhomeHost").value,
-      xmppHost: document.querySelector("#xmppHost").value,
-      nextcloudHost: document.querySelector("#nextcloudHost").value,
-      nextcloudUsername: document.querySelector("#nextcloudUsername").value,
-      nextcloudPassword: document.querySelector("#nextcloudPassword").value,
-      shortcut: document.querySelector("#shortcut").value
-  });
-    e.preventDefault();
+    [hostKey] : document.querySelector(`#${hostId}`).value
+  })
 }

-function restoreOptions() {
-
-    var gettingGnusocial = browser.storage.sync.get('gnusocialHost');
-    gettingGnusocial.then((res) => {
-	document.querySelector("#gnusocialHost").value = res.gnusocialHost || 'https://gnusocial.no';
-    });
-
-    var gettingMastodon = browser.storage.sync.get('mastodonHost');
-    gettingMastodon.then((res) => {
-	document.querySelector("#mastodonHost").value = res.mastodonHost || 'https://mastodon.social';
-    });
-
-    var gettingPleroma = browser.storage.sync.get('pleromaHost');
-    gettingPleroma.then((res) => {
-	document.querySelector("#pleromaHost").value = res.pleromaHost || 'https://pleroma-social.ml';
-    });
-
-    var gettingHubzilla = browser.storage.sync.get('hubzillaHost');
-    gettingHubzilla.then((res) => {
-	document.querySelector("#hubzillaHost").value = res.hubzillaHost || 'https://start.hubzilla.org';
-    });
-
-    var gettingDiaspora = browser.storage.sync.get('diasporaHost');
-    gettingDiaspora.then((res) => {
-	document.querySelector("#diasporaHost").value = res.diasporaHost || 'https://diasp.eu';
-    });
-
-    var gettingFriendica = browser.storage.sync.get('friendicaHost');
-    gettingFriendica.then((res) => {
-	document.querySelector("#friendicaHost").value = res.friendicaHost || 'https://libranet.de';
-    });
-
-    var gettingLemmy = browser.storage.sync.get('lemmyHost');
-    gettingLemmy.then((res) => {
-	document.querySelector("#lemmyHost").value = res.lemmyHost || 'https://dev.lemmy.ml';
-    });
-
-    var gettingSocialhome = browser.storage.sync.get('socialhomeHost');
-    gettingSocialhome.then((res) => {
-	document.querySelector("#socialhomeHost").value = res.socialhomeHost || 'https://socialhome.network';
-    });
-
-    var gettingXmpp = browser.storage.sync.get('xmppHost');
-    gettingXmpp.then((res) => {
-    document.querySelector("#xmppHost").value = res.xmppHost || 'https://suchat.org';
-  });
-
-    var gettingNextcloudHost = browser.storage.sync.get('nextcloudHost');
-    gettingNextcloudHost.then((res) => {
-	document.querySelector("#nextcloudHost").value = res.nextcloudHost || '';
-    });
-
-    var gettingNextcloudUsername = browser.storage.sync.get('nextcloudUsername');
-    gettingNextcloudUsername.then((res) => {
-	document.querySelector("#nextcloudUsername").value = res.nextcloudUsername || '';
-    });
-
-    var gettingNextcloudPassword = browser.storage.sync.get('nextcloudPassword');
-    gettingNextcloudPassword.then((res) => {
-	document.querySelector("#nextcloudPassword").value = res.nextcloudPassword || '';
-    });
-
-    var gettingShortcut = browser.storage.sync.get('shortcut');
-    gettingShortcut.then((res) => {
-	document.querySelector("#shortcut").value = res.shortcut || 'Ctrl+Shift+U';
-    });
-}
-
-/**
- * Keyboard shortcut
- */
-
-const commandShorcut = '_execute_browser_action';
-
-/**
- * Update the UI: set the value of the shortcut textbox.
- */
-async function updateUI() {
-    let commands = await browser.commands.getAll();
-    for (command of commands) {
-	if (command.name === commandShorcut) {
-	    document.querySelector('#shortcut').value = command.shortcut;
+const saveCheckbox = (checkId, checkKey) => {
+  let checkbox = document.getElementById(`${checkId}`)
+  if (checkbox.checked) {
+    browser.storage.sync.set({
+      [checkKey] : document.querySelector(`#${checkId}`).checked = true 
+    })
+  } else {
+    browser.storage.sync.set({
+      [checkKey] : document.querySelector(`#${checkId}`).checked = false 
+    })
  }
 }
+
+
+const restoreOptions = () => {
+  restoreHost('diasporaHost', 'diaspora-host', host.diasporaDefault)
+  restoreHost('friendicaHost', 'friendica-host', host.friendicaDefault)
+  restoreHost('gnusocialHost', 'gnusocial-host', host.gnusocialDefault)
+  restoreHost('hubzillaHost', 'hubzilla-host', host.hubzillaDefault)
+  restoreHost('lemmyHost', 'lemmy-host', host.lemmyDefault)
+  restoreHost('mastodonHost', 'mastodon-host', host.mastodonDefault)
+  restoreHost('pleromaHost', 'pleroma-host', host.pleromaDefault)
+  restoreHost('socialhomeHost', 'socialhome-host', host.socialhomeDefault)
+  restoreHost('xmppHost', 'xmpp-host', host.xmppDefault)
+
+  restoreCheckbox('diasporaCheck', 'diaspora-check')
+  restoreCheckbox('friendicaCheck', 'friendica-check')
+  restoreCheckbox('gnusocialCheck', 'gnusocial-check')
+  restoreCheckbox('hubzillaCheck', 'hubzilla-check')
+  restoreCheckbox('lemmyCheck', 'lemmy-check')
+  restoreCheckbox('mastodonCheck', 'mastodon-check')
+  restoreCheckbox('pleromaCheck', 'pleroma-check')
+  restoreCheckbox('socialhomeCheck', 'socialhome-check')
+  restoreCheckbox('xmppCheck', 'xmpp-check')
 }

-/**
- * Update the shortcut based on the value in the textbox.
- */
-async function updateShortcut() {
-    await browser.commands.update({
-	name: commandShorcut,
-	shortcut: document.querySelector('#shortcut').value
-    });
+
+const restoreHost = (hostKey, hostId, hostDefault) => {
+  let gettingItem = browser.storage.sync.get(`${hostKey}`)
+  gettingItem.then((res) => {
+    document.querySelector(`#${hostId}`).value = res[hostKey] || hostDefault
+  })
 }

-/**
- * Reset the shortcut and update the textbox.
- */
-async function resetShortcut() {
-    await browser.commands.reset(commandShorcut);
-    updateUI();
+const restoreCheckbox = (checkKey, checkId) => {
+  const checkbox = chrome.storage.sync.get(`${checkKey}`, value => {
+    if (value[checkKey]) {
+      document.getElementById(`${checkId}`).checked = true
+    }
+  })
 }

-/**
- * Update the UI when the page loads.
-*/

-document.addEventListener('DOMContentLoaded', restoreOptions, updateUI);
-document.querySelector("form").addEventListener("submit", saveOptions);
-document.querySelector('#update').addEventListener('click', updateShortcut);
-document.querySelector('#reset').addEventListener('click', resetShortcut);
+document.addEventListener('DOMContentLoaded', restoreOptions, saveCheckbox)
+document.querySelector("form").addEventListener("submit", saveOptions)
+
+// test zone
+function onGot(item) {
+  console.log(item);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+let allItems = browser.storage.sync.get()
+allItems.then(onGot, onError)
+
+const itemValueOpt = chrome.storage.sync.get('pleromaCheck', item => {
+  console.log(item.pleromaCheck)
+})
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "rootDir": "js",
+  },
+  "exclude": ["node_modules"]
+}
--- a/manifest.json
+++ b/manifest.json
@ -1,41 +1,49 @@
 {
  "manifest_version": 2,

-    "name": "Share-freedom",
+  "name": "Share Freedom",
  "description": "share the current tab on the fediverse",
-    "version": "2.1.2",
+  "version": "2.1.3",
  "author": "Mickie",

+  "background": {
+    "scripts": ["js/background.js"],
+    "persistent": true
+  },
+
  "browser_action": {
-	"default_icon": "img/icon.png",
-	"default_popup": "index.html",
+    "default_icon": "img/icon-32-dark.png",
+    "default_popup": "html/index.html",
    "default_title": "Share freedom",
    "theme_icons": [{
      "light": "img/icon-16-light.png",
-	    "dark": "img/icon.png",
+      "dark": "img/icon-16-dark.png",
      "size": 16
    }, {
      "light": "img/icon-32-light.png",
-	    "dark": "img/icon.png",
+      "dark": "img/icon-32-dark.png",
      "size": 32
    }]
  },

  "icons": {
-	"16":"img/icon.png",
-	"32":"img/icon.png"
+    "16":"img/icon-16-dark.png",
+    "32":"img/icon-32-dark.png"
  },

  "commands": {
    "_execute_browser_action": {
-	    "suggested_key": { "default": "Ctrl+Shift+U" },
+      "suggested_key": {
+	"default": "Ctrl+Shift+U"
+      },
      "description": "Execute the extension"
    }
  },

  "options_ui": {
-	"page": "options.html",
-	"browser_style": true
+    "page": "html/options.html",
+    "browser_style": true,
+    "chrome_style": true
  },

  "applications": {
--- a/options.html
+++ b/options.html
@ -1,117 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <base target="_blank" />
-    <title>Share freedom settings</title>
-    <!-- build:styles -->
-    <link rel="stylesheet" href="css/bootstrap.css">
-    <link rel="stylesheet" href="css/fork-awesome.css">
-    <link rel="stylesheet" href="css/sharer.css">
-    <!-- endbuild -->
-    <!-- build:scripts -->
-    <script src="js/jquery.js"></script>
-    <!-- endbuild -->
-    <style>
-     body {
-	 background-image: url('img/wallpaper.png');
-	 background-repeat: no-repeat;
-	 background-attachment: fixed;
-	 background-size: cover;
-     }
-    </style>
-  </head>
-  <body>
-    <div class="container-fluid btns-container py-3">
-      <div class="row">
-        <div class="col-8 text-left"><img src="img/icon.png" class="img-fluid" alt="Fedishare"></div>
-        <div class="col-4 text-right">Wallpaper by:
-	  <a href="https://fosstodon.org/@yarmo/101907879701964911">yarmo [at] fosstodon.org</a>
-	</div>
-      </div>
-    <form>
-      <p><h2>Settings</h2></p>
-      <fieldset>
-  	    <legend><h4>Instances</h4></legend>
-  	    <label><b>Important:</b> Insert the complete URL with http or https</label>
-      	<p>
-      	  <p>Gnusocial</p>
-      	  <input type="text" id="gnusocialHost" >
-      	  <button type="submit">Save</button>
-      	</p>
-      	<p>
-      	  <p>Mastodon / Misskey</p>
-      	  <input type="text" id="mastodonHost" >
-      	  <button type="submit">Save</button>
-      	</p>
-        <p>
-      	  <p>Pleroma</p>
-      	  <input type="text" id="pleromaHost" >
-      	  <button type="submit">Save</button>
-      	</p>
-      	<p>
-      	  <p>Hubzilla / Osada / Zap</p>
-      	  <input type="text" id="hubzillaHost" >
-      	  <button type="submit">Save</button>
-      	</p>
-      	<p>
-      	  <p>Diaspora</p>
-      	  <input type="text" id="diasporaHost">
-      	  <button type="submit">Save</button>
-      	</p>
-      	<p>
-      	  <p>Friendica</p>
-      	  <input type="text" id="friendicaHost">
-      	  <button type="submit">Save</button>
-      	</p>
-      	<p>
-      	  <p>Lemmy</p>
-      	  <input type="text" id="lemmyHost">
-      	  <button type="submit">Save</button>
-      	</p>
-        <p>
-      	  <p>Socialhome</p>
-      	  <input type="text" id="socialhomeHost" >
-      	  <button type="submit">Save</button>
-      	</p>
-        <p>
-      	  <p>Xmpp ID</p>
-      	  <input type="text" id="xmppHost">
-      	  <button type="submit">Save</button>
-      	</p>
-        <p>
-      	  <p>Netxcloud host</p>
-      	  <input type="text" id="nextcloudHost">
-      	  <button type="submit">Save</button>
-      	</p>
-        <p>
-      	  <p>Netxcloud username</p>
-      	  <input type="text" id="nextcloudUsername">
-      	  <button type="submit">Save</button>
-      	</p>
-        <p>
-      	  <p>Netxcloud password</p>
-      	  <input type="password" id="nextcloudPassword">
-      	  <button type="submit">Save</button>
-      	</p>
-        </fieldset>
-        <fieldset>
-      	<p>
-      	  <button id="update">Update</button>
-      	  <button id="reset">Reset</button>
-      	</p>
-      </fieldset>
-      <fieldset>
-        <legend><h4>Keyboard shortcut</h4></legend>
-        <input type="text" id="shortcut" >
-        <p>
-          <button id="update">Update</button>
-          <button id="reset">Reset</button>
-        </p>
-     </fieldset>
-    </form>
-    <script src="js/options.js"></script>
-</body>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,30 +1,23 @@
 {
-  "name": "Share-freedom",
-  "version": "2.1.2",
-  "description": "share the current tab on the fediverse",
-  "main": "gulpfile.js",
-  "dependencies": {},
-  "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-clean-css": "^3.8.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-html-replace": "^1.6.2",
-    "gulp-htmlmin": "^3.0.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-uglify-es": "^0.1.3"
-  },
+  "name": "share-freedom",
+  "version": "2.1.3",
+  "description": "Share the current tab on the fediverse",
+  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "gulp"
+    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
-    "url": "git+https://gitlab.com/mickie1/share-freedom-addon.git"
+    "url": "git+https://gitlab.com/mickie1/share-freedom-extension.git"
  },
+  "keywords": [
+    "share",
+    "fediverse"
+  ],
  "author": "Mickie",
  "license": "GPL-3.0",
  "bugs": {
-    "url": "https://gitlab.com/mickie1/share-freedom-addon/issues"
+    "url": "https://gitlab.com/mickie1/share-freedom-extension/issues"
  },
-  "homepage": "https://addons.mozilla.org/en-US/firefox/addon/share-freedom/"
+  "homepage": "https://gitlab.com/mickie1/share-freedom-extension#readme"
 }