diff --git a/background.js b/background.js
new file mode 100644
index 0000000..e167dcd
--- /dev/null
+++ 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);
+ }
+ }
+ });
+ }
+);
\ No newline at end of file
diff --git a/contentscript.js b/contentscript.js
new file mode 100644
index 0000000..e0ccbde
--- /dev/null
+++ 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!
+ }
+ });
\ No newline at end of file
diff --git a/main.html b/main.html
new file mode 100644
index 0000000..36ef660
--- /dev/null
+++ b/main.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
Desktop Notifications
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..4ab429d
--- /dev/null
+++ 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() {});
+ }
+};
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..0cc3ecd
--- /dev/null
+++ 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
+ }
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..780c3e7
--- /dev/null
+++ 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%;
+}
\ No newline at end of file