Scripts for main features

5 years ago · fcbf554bac
6 changed files with 289 additions and 0 deletions
--- a/background.js
+++ b/background.js
@ -0,0 +1,64 @@
+chrome.runtime.onInstalled.addListener(function() {
+    chrome.storage.sync.set({'switchValue': false}, function() {
+      console.log("Switch is "+false);
+    });
+    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
+        chrome.declarativeContent.onPageChanged.addRules([{
+          conditions: [new chrome.declarativeContent.PageStateMatcher({
+            pageUrl: {hostEquals: 'music.youtube.com'},
+          })
+          ],
+              actions: [new chrome.declarativeContent.ShowPageAction()]
+        }]);
+    });
+});
+
+chrome.tabs.onUpdated.addListener(
+    function(tabId, changeInfo, tab) {
+        chrome.storage.sync.get('switchValue', function(data) {
+            value = data.switchValue;
+            if(value){
+                const code = `(function getUrls(){
+                    const songName = document.querySelector('yt-formatted-string[class="title style-scope ytmusic-player-bar"]') 
+                      ? document.querySelector('yt-formatted-string[class="title style-scope ytmusic-player-bar"]').title
+                      : undefined;
+                    const songInfo = document.querySelector('yt-formatted-string[class="byline style-scope ytmusic-player-bar complex-string"]') 
+                      ? document.querySelector('yt-formatted-string[class="byline style-scope ytmusic-player-bar complex-string"]').title
+                      : undefined;
+                    return { songName, songInfo };
+                })()`;
+
+                const ytmusicURLs = ['www.music.youtube.com','music.youtube.com'];
+                if(tab.status == 'complete' && ytmusicURLs.some(url => tab.url.includes(url))){
+                    setTimeout(() => {
+                        chrome.tabs.executeScript(tabId, { code }, function(result) {
+                            const { songName, songInfo } = result[0];
+                            notHandle = true;
+                            chrome.storage.sync.get('oldSongInfo', function(songData) {
+                                if(songData.oldSongInfo.localeCompare(`${songName}\n${songInfo}`)===0){
+                                    notHandle = false;
+                                }
+                                else{
+                                    notHandle = true;
+                                }
+                                if(songName!=undefined && songInfo!=undefined && notHandle){
+                                    chrome.storage.sync.set({'oldSongInfo': `${songName}\n${songInfo}`});
+                                    function getNotificationId() {
+                                        var id = Math.floor(Math.random() * 9007199254740992) + 1;
+                                        return id.toString();
+                                    }
+                                    chrome.notifications.create(getNotificationId(), {
+                                        title: 'Now Playing',
+                                        iconUrl: 'icon128.png',
+                                        type: 'basic',
+                                        message: `${songName}\n${songInfo}`
+                                    }, function() {});
+                                }
+                            });
+                        });
+                    }, 2000);
+                }
+            }
+        });
+    }
+);
--- a/contentscript.js
+++ b/contentscript.js
@ -0,0 +1,7 @@
+chrome.runtime.onMessage.addListener(
+    function(request, sender, sendResponse) {
+      // listen for messages sent from background.js
+      if (request.message === 'hello!') {
+        console.log(request.url) // new url is now in content scripts!
+      }
+  });
--- a/main.html
+++ b/main.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+    <div class="header"><b>ytMusicNotification</b></div>
+    </br>
+    <div class="toggleContainer">
+        <div class="toggleText"><span>Desktop Notifications</span></div>
+        <div class="toggleButton">
+            <label class="switch">
+                <input type="checkbox" id="toggleButton">
+                <span class="slider round"></span>
+            </label>
+            <script src="main.js"></script>
+        </div>
+    </div>
+    </br>
+    <div class="footer">
+        <a href="https://github.com/fazilaltinel/ytMusicNotification">Source Code</a>
+    </div>
+  </body>
+</html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,36 @@
+let toggleButton = document.getElementById('toggleButton');
+
+chrome.storage.sync.get('switchValue', function(data) {
+    toggleButton.checked = data.switchValue;
+});
+
+toggleButton.onclick = function(element) {
+    let value = this.checked;
+    chrome.storage.sync.set({'switchValue': value}, function() {
+        console.log("Switch is " + value);
+    });
+    if(value) {
+        function getNotificationId() {
+            var id = Math.floor(Math.random() * 9007199254740992) + 1;
+            return id.toString();
+        }
+        chrome.notifications.create(getNotificationId(), {
+            title: 'ytMusicNotification',
+            iconUrl: 'icon128.png',
+            type: 'basic',
+            message: 'The extension is active.'
+        }, function() {});
+    }
+    else{
+        function getNotificationId() {
+            var id = Math.floor(Math.random() * 9007199254740992) + 1;
+            return id.toString();
+        }
+        chrome.notifications.create(getNotificationId(), {
+            title: 'ytMusicNotification',
+            iconUrl: 'icon128.png',
+            type: 'basic',
+            message: 'The extension is inactive.'
+        }, function() {});
+    }
+};
--- a/manifest.json
+++ b/manifest.json
@ -0,0 +1,15 @@
+{
+    "name": "ytMusicNotification",
+    "version": "1.0",
+    "description": "Youtube Music Desktop Notification Extension for Chrome",
+    "permissions": ["tabs", "http://music.youtube.com/*", "https://music.youtube.com/*", "notifications", "activeTab", "declarativeContent", "storage"],
+    "icons": { "128": "icon128.png" },
+    "background": {
+        "scripts": ["background.js"],
+        "persistent": false
+    },
+    "page_action": {
+        "default_popup": "main.html"
+    },
+    "manifest_version": 2
+  }
--- a/style.css
+++ b/style.css
@ -0,0 +1,143 @@
+body {
+   height: 80px;
+   width: 200px;
+   background-color: #35363a;
+   color: azure;
+}
+
+.header{ 
+   position: fixed;     
+   text-align: center;    
+   top: 5px; 
+   width: 100%;
+}
+
+.footer{ 
+   position: fixed;     
+   text-align: center;    
+   bottom: 0px; 
+   width: 100%;
+}
+
+.toggleContainer{
+   display: flex;
+   align-items: center;
+}
+
+.toggleText{
+   padding: 1px;
+}
+
+.toggleButton{
+   padding: 20px 1px;
+}
+
+a {
+   outline: none;
+   text-decoration: none;
+   padding: 2px 1px 0;
+ }
+ 
+ a:link {
+   color: #5eca05;
+ }
+ 
+ a:visited {
+   color: #437A16;
+ }
+ 
+ a:focus {
+   border-bottom: 1px solid;
+   background: #BAE498;
+ }
+ 
+ a:hover {
+   border-bottom: 1px solid;     
+   background: #CDFEAA;
+ }
+ 
+ a:active {
+   background: #265301;
+   color: #CDFEAA;
+ }
+
+/* The switch - the box around the slider */
+.switch {
+   position: relative;
+   display: inline-block;
+   width: 85px;
+   height: 34px;
+}
+ 
+/* Hide default HTML checkbox */
+.switch input {
+   opacity: 0;
+   width: 0;
+   height: 0;
+}
+ 
+/* The slider */
+.slider {
+   position: absolute;
+   cursor: pointer;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   background-color: #ccc;
+   -webkit-transition: .4s;
+   transition: .4s;
+}
+ 
+.slider:before {
+   position: absolute;
+   content: "";
+   height: 26px;
+   width: 26px;
+   left: 4px;
+   bottom: 4px;
+   background-color: white;
+   -webkit-transition: .4s;
+   transition: .4s;
+}
+ 
+input:checked + .slider {
+   background-color: #2196F3;
+}
+ 
+input:focus + .slider {
+   box-shadow: 0 0 1px #2196F3;
+}
+ 
+input:checked + .slider:before {
+   -webkit-transform: translateX(52px);
+   -ms-transform: translateX(52px);
+   transform: translateX(52px);
+}
+
+.slider:after
+{
+   content:'OFF';
+   color: white;
+   display: block;
+   position: absolute;
+   transform: translate(-50%,-50%);
+   top: 50%;
+   left: 50%;
+   font-size: 10px;
+   font-family: Verdana, sans-serif;
+}
+
+input:checked + .slider:after
+{  
+   content:'ON';
+}
+ 
+/* Rounded sliders */
+.slider.round {
+   border-radius: 34px;
+}
+ 
+.slider.round:before {
+   border-radius: 50%;
+}