[
  {
    "path": ".gitignore",
    "content": ".DS_Store"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2022 Adnan Aga\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Pushy!\n\nCreate awkward situations with my chrome extension that send you messages that look like an iMessage popup\n\nThis is a work in progress - Still looking to make a webpage for it.\n\n## Install\n1. Open the Extension Management page by navigating to chrome://extensions or click here\n[Chrome Exntensions](chrome://extensions)\n\n2. Enable Developer Mode by clicking the toggle switch next to Developer mode.\n\n3. Click the Load unpacked button and select pushy.zip\n\n## Use it!\n\nClick on the extension button to bring up the menu\n![Where to click](/images/setup.png)\n\nThe menu should pop up and you can choose your story or write your own!\n![Menu Popup](/images/menu.png)\n\nTher menu should pop up and you can choose your story or write your own!\n![Click to send](/images/click%20to%20start.png)\n\nThe message should then popup on that page!\n![Message Popup](/images/message.png)\n"
  },
  {
    "path": "background.js",
    "content": ""
  },
  {
    "path": "manifest.json",
    "content": "{\n    \"name\": \"Pushy!\",\n    \"manifest_version\": 3,\n    \"version\": \"0.1\",\n    \"description\": \"Get a notification on command\",\n    \"permissions\": [\n      \"activeTab\",\n      \"scripting\"\n    ],\n      \"action\": {\n    \"default_popup\": \"popup.html\"\n  },\n    \"web_accessible_resources\": [{\n        \"resources\": [\"/resources/*\"],\n        \"matches\": [\"<all_urls>\"]\n      }]\n  }"
  },
  {
    "path": "notifications.js",
    "content": "function sendNotification(person, messageString) {\n    \n    let notificationBox = document.createElement(\"div\");\n    notificationBox.id = \"messageBox\"\n    let imageContainer = document.createElement(\"div\");\n    let messageContainer = document.createElement(\"div\");\n    let title = document.createElement(\"div\");\n    let message = document.createElement(\"div\");\n\n    let img1 = document.createElement(\"img\");\n    let img2 = document.createElement(\"img\");\n\n    let profilePic;\n    let icon = chrome.runtime.getURL(\"resources/message.png\");\n\n    let link = document.createElement(\"link\");\n    link.href = chrome.runtime.getURL(\"resources/style.css\");\n    link.type = \"text/css\";\n    link.rel = \"stylesheet\";\n    document.getElementsByTagName(\"head\")[0].appendChild(link);\n\n    title.innerHTML = person\n    profilePic = chrome.runtime.getURL(`resources/${person}.jpg`);\n\n\n    message.innerHTML = messageString\n\n\n    notificationBox.classList.add(\"notificationBox\");\n    messageContainer.classList.add(\"messageContainer\");\n    imageContainer.classList.add(\"imageContainer\");\n    img1.classList.add(\"profilePic\");\n    img2.classList.add(\"messageIcon\");\n    title.classList.add(\"title\");\n    message.classList.add(\"message\");\n\n    img1.src = profilePic\n    img2.src = icon\n    imageContainer.appendChild(img1)\n    imageContainer.appendChild(img2)\n    messageContainer.appendChild(title)\n    messageContainer.appendChild(message)\n    notificationBox.appendChild(imageContainer)\n    notificationBox.appendChild(messageContainer);\n\n    (document.fullscreenElement ?? document.body).appendChild(notificationBox);\n\n    notificationBox.classList.add(\"slideIn\");\n}\n\n  function sleep(ms) {\n    return new Promise(resolve => setTimeout(resolve, ms));\n  }\n  \n  async function playMessage(person, message, duration) {\n    sendNotification(person, message);\n    await sleep(duration ?? 4000);\n    let notificationBox = document.getElementById(\"messageBox\");\n    notificationBox.classList.add(\"slideOut\");\n    await sleep(500);\n    notificationBox.remove()\n  }\n  \n  \n\nasync function playStory(request) {\n  console.log(request);\n  console.log('original', Object.keys(request).length)\n  console.log('updated', (Object.keys(request).length-1)/2)\n\n  for(let i=0; i< (Object.keys(request).length-1)/2; i++){\n    console.log('delay' + (i+1))\n    console.log('message' + (i+1))\n    await sleep(request['delay' + (i+1)]);\n    playMessage(request.character,request['message' + (i+1)]);\n  }\n}\n\nlet initialized;\nif (typeof initialized === 'undefined') {\n  initialized = true;\n  chrome.runtime.onMessage.addListener(function(request){\n    playStory(request)\n  });\n}"
  },
  {
    "path": "popup working.js",
    "content": "let text1 = document.getElementById(\"text1\");\nlet text2 = document.getElementById(\"text2\");\nlet text3 = document.getElementById(\"text3\");\n\nlet delay1 = document.getElementById(\"delay1\");\nlet delay2 = document.getElementById(\"delay2\");\nlet delay3 = document.getElementById(\"delay3\");\n\nlet message1 = document.getElementById(\"message1\");\nlet message2 = document.getElementById(\"message2\");\nlet message3 = document.getElementById(\"message3\");\n\nlet submit = document.getElementById(\"submit\");\n\nlet character = document.getElementById(\"character\");\nlet characterImage = document.getElementById('characterImage');\n\nlet form = document.getElementById(\"form1\");\n\ncharacter.addEventListener('change', function() {\n    characterImage.src = `resources/${this.selectedOptions[0].value}.jpg`\n  })\n\n// your function\nlet submitted = function(event) {\n    event.preventDefault();\n    console.log(\"Playing Story\");\n    playStory();\n    document.getElementById('main').style.display = 'none';\n    document.getElementById('clickOut').style.display = 'block';\n};\n\n// attach event listener\nform.addEventListener(\"submit\", submitted, true);\n\nif (text1) {\n    text1.onclick = function() {\n        character.value = 'Cassie';\n        characterImage.src = `resources/Cassie.jpg`\n\n        delay1.value = 10;\n        message1.value = 'you packed me the wrong go gurt again';\n\n        delay2.value = 5;\n        message2.value = \"you fucking idiot\";\n\n        delay3.value = 30;\n        message3.value = \"i hate you\";\n\n        document.getElementById('form1').style.display = 'block';\n        // playStory(1);\n    }\n}\n\nif (text2) {\n    text2.onclick = function() {\n        character.value = 'Jim';\n        characterImage.src = `resources/Jim.jpg`\n\n        delay1.value = 10;\n        message1.value = \"hey wanna hear a dumb joke\";\n        \n        delay2.value = 30;\n        message2.value = \"what do you get when you mix human DNA with goat DNA?\";\n        \n        delay3.value = 5;\n        message3.value = \"kicked out of the petting zoo LOL\";\n        document.getElementById('form1').style.display = 'block';\n    }\n}\n\nif (text3) {\n    text3.onclick = function() {\n        character.value = 'Jane';\n        characterImage.src = `resources/Jane.jpg`\n        message1.value = '';\n        message2.value = '';\n        message3.value = '';\n        document.getElementById('form1').style.display = 'block';\n    }\n}\n\nfunction playStory(){\n        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {\n            var activeTab = tabs[0];\n            chrome.scripting.executeScript({\n                target: { tabId: activeTab.id },\n                files: ['notifications.js']\n              }, function() {\n                chrome.tabs.sendMessage(activeTab.id, {\n                    \"character\": character.value,\n                    \"delay1\": delay1.value*1000,\n                    \"delay2\": delay2.value*1000,\n                    \"delay3\": delay3.value*1000,\n                    \"message1\": message1.value,\n                    \"message2\": message2.value,\n                    \"message3\": message3.value,\n                });\n            });\n        });\n}\n"
  },
  {
    "path": "popup.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <style>\n\n      .header {\n            font-size: 20px;\n            text-align:    center;\n        }\n\n        .storyContainer {\n            display:flex;\n            flex-direction: row;\n            justify-content:space-around;\n        }\n        button {\n          background: #3498db;\n          border-radius: 18px;\n          font-size: 14px;\n          color: #ffffff;\n        }\n\n        button:hover {\n          background: #3cb0fd;\n          background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);\n          background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);\n          background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);\n          background-image: -o-linear-gradient(top, #3cb0fd, #3498db);\n          background-image: linear-gradient(to bottom, #3cb0fd, #3498db);\n          text-decoration: none;\n        }\n\n        button:active {\n          box-shadow: 0 5px #666;\n          transform: translateY(4px);\n        }\n\n        #form1 {\n          display: none;\n        }\n\n        #addNotification {\n          display: none;\n        }\n\n        #clickOut {\n          display:none;\n        }\n\n        #characterImage {\n          width:20%;\n          border-radius: 50%;\n        }\n\n        .characterSelector{\n          display:flex;\n          align-items: center;\n          justify-content: space-between;\n          margin: 0px 12px;\n        }\n\n        .messageForm {\n          margin: 0px 12px;\n        }\n\n    </style>\n  </head>\n  <body>\n   <div id=\"main\">\n     <h2>Pushy!</h2>\n    <div class=\"header\">Pick a story!</div>\n    <br>\n      <div class=\"storyContainer\">\n        <button id=\"story1\">Cassie's Yoghurt Mixup</button>\n        <button id=\"story2\">Uncle Jims Dumb Joke</button>\n        <button id=\"story3\">Stinky!</button>\n        <button id=\"story4\">A Diaper Emergency</button>\n        <button id=\"story5\">Smize</button>\n        <button id=\"storyDIY\">Write your own!</button>\n      </div>\n\n      <br>\n      <br>\n\n      <div class=\"makeYourOwn\">\n        <form id=\"form1\">\n          <div class=\"characterSelector\">\n            <div>\n                <label for=\"Character\">Character:</label>\n                <select name=\"Character\" id=\"character\">\n                  <option value=\"Cassie\">Cassie</option>\n                  <option value=\"Jim\" selected>Uncle Jim</option>\n                  <option value=\"Roberto\">Roberto</option>\n                  <option value=\"Jane\">Jane</option>\n                </select>\n            </div>\n            <img src=\"resources/Cassie.jpg\" id=\"characterImage\">\n          </div>\n      <br>\n      <br>\n\n          <div class=\"messageForm\" id=\"messageForm\">\n            \n            <div id=\"notification1\">\n              <label for=\"delay1\">Time before notification 1:</label>\n              <br>\n              <select name=\"delay1\" id=\"delay1\">\n                <option value=\"5000\">5 Seconds</option>\n                <option value=\"10000\" selected>10 Seconds</option>\n                <option value=\"30000\">30 Seconds</option>\n                <option value=\"60000\">60 Seconds</option>\n              </select>\n              <br>\n                <label for=\"message1\">Write your message for notification 1:</label>\n                <input type=\"text\" id=\"message1\" name=\"message1\" value=\"\" style=\"width: 300px;\" maxlength=\"280\">\n            </div>\n            <br>\n          </div>\n          <input type=\"submit\" value=\"Send Notifications\">\n          <button type=\"button\" id= \"addNotification\" value=\"Add\"> Add Notification</button>\n        </form>\n    </div>\n\n    </div>\n\n    <div id=\"clickOut\">\n      Nice!\n      Click back to your website\n    </div>\n\n    \n  </body>\n</html>\n<script src=\"popup.js\"></script>"
  },
  {
    "path": "popup.js",
    "content": "let storyArray = document.querySelectorAll('[id*=\"story\"]');\n\nlet story1 = storyArray[0];\nlet story2 = storyArray[1];\nlet story3 = storyArray[2];\nlet story4 = storyArray[3];\nlet story5 = storyArray[4];\n\nlet storyDIY = document.getElementById(\"storyDIY\");\n\nlet delay1 = document.getElementById(\"delay1\");\nlet delay2 = document.getElementById(\"delay2\");\nlet delay3 = document.getElementById(\"delay3\");\n\nlet message1 = document.getElementById(\"message1\");\nlet message2 = document.getElementById(\"message2\");\nlet message3 = document.getElementById(\"message3\");\n\nlet notification1 = document.getElementById(\"notification1\");\nlet notification2 = document.getElementById(\"notification2\");\nlet notification3 = document.getElementById(\"notification3\");\n\nlet submit = document.getElementById(\"submit\");\n\nlet character = document.getElementById(\"character\");\nlet characterImage = document.getElementById('characterImage');\n\nlet addNotification = document.getElementById('addNotification');\n\nlet form = document.getElementById(\"form1\");\nlet messageForm = document.getElementById(\"messageForm\");\n\nlet notificationData = {};\n\nlet stories;\n\ncharacter.addEventListener('change', function() {\n    characterImage.src = `resources/${this.selectedOptions[0].value}.jpg`\n  })\n\n\n//   async function loadStories() {\n//     const response = await fetch('/resources/stories.json');\n//     stories = await response.json();\n//     console.log(stories); \n//     // logs [{ name: 'Joker'}, { name: 'Batman' }]\n//   }\n\n// your function\nlet submitted = function(event) {\n    event.preventDefault();\n    let notifArray = document.querySelectorAll('[id*=\"notification\"]');\n    console.log(notifArray.length);\n    notificationData['character'] = document.getElementById(\"character\").value\n    for(let i =0; i<notifArray.length; i++){\n        notificationData['delay' + (i+1)] = document.getElementById(['delay' + (i+1)]).value\n        notificationData['message' + (i+1)] = document.getElementById(['message' + (i+1)]).value    \n    }\n    playStory();\n    document.getElementById('main').style.display = 'none';\n    document.getElementById('clickOut').style.display = 'block';\n};\n\n// attach event listener\nform.addEventListener(\"submit\", submitted, true);\n\n// attach event listener\naddNotification.addEventListener(\"click\", add);\n\nif (story1) {\n    story1.onclick = function() {\n        notification1.style.display = 'block';\n        console.log(form.length)\n\n        if(form.length < 9){\n            generate(2);\n            generate(3);\n            \n            delay1 = document.getElementById(\"delay1\");\n            delay2 = document.getElementById(\"delay2\");\n            delay3 = document.getElementById(\"delay3\");\n\n            message1 = document.getElementById(\"message1\");\n            message2 = document.getElementById(\"message2\");\n            message3 = document.getElementById(\"message3\");\n        }\n        \n        addNotification.style.display = 'none';\n\n        character.value = 'Cassie';\n        characterImage.src = `resources/Cassie.jpg`\n\n        delay1.value = 10000;\n        message1.value = 'you packed me the wrong go gurt again';\n\n        delay2.value = 5000;\n        message2.value = \"you fucking idiot\";\n\n        delay3.value = 30000;\n        message3.value = \"but its okay i still love you\";\n\n        document.getElementById('form1').style.display = 'block';\n    }\n}\n\nif (story2) {\n    story2.onclick = function() {\n        notification1.style.display = 'block';\n        if(form.length < 9){\n            generate(2);\n            generate(3);\n\n            delay1 = document.getElementById(\"delay1\");\n            delay2 = document.getElementById(\"delay2\");\n            delay3 = document.getElementById(\"delay3\");\n\n            message1 = document.getElementById(\"message1\");\n            message2 = document.getElementById(\"message2\");\n            message3 = document.getElementById(\"message3\");\n        }\n\n\n        addNotification.style.display = 'none';\n\n        character.value = 'Jim';\n        characterImage.src = `resources/Jim.jpg`\n\n        delay1.value = 10000;\n        message1.value = \"hey wanna hear a dumb joke\";\n        \n        delay2.value = 30000;\n        message2.value = \"what do you get when you mix human DNA with goat DNA?\";\n        \n        delay3.value = 5000;\n        message3.value = \"kicked out of the petting zoo LOL\";\n        document.getElementById('form1').style.display = 'block';\n    }\n}\n\nif (story3) {\n    story3.onclick = function() {\n        notification1.style.display = 'block';\n\n        if(document.getElementById(\"notification2\")){\n            remove(\"notification2\");\n        }\n\n        if(document.getElementById(\"notification3\")){\n            remove(\"notification3\");\n        }\n\n        delay1 = document.getElementById(\"delay1\");\n        message1 = document.getElementById(\"message1\");\n\n        addNotification.style.display = 'none';\n\n        character.value = 'Jane';\n        characterImage.src = `resources/Jane.jpg`\n        message1.value = 'You stink like the tuna!';\n        document.getElementById('form1').style.display = 'block';\n    }\n}\n\nif (story4) {\n    story4.onclick = function() {\n        notification1.style.display = 'block';\n        console.log(form.length)\n\n        if(form.length < 9){\n            generate(2);\n            generate(3);\n            \n            delay1 = document.getElementById(\"delay1\");\n            delay2 = document.getElementById(\"delay2\");\n            delay3 = document.getElementById(\"delay3\");\n\n            message1 = document.getElementById(\"message1\");\n            message2 = document.getElementById(\"message2\");\n            message3 = document.getElementById(\"message3\");\n        }\n        \n        addNotification.style.display = 'none';\n\n        character.value = 'Roberto';\n        characterImage.src = `resources/Roberto.jpg`\n\n        delay1.value = 30000;\n        message1.value = 'he shat everywhere again';\n\n        delay2.value = 5000;\n        message2.value = \"its so liquidy\";\n\n        delay3.value = 5000;\n        message3.value = \"its liek if someone blended up a kitkat\";\n\n        document.getElementById('form1').style.display = 'block';\n    }\n}\n\nif (storyDIY) {\n    storyDIY.onclick = function() {\n        console.log(\"click on diy\")\n        notification1.style.display = 'block';\n        addNotification.style.display = 'block';\n\n        character.value = 'Jane';\n        characterImage.src = `resources/Jane.jpg`\n        message1.value = '';\n        document.getElementById('form1').style.display = 'block';\n    }\n}\n\nlet reqs_id = 1;\n\nfunction remove(stringID) {\nlet elem = document.getElementById(stringID);\n  elem.remove()\n}\n\nfunction add() {\n  reqs_id++; // increment reqs_id to get a unique ID for the new element\n\n  generate(reqs_id);\n}\n\nfunction generate(num){\n    console.log(\"generating\")\n    var dom = document.createElement('div');\n    let final_string = `<div id=\"notification${num}\">\n    <label for=\"delay${num}\">Time before notification ${num}:</label>\n    <br>\n    <select name=\"delay${num}\" id=\"delay${num}\">\n      <option value=\"5000\">5 Seconds</option>\n      <option value=\"10000\" selected>10 Seconds</option>\n      <option value=\"30000\">30 Seconds</option>\n      <option value=\"60000\">60 Seconds</option>\n    </select>\n    <br>\n      <label for=\"message${num}\">Write your message for notification ${num}:</label>\n      <input type=\"text\" id=\"message${num}\" name=\"message${num}\" value=\"\" style=\"width: 300px;\" maxlength=\"280\"><br><br>\n  </div>`\n    dom.innerHTML = final_string;\n\tmessageForm.appendChild(dom);\n}\n\nfunction playStory(){\n        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {\n            var activeTab = tabs[0];\n            chrome.scripting.executeScript({\n                target: { tabId: activeTab.id },\n                files: ['notifications.js']\n              }, function() {\n                  console.log(notificationData)\n                chrome.tabs.sendMessage(activeTab.id, notificationData);\n            });\n        });\n}\n"
  },
  {
    "path": "resources/stories.json",
    "content": "{\n    \"story1\":\n    {\n        \"character\":\"Cassie\",\n        \"delay1\":10000,\n        \"message1\": \"you packed me the wrong go gurt again\",\n        \"delay2\":5000,\n        \"message2\": \"you fucking idiot\",\n        \"delay3\":30000,\n        \"message3\": \"its okay i still love you\"\n    },\n\n    \"story2\":\n    {\n        \"character\":\"Jim\",\n        \"delay1\":10000,\n        \"message1\": \"hey wanna hear a joke\",\n        \"delay2\":30000,\n        \"message2\": \"what do you get when you mix human dna with goat dna\",\n        \"delay3\":5000,\n        \"message3\": \"kicked out of the petting zoo LOL\"\n    },\n\n    \"story3\":\n    {\n        \"character\":\"Jane\",\n        \"delay1\":10000,\n        \"message1\": \"You stink like the tuna!\"\n    }\n}"
  },
  {
    "path": "resources/style.css",
    "content": "@font-face {\n  font-family: \"SF-Light\";\n  src: url(\"SF-Light.otf\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"SF-Medium\";\n  src: url(\"SF-Medium.otf\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n.notificationBox {\n    width: 350pt;\n    border-radius: 16pt;\n    position:fixed;\n    top:10pt;\n    right:10%;\n    background-color: rgba(255, 255, 255, 0.6);\n    backdrop-filter: blur(15px);\n    box-shadow: 0px 0px 6px 0px #ccc;\n    border: 0px solid #ACACAC;\n    z-index: 99999999999999999;\n    color:black;\n}\n\n\n.imageContainer {\n  position: absolute;\n  top:0;\n  left:0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width:80pt;\n}\n\n.profilePic {\n    width:50%;\n    position: absolute;\n    left:14pt;\n    border-radius: 50%;\n    margin:0 !important;\n}\n\n.messageIcon {\n    width:25%;\n    position: relative;\n    top: 14pt;\n    left:12%;\n\n}\n\n.messageContainer{\n    margin-top: 15pt;\n    margin-bottom: 15pt;\n    align-content: space-between;\n    width:70%;\n}\n\n.title {\n    position: relative;\n    top:0pt;\n    left:70pt;\n    font-size:14pt;\n    font-family: \"SF-Medium\";\n}\n\n.message {\n    position: relative;\n    margin-top: 0pt;\n    left:70pt;\n    font-size:13pt;\n    display: -webkit-box;\n    line-height: 1.2;\n    font-family: \"SF-Light\";\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;  \n  overflow: hidden;\n}\n\n.slideIn {\n    -webkit-animation-name: cssAnimation;\n    -webkit-animation-duration: 0.3s;\n    -webkit-animation-timing-function: ease;\n    -webkit-animation-fill-mode: forwards;\n  }\n\n  .slideOut {\n    -webkit-animation-name: cssAnimation2;\n    -webkit-animation-duration: 0.3s;\n    -webkit-animation-timing-function: ease;\n    -webkit-animation-fill-mode: forwards;\n  }\n  \n  @-webkit-keyframes cssAnimation {\n    from {\n      -webkit-transform: translate(100%);\n    }\n    to {\n      -webkit-transform: translate(30%);\n    }\n  }\n\n  @-webkit-keyframes cssAnimation2 {\n    from {\n      -webkit-transform: translate(30%);\n    }\n    to {\n      -webkit-transform: translate(150%);\n    }\n  }\n  "
  }
]