├── .DS_Store
├── .gitignore
├── LICENSE
├── README.md
├── background.js
├── images
    ├── click to start.png
    ├── menu.png
    ├── message.png
    └── setup.png
├── manifest.json
├── notifications.js
├── popup working.js
├── popup.html
├── popup.js
├── pushy.zip
└── resources
    ├── Albert.jpg
    ├── Cassie.jpg
    ├── Jane.jpg
    ├── Jim.jpg
    ├── Roberto.jpg
    ├── SF-Light.otf
    ├── SF-Medium.otf
    ├── message.png
    ├── stories.json
    └── style.css


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Adnan Aga
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Pushy!
 2 | 
 3 | Create awkward situations with my chrome extension that send you messages that look like an iMessage popup
 4 | 
 5 | This is a work in progress - Still looking to make a webpage for it.
 6 | 
 7 | ## Install
 8 | 1. Open the Extension Management page by navigating to chrome://extensions or click here
 9 | [Chrome Exntensions](chrome://extensions)
10 | 
11 | 2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
12 | 
13 | 3. Click the Load unpacked button and select pushy.zip
14 | 
15 | ## Use it!
16 | 
17 | Click on the extension button to bring up the menu
18 | ![Where to click](/images/setup.png)
19 | 
20 | The menu should pop up and you can choose your story or write your own!
21 | ![Menu Popup](/images/menu.png)
22 | 
23 | Ther menu should pop up and you can choose your story or write your own!
24 | ![Click to send](/images/click%20to%20start.png)
25 | 
26 | The message should then popup on that page!
27 | ![Message Popup](/images/message.png)
28 | 


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/background.js


--------------------------------------------------------------------------------
/images/click to start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/images/click to start.png


--------------------------------------------------------------------------------
/images/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/images/menu.png


--------------------------------------------------------------------------------
/images/message.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/images/message.png


--------------------------------------------------------------------------------
/images/setup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/images/setup.png


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Pushy!",
 3 |     "manifest_version": 3,
 4 |     "version": "0.1",
 5 |     "description": "Get a notification on command",
 6 |     "permissions": [
 7 |       "activeTab",
 8 |       "scripting"
 9 |     ],
10 |       "action": {
11 |     "default_popup": "popup.html"
12 |   },
13 |     "web_accessible_resources": [{
14 |         "resources": ["/resources/*"],
15 |         "matches": ["<all_urls>"]
16 |       }]
17 |   }


--------------------------------------------------------------------------------
/notifications.js:
--------------------------------------------------------------------------------
 1 | function sendNotification(person, messageString) {
 2 |     
 3 |     let notificationBox = document.createElement("div");
 4 |     notificationBox.id = "messageBox"
 5 |     let imageContainer = document.createElement("div");
 6 |     let messageContainer = document.createElement("div");
 7 |     let title = document.createElement("div");
 8 |     let message = document.createElement("div");
 9 | 
10 |     let img1 = document.createElement("img");
11 |     let img2 = document.createElement("img");
12 | 
13 |     let profilePic;
14 |     let icon = chrome.runtime.getURL("resources/message.png");
15 | 
16 |     let link = document.createElement("link");
17 |     link.href = chrome.runtime.getURL("resources/style.css");
18 |     link.type = "text/css";
19 |     link.rel = "stylesheet";
20 |     document.getElementsByTagName("head")[0].appendChild(link);
21 | 
22 |     title.innerHTML = person
23 |     profilePic = chrome.runtime.getURL(`resources/${person}.jpg`);
24 | 
25 | 
26 |     message.innerHTML = messageString
27 | 
28 | 
29 |     notificationBox.classList.add("notificationBox");
30 |     messageContainer.classList.add("messageContainer");
31 |     imageContainer.classList.add("imageContainer");
32 |     img1.classList.add("profilePic");
33 |     img2.classList.add("messageIcon");
34 |     title.classList.add("title");
35 |     message.classList.add("message");
36 | 
37 |     img1.src = profilePic
38 |     img2.src = icon
39 |     imageContainer.appendChild(img1)
40 |     imageContainer.appendChild(img2)
41 |     messageContainer.appendChild(title)
42 |     messageContainer.appendChild(message)
43 |     notificationBox.appendChild(imageContainer)
44 |     notificationBox.appendChild(messageContainer);
45 | 
46 |     (document.fullscreenElement ?? document.body).appendChild(notificationBox);
47 | 
48 |     notificationBox.classList.add("slideIn");
49 | }
50 | 
51 |   function sleep(ms) {
52 |     return new Promise(resolve => setTimeout(resolve, ms));
53 |   }
54 |   
55 |   async function playMessage(person, message, duration) {
56 |     sendNotification(person, message);
57 |     await sleep(duration ?? 4000);
58 |     let notificationBox = document.getElementById("messageBox");
59 |     notificationBox.classList.add("slideOut");
60 |     await sleep(500);
61 |     notificationBox.remove()
62 |   }
63 |   
64 |   
65 | 
66 | async function playStory(request) {
67 |   console.log(request);
68 |   console.log('original', Object.keys(request).length)
69 |   console.log('updated', (Object.keys(request).length-1)/2)
70 | 
71 |   for(let i=0; i< (Object.keys(request).length-1)/2; i++){
72 |     console.log('delay' + (i+1))
73 |     console.log('message' + (i+1))
74 |     await sleep(request['delay' + (i+1)]);
75 |     playMessage(request.character,request['message' + (i+1)]);
76 |   }
77 | }
78 | 
79 | let initialized;
80 | if (typeof initialized === 'undefined') {
81 |   initialized = true;
82 |   chrome.runtime.onMessage.addListener(function(request){
83 |     playStory(request)
84 |   });
85 | }


--------------------------------------------------------------------------------
/popup working.js:
--------------------------------------------------------------------------------
  1 | let text1 = document.getElementById("text1");
  2 | let text2 = document.getElementById("text2");
  3 | let text3 = document.getElementById("text3");
  4 | 
  5 | let delay1 = document.getElementById("delay1");
  6 | let delay2 = document.getElementById("delay2");
  7 | let delay3 = document.getElementById("delay3");
  8 | 
  9 | let message1 = document.getElementById("message1");
 10 | let message2 = document.getElementById("message2");
 11 | let message3 = document.getElementById("message3");
 12 | 
 13 | let submit = document.getElementById("submit");
 14 | 
 15 | let character = document.getElementById("character");
 16 | let characterImage = document.getElementById('characterImage');
 17 | 
 18 | let form = document.getElementById("form1");
 19 | 
 20 | character.addEventListener('change', function() {
 21 |     characterImage.src = `resources/${this.selectedOptions[0].value}.jpg`
 22 |   })
 23 | 
 24 | // your function
 25 | let submitted = function(event) {
 26 |     event.preventDefault();
 27 |     console.log("Playing Story");
 28 |     playStory();
 29 |     document.getElementById('main').style.display = 'none';
 30 |     document.getElementById('clickOut').style.display = 'block';
 31 | };
 32 | 
 33 | // attach event listener
 34 | form.addEventListener("submit", submitted, true);
 35 | 
 36 | if (text1) {
 37 |     text1.onclick = function() {
 38 |         character.value = 'Cassie';
 39 |         characterImage.src = `resources/Cassie.jpg`
 40 | 
 41 |         delay1.value = 10;
 42 |         message1.value = 'you packed me the wrong go gurt again';
 43 | 
 44 |         delay2.value = 5;
 45 |         message2.value = "you fucking idiot";
 46 | 
 47 |         delay3.value = 30;
 48 |         message3.value = "i hate you";
 49 | 
 50 |         document.getElementById('form1').style.display = 'block';
 51 |         // playStory(1);
 52 |     }
 53 | }
 54 | 
 55 | if (text2) {
 56 |     text2.onclick = function() {
 57 |         character.value = 'Jim';
 58 |         characterImage.src = `resources/Jim.jpg`
 59 | 
 60 |         delay1.value = 10;
 61 |         message1.value = "hey wanna hear a dumb joke";
 62 |         
 63 |         delay2.value = 30;
 64 |         message2.value = "what do you get when you mix human DNA with goat DNA?";
 65 |         
 66 |         delay3.value = 5;
 67 |         message3.value = "kicked out of the petting zoo LOL";
 68 |         document.getElementById('form1').style.display = 'block';
 69 |     }
 70 | }
 71 | 
 72 | if (text3) {
 73 |     text3.onclick = function() {
 74 |         character.value = 'Jane';
 75 |         characterImage.src = `resources/Jane.jpg`
 76 |         message1.value = '';
 77 |         message2.value = '';
 78 |         message3.value = '';
 79 |         document.getElementById('form1').style.display = 'block';
 80 |     }
 81 | }
 82 | 
 83 | function playStory(){
 84 |         chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
 85 |             var activeTab = tabs[0];
 86 |             chrome.scripting.executeScript({
 87 |                 target: { tabId: activeTab.id },
 88 |                 files: ['notifications.js']
 89 |               }, function() {
 90 |                 chrome.tabs.sendMessage(activeTab.id, {
 91 |                     "character": character.value,
 92 |                     "delay1": delay1.value*1000,
 93 |                     "delay2": delay2.value*1000,
 94 |                     "delay3": delay3.value*1000,
 95 |                     "message1": message1.value,
 96 |                     "message2": message2.value,
 97 |                     "message3": message3.value,
 98 |                 });
 99 |             });
100 |         });
101 | }
102 | 


--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <style>
  5 | 
  6 |       .header {
  7 |             font-size: 20px;
  8 |             text-align:    center;
  9 |         }
 10 | 
 11 |         .storyContainer {
 12 |             display:flex;
 13 |             flex-direction: row;
 14 |             justify-content:space-around;
 15 |         }
 16 |         button {
 17 |           background: #3498db;
 18 |           border-radius: 18px;
 19 |           font-size: 14px;
 20 |           color: #ffffff;
 21 |         }
 22 | 
 23 |         button:hover {
 24 |           background: #3cb0fd;
 25 |           background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
 26 |           background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
 27 |           background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
 28 |           background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
 29 |           background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
 30 |           text-decoration: none;
 31 |         }
 32 | 
 33 |         button:active {
 34 |           box-shadow: 0 5px #666;
 35 |           transform: translateY(4px);
 36 |         }
 37 | 
 38 |         #form1 {
 39 |           display: none;
 40 |         }
 41 | 
 42 |         #addNotification {
 43 |           display: none;
 44 |         }
 45 | 
 46 |         #clickOut {
 47 |           display:none;
 48 |         }
 49 | 
 50 |         #characterImage {
 51 |           width:20%;
 52 |           border-radius: 50%;
 53 |         }
 54 | 
 55 |         .characterSelector{
 56 |           display:flex;
 57 |           align-items: center;
 58 |           justify-content: space-between;
 59 |           margin: 0px 12px;
 60 |         }
 61 | 
 62 |         .messageForm {
 63 |           margin: 0px 12px;
 64 |         }
 65 | 
 66 |     </style>
 67 |   </head>
 68 |   <body>
 69 |    <div id="main">
 70 |      <h2>Pushy!</h2>
 71 |     <div class="header">Pick a story!</div>
 72 |     <br>
 73 |       <div class="storyContainer">
 74 |         <button id="story1">Cassie's Yoghurt Mixup</button>
 75 |         <button id="story2">Uncle Jims Dumb Joke</button>
 76 |         <button id="story3">Stinky!</button>
 77 |         <button id="story4">A Diaper Emergency</button>
 78 |         <button id="story5">Smize</button>
 79 |         <button id="storyDIY">Write your own!</button>
 80 |       </div>
 81 | 
 82 |       <br>
 83 |       <br>
 84 | 
 85 |       <div class="makeYourOwn">
 86 |         <form id="form1">
 87 |           <div class="characterSelector">
 88 |             <div>
 89 |                 <label for="Character">Character:</label>
 90 |                 <select name="Character" id="character">
 91 |                   <option value="Cassie">Cassie</option>
 92 |                   <option value="Jim" selected>Uncle Jim</option>
 93 |                   <option value="Roberto">Roberto</option>
 94 |                   <option value="Jane">Jane</option>
 95 |                 </select>
 96 |             </div>
 97 |             <img src="resources/Cassie.jpg" id="characterImage">
 98 |           </div>
 99 |       <br>
100 |       <br>
101 | 
102 |           <div class="messageForm" id="messageForm">
103 |             
104 |             <div id="notification1">
105 |               <label for="delay1">Time before notification 1:</label>
106 |               <br>
107 |               <select name="delay1" id="delay1">
108 |                 <option value="5000">5 Seconds</option>
109 |                 <option value="10000" selected>10 Seconds</option>
110 |                 <option value="30000">30 Seconds</option>
111 |                 <option value="60000">60 Seconds</option>
112 |               </select>
113 |               <br>
114 |                 <label for="message1">Write your message for notification 1:</label>
115 |                 <input type="text" id="message1" name="message1" value="" style="width: 300px;" maxlength="280">
116 |             </div>
117 |             <br>
118 |           </div>
119 |           <input type="submit" value="Send Notifications">
120 |           <button type="button" id= "addNotification" value="Add"> Add Notification</button>
121 |         </form>
122 |     </div>
123 | 
124 |     </div>
125 | 
126 |     <div id="clickOut">
127 |       Nice!
128 |       Click back to your website
129 |     </div>
130 | 
131 |     
132 |   </body>
133 | </html>
134 | <script src="popup.js"></script>


--------------------------------------------------------------------------------
/popup.js:
--------------------------------------------------------------------------------
  1 | let storyArray = document.querySelectorAll('[id*="story"]');
  2 | 
  3 | let story1 = storyArray[0];
  4 | let story2 = storyArray[1];
  5 | let story3 = storyArray[2];
  6 | let story4 = storyArray[3];
  7 | let story5 = storyArray[4];
  8 | 
  9 | let storyDIY = document.getElementById("storyDIY");
 10 | 
 11 | let delay1 = document.getElementById("delay1");
 12 | let delay2 = document.getElementById("delay2");
 13 | let delay3 = document.getElementById("delay3");
 14 | 
 15 | let message1 = document.getElementById("message1");
 16 | let message2 = document.getElementById("message2");
 17 | let message3 = document.getElementById("message3");
 18 | 
 19 | let notification1 = document.getElementById("notification1");
 20 | let notification2 = document.getElementById("notification2");
 21 | let notification3 = document.getElementById("notification3");
 22 | 
 23 | let submit = document.getElementById("submit");
 24 | 
 25 | let character = document.getElementById("character");
 26 | let characterImage = document.getElementById('characterImage');
 27 | 
 28 | let addNotification = document.getElementById('addNotification');
 29 | 
 30 | let form = document.getElementById("form1");
 31 | let messageForm = document.getElementById("messageForm");
 32 | 
 33 | let notificationData = {};
 34 | 
 35 | let stories;
 36 | 
 37 | character.addEventListener('change', function() {
 38 |     characterImage.src = `resources/${this.selectedOptions[0].value}.jpg`
 39 |   })
 40 | 
 41 | 
 42 | //   async function loadStories() {
 43 | //     const response = await fetch('/resources/stories.json');
 44 | //     stories = await response.json();
 45 | //     console.log(stories); 
 46 | //     // logs [{ name: 'Joker'}, { name: 'Batman' }]
 47 | //   }
 48 | 
 49 | // your function
 50 | let submitted = function(event) {
 51 |     event.preventDefault();
 52 |     let notifArray = document.querySelectorAll('[id*="notification"]');
 53 |     console.log(notifArray.length);
 54 |     notificationData['character'] = document.getElementById("character").value
 55 |     for(let i =0; i<notifArray.length; i++){
 56 |         notificationData['delay' + (i+1)] = document.getElementById(['delay' + (i+1)]).value
 57 |         notificationData['message' + (i+1)] = document.getElementById(['message' + (i+1)]).value    
 58 |     }
 59 |     playStory();
 60 |     document.getElementById('main').style.display = 'none';
 61 |     document.getElementById('clickOut').style.display = 'block';
 62 | };
 63 | 
 64 | // attach event listener
 65 | form.addEventListener("submit", submitted, true);
 66 | 
 67 | // attach event listener
 68 | addNotification.addEventListener("click", add);
 69 | 
 70 | if (story1) {
 71 |     story1.onclick = function() {
 72 |         notification1.style.display = 'block';
 73 |         console.log(form.length)
 74 | 
 75 |         if(form.length < 9){
 76 |             generate(2);
 77 |             generate(3);
 78 |             
 79 |             delay1 = document.getElementById("delay1");
 80 |             delay2 = document.getElementById("delay2");
 81 |             delay3 = document.getElementById("delay3");
 82 | 
 83 |             message1 = document.getElementById("message1");
 84 |             message2 = document.getElementById("message2");
 85 |             message3 = document.getElementById("message3");
 86 |         }
 87 |         
 88 |         addNotification.style.display = 'none';
 89 | 
 90 |         character.value = 'Cassie';
 91 |         characterImage.src = `resources/Cassie.jpg`
 92 | 
 93 |         delay1.value = 10000;
 94 |         message1.value = 'you packed me the wrong go gurt again';
 95 | 
 96 |         delay2.value = 5000;
 97 |         message2.value = "you fucking idiot";
 98 | 
 99 |         delay3.value = 30000;
100 |         message3.value = "but its okay i still love you";
101 | 
102 |         document.getElementById('form1').style.display = 'block';
103 |     }
104 | }
105 | 
106 | if (story2) {
107 |     story2.onclick = function() {
108 |         notification1.style.display = 'block';
109 |         if(form.length < 9){
110 |             generate(2);
111 |             generate(3);
112 | 
113 |             delay1 = document.getElementById("delay1");
114 |             delay2 = document.getElementById("delay2");
115 |             delay3 = document.getElementById("delay3");
116 | 
117 |             message1 = document.getElementById("message1");
118 |             message2 = document.getElementById("message2");
119 |             message3 = document.getElementById("message3");
120 |         }
121 | 
122 | 
123 |         addNotification.style.display = 'none';
124 | 
125 |         character.value = 'Jim';
126 |         characterImage.src = `resources/Jim.jpg`
127 | 
128 |         delay1.value = 10000;
129 |         message1.value = "hey wanna hear a dumb joke";
130 |         
131 |         delay2.value = 30000;
132 |         message2.value = "what do you get when you mix human DNA with goat DNA?";
133 |         
134 |         delay3.value = 5000;
135 |         message3.value = "kicked out of the petting zoo LOL";
136 |         document.getElementById('form1').style.display = 'block';
137 |     }
138 | }
139 | 
140 | if (story3) {
141 |     story3.onclick = function() {
142 |         notification1.style.display = 'block';
143 | 
144 |         if(document.getElementById("notification2")){
145 |             remove("notification2");
146 |         }
147 | 
148 |         if(document.getElementById("notification3")){
149 |             remove("notification3");
150 |         }
151 | 
152 |         delay1 = document.getElementById("delay1");
153 |         message1 = document.getElementById("message1");
154 | 
155 |         addNotification.style.display = 'none';
156 | 
157 |         character.value = 'Jane';
158 |         characterImage.src = `resources/Jane.jpg`
159 |         message1.value = 'You stink like the tuna!';
160 |         document.getElementById('form1').style.display = 'block';
161 |     }
162 | }
163 | 
164 | if (story4) {
165 |     story4.onclick = function() {
166 |         notification1.style.display = 'block';
167 |         console.log(form.length)
168 | 
169 |         if(form.length < 9){
170 |             generate(2);
171 |             generate(3);
172 |             
173 |             delay1 = document.getElementById("delay1");
174 |             delay2 = document.getElementById("delay2");
175 |             delay3 = document.getElementById("delay3");
176 | 
177 |             message1 = document.getElementById("message1");
178 |             message2 = document.getElementById("message2");
179 |             message3 = document.getElementById("message3");
180 |         }
181 |         
182 |         addNotification.style.display = 'none';
183 | 
184 |         character.value = 'Roberto';
185 |         characterImage.src = `resources/Roberto.jpg`
186 | 
187 |         delay1.value = 30000;
188 |         message1.value = 'he shat everywhere again';
189 | 
190 |         delay2.value = 5000;
191 |         message2.value = "its so liquidy";
192 | 
193 |         delay3.value = 5000;
194 |         message3.value = "its liek if someone blended up a kitkat";
195 | 
196 |         document.getElementById('form1').style.display = 'block';
197 |     }
198 | }
199 | 
200 | if (storyDIY) {
201 |     storyDIY.onclick = function() {
202 |         console.log("click on diy")
203 |         notification1.style.display = 'block';
204 |         addNotification.style.display = 'block';
205 | 
206 |         character.value = 'Jane';
207 |         characterImage.src = `resources/Jane.jpg`
208 |         message1.value = '';
209 |         document.getElementById('form1').style.display = 'block';
210 |     }
211 | }
212 | 
213 | let reqs_id = 1;
214 | 
215 | function remove(stringID) {
216 | let elem = document.getElementById(stringID);
217 |   elem.remove()
218 | }
219 | 
220 | function add() {
221 |   reqs_id++; // increment reqs_id to get a unique ID for the new element
222 | 
223 |   generate(reqs_id);
224 | }
225 | 
226 | function generate(num){
227 |     console.log("generating")
228 |     var dom = document.createElement('div');
229 |     let final_string = `<div id="notification${num}">
230 |     <label for="delay${num}">Time before notification ${num}:</label>
231 |     <br>
232 |     <select name="delay${num}" id="delay${num}">
233 |       <option value="5000">5 Seconds</option>
234 |       <option value="10000" selected>10 Seconds</option>
235 |       <option value="30000">30 Seconds</option>
236 |       <option value="60000">60 Seconds</option>
237 |     </select>
238 |     <br>
239 |       <label for="message${num}">Write your message for notification ${num}:</label>
240 |       <input type="text" id="message${num}" name="message${num}" value="" style="width: 300px;" maxlength="280"><br><br>
241 |   </div>`
242 |     dom.innerHTML = final_string;
243 | 	messageForm.appendChild(dom);
244 | }
245 | 
246 | function playStory(){
247 |         chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
248 |             var activeTab = tabs[0];
249 |             chrome.scripting.executeScript({
250 |                 target: { tabId: activeTab.id },
251 |                 files: ['notifications.js']
252 |               }, function() {
253 |                   console.log(notificationData)
254 |                 chrome.tabs.sendMessage(activeTab.id, notificationData);
255 |             });
256 |         });
257 | }
258 | 


--------------------------------------------------------------------------------
/pushy.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/pushy.zip


--------------------------------------------------------------------------------
/resources/Albert.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/resources/Albert.jpg


--------------------------------------------------------------------------------
/resources/Cassie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/resources/Cassie.jpg


--------------------------------------------------------------------------------
/resources/Jane.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/resources/Jane.jpg


--------------------------------------------------------------------------------
/resources/Jim.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/resources/Jim.jpg


--------------------------------------------------------------------------------
/resources/Roberto.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/resources/Roberto.jpg


--------------------------------------------------------------------------------
/resources/SF-Light.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/resources/SF-Light.otf


--------------------------------------------------------------------------------
/resources/SF-Medium.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/resources/SF-Medium.otf


--------------------------------------------------------------------------------
/resources/message.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adnanaga/pushy/58aaee3033837f8a26beb503e7a244e847e99066/resources/message.png


--------------------------------------------------------------------------------
/resources/stories.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "story1":
 3 |     {
 4 |         "character":"Cassie",
 5 |         "delay1":10000,
 6 |         "message1": "you packed me the wrong go gurt again",
 7 |         "delay2":5000,
 8 |         "message2": "you fucking idiot",
 9 |         "delay3":30000,
10 |         "message3": "its okay i still love you"
11 |     },
12 | 
13 |     "story2":
14 |     {
15 |         "character":"Jim",
16 |         "delay1":10000,
17 |         "message1": "hey wanna hear a joke",
18 |         "delay2":30000,
19 |         "message2": "what do you get when you mix human dna with goat dna",
20 |         "delay3":5000,
21 |         "message3": "kicked out of the petting zoo LOL"
22 |     },
23 | 
24 |     "story3":
25 |     {
26 |         "character":"Jane",
27 |         "delay1":10000,
28 |         "message1": "You stink like the tuna!"
29 |     }
30 | }


--------------------------------------------------------------------------------
/resources/style.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: "SF-Light";
  3 |   src: url("SF-Light.otf");
  4 |   font-weight: normal;
  5 |   font-style: normal;
  6 | }
  7 | 
  8 | @font-face {
  9 |   font-family: "SF-Medium";
 10 |   src: url("SF-Medium.otf");
 11 |   font-weight: normal;
 12 |   font-style: normal;
 13 | }
 14 | 
 15 | .notificationBox {
 16 |     width: 350pt;
 17 |     border-radius: 16pt;
 18 |     position:fixed;
 19 |     top:10pt;
 20 |     right:10%;
 21 |     background-color: rgba(255, 255, 255, 0.6);
 22 |     backdrop-filter: blur(15px);
 23 |     box-shadow: 0px 0px 6px 0px #ccc;
 24 |     border: 0px solid #ACACAC;
 25 |     z-index: 99999999999999999;
 26 |     color:black;
 27 | }
 28 | 
 29 | 
 30 | .imageContainer {
 31 |   position: absolute;
 32 |   top:0;
 33 |   left:0;
 34 |   display: flex;
 35 |   justify-content: center;
 36 |   align-items: center;
 37 |   height: 100%;
 38 |   width:80pt;
 39 | }
 40 | 
 41 | .profilePic {
 42 |     width:50%;
 43 |     position: absolute;
 44 |     left:14pt;
 45 |     border-radius: 50%;
 46 |     margin:0 !important;
 47 | }
 48 | 
 49 | .messageIcon {
 50 |     width:25%;
 51 |     position: relative;
 52 |     top: 14pt;
 53 |     left:12%;
 54 | 
 55 | }
 56 | 
 57 | .messageContainer{
 58 |     margin-top: 15pt;
 59 |     margin-bottom: 15pt;
 60 |     align-content: space-between;
 61 |     width:70%;
 62 | }
 63 | 
 64 | .title {
 65 |     position: relative;
 66 |     top:0pt;
 67 |     left:70pt;
 68 |     font-size:14pt;
 69 |     font-family: "SF-Medium";
 70 | }
 71 | 
 72 | .message {
 73 |     position: relative;
 74 |     margin-top: 0pt;
 75 |     left:70pt;
 76 |     font-size:13pt;
 77 |     display: -webkit-box;
 78 |     line-height: 1.2;
 79 |     font-family: "SF-Light";
 80 |   -webkit-line-clamp: 3;
 81 |   -webkit-box-orient: vertical;  
 82 |   overflow: hidden;
 83 | }
 84 | 
 85 | .slideIn {
 86 |     -webkit-animation-name: cssAnimation;
 87 |     -webkit-animation-duration: 0.3s;
 88 |     -webkit-animation-timing-function: ease;
 89 |     -webkit-animation-fill-mode: forwards;
 90 |   }
 91 | 
 92 |   .slideOut {
 93 |     -webkit-animation-name: cssAnimation2;
 94 |     -webkit-animation-duration: 0.3s;
 95 |     -webkit-animation-timing-function: ease;
 96 |     -webkit-animation-fill-mode: forwards;
 97 |   }
 98 |   
 99 |   @-webkit-keyframes cssAnimation {
100 |     from {
101 |       -webkit-transform: translate(100%);
102 |     }
103 |     to {
104 |       -webkit-transform: translate(30%);
105 |     }
106 |   }
107 | 
108 |   @-webkit-keyframes cssAnimation2 {
109 |     from {
110 |       -webkit-transform: translate(30%);
111 |     }
112 |     to {
113 |       -webkit-transform: translate(150%);
114 |     }
115 |   }
116 |   


--------------------------------------------------------------------------------