Donate action

css/animate.css

@@ -0,0 +1,30 @@
+@-webkit-keyframes tada {
+  0% {
+     -webkit-transform: scale(1);
+  }
+
+  10%, 20% {
+     -webkit-transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+     -webkit-transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+     -webkit-transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+     -webkit-transform: scale(1) rotate(0);
+  }
+}
+
+.tada {
+   -webkit-animation-name: tada;
+}
+
+.animated {
+   -webkit-animation-duration: 1s;
+   -webkit-animation-fill-mode: both;
+}

css/style.css

@@ -160,21 +160,41 @@ a:hover {
 }
 
 /**
- * Controls row (bottom)
+ * Controls
  */
 
-.controls {
-}
+.controls { }
 
-.controls__save input {
+.controls__save,
+.controls__reset {
   margin-right: 10px;
   font-size: 18px;
 }
 
-.controls__remove-draft {
+.controls__remove-draft { }
 
+/**
+ * Donate
+ */
+.donate {
+    text-align: right;
 }
 
+.donate img {
+    position: absolute;
+}
+
+.donate__button {
+    background: rgb(28, 184, 65); /* this is a green */
+    color: #fff;
+    font-size: 18px;
+}
+
+.donate-form {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+}
 
 
 /**

lib/popup.js

@@ -18,7 +18,9 @@
             saveBtn: $('#save'),
             resetBtn: $('#reset'),
             draftRemoveLink: $('#draft-remove'),
-            error: $('#error')
+            error: $('#error'),
+            donateBtn: $('#donate'),
+            donateForm: $('#donate-form')
         },
         title: {
             host: {
@@ -554,4 +556,24 @@
     popup.el.draftRemoveLink.on('click', popup.removeDraft);
 
 
+    /**
+     * Donate
+     */
+
+    var donate = {
+        button: popup.el.donateBtn,
+        form: popup.el.donateForm,
+        interval: null
+    };
+
+    donate.interval = setInterval(function() {
+        donate.button.toggleClass('animated tada');
+    }, 4000);
+
+    donate.button.on('click', function(e) {
+        donate.form.find('input[name="submit"]').click();
+        e.preventDefault();
+    });
+
+
 })(jQuery);

manifest.json

@@ -4,7 +4,7 @@
   "name": "Custom JavaScript for websites ",
   "short_name": "customjs",
   "description": "Run custom JavaScript on any website.",
-  "version": "2.1.1",
+  "version": "2.1.2",
 
   "permissions": [
     "http://*/",

popup.html

@@ -7,6 +7,7 @@
         <link href="css/pure/0.4.2/grids-nr-min.css" rel="stylesheet">
         <link href="css/pure/0.4.2/forms-nr-min.css" rel="stylesheet">
         <link href="css/pure/0.4.2/buttons-min.css" rel="stylesheet">
+        <link href="css/animate.css" rel="stylesheet">
         <link href="css/style.css" rel="stylesheet">
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
@@ -60,20 +61,32 @@
                     </div>
                 </div><!-- .source -->
 
-                <div class="pure-g controls">
-                    <div class="pure-u-3-5 controls__save">
-                        <input type="submit" id="save" class="pure-button pure-button-primary" name="save" value="save">
-                        <input type="submit" id="reset" class="pure-button" name="reset" value="reset">
+                <div class="pure-g">
+                    <div class="pure-u-3-5 controls">
+                        <input type="submit" id="save" class="controls__save pure-button pure-button-primary" name="save" value="save">
+                        <input type="submit" id="reset" class="controls__reset pure-button" name="reset" value="reset">
                         <a id="draft-remove" class="controls__remove-draft red-text is-hidden" href="#">remove draft</a>
                     </div>
+                    <div class="pure-u-2-5 donate">
+                        <button id="donate" class="donate__button pure-button" title="PayPal - The safer, easier way to pay online!">donate</button>
+                        <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
+                    </div>
                 </div><!-- .controls -->
 
             </form>
+
+            <form id="donate-form" class="donate-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
+                <input type="hidden" name="cmd" value="_s-xclick">
+                <input type="hidden" name="hosted_button_id" value="M3RKVTJFGGFHE">
+                <input type="submit" name="submit" alt="PayPal - The safer, easier way to pay online!">
+            </form>
+
             <div id="error" class="error is-hidden">
                 <strong>Custom JavaScript says:</strong>
                 <p class="red-text">It seems that this page cannot be modified with me..</p>
                 <span>tip: Try refresh page</span>
             </div><!-- .error -->
+
         </div>
         <script src="lib/popup.js"></script>
 	</body>