Added custom Plex URL(s) option, Fixed sonarr icon disappearing

Fixes #1, Fixes #3
danbovey · Dec 30, 2016 · 2992e43 · 2992e43
1 parent cd99eb5
commit 2992e43
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 1 deletion.
diff --git a/chrome/manifest.json b/chrome/manifest.json
@@ -10,6 +10,7 @@
 
   "permissions": [
     "storage",
+    "background",
     "*://app.plex.tv/*",
     "*://*/"
   ],

diff --git a/chrome/options.html b/chrome/options.html
@@ -30,6 +30,35 @@
         .help {
             margin-bottom: 0;
         }
+        #plex-url-list {
+            overflow-y: scroll;
+            height: 100px;
+            padding: 0;
+            border: 1px solid #BBB;
+            list-style: none;
+        }
+        #plex-url-list li {
+            padding: 6px 8px;
+        }
+        #plex-url-list li:nth-child(even) {
+            background: #F1F1F1;
+        }
+        #plex-url-list li button {
+            float: right;
+            width: 20px;
+            height: 14px;
+            min-width: auto;
+            min-height: auto;
+            padding: 0;
+            line-height: 0;
+        }
+        #new-plex-url {
+            width: 80%;
+        }
+        #add-plex-url {
+            float: right;
+            width: 5%;
+        }
     </style>
 </head>
 <body>
@@ -58,6 +87,12 @@ <h3>Time to poll Sonarr for activity (in seconds)</h3>
             <input type="number" id="poll">
         </div>
     </div>
+    <div class="group">
+        <h3>Plex URLs</h3>
+        <p>Manage the URLs you use to access Plex (i.e. localhost:32400). The extension will always run on <code>app.plex.tv</code>.</p>
+        <ul id="plex-url-list"></ul>
+        <input type="text" id="new-plex-url" placeholder="http://"><button type="button" id="add-plex-url">+</button>
+    </div>
     <div class="group">
         <button type="button" id="save">Save</button>
         <p id="status"></p>

diff --git a/js/background.js b/js/background.js
@@ -1,6 +1,27 @@
 const API = require('./api');
 const Storage = require('./storage');
 
+// Inject the content script into all User Plex URLs
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    Storage.load()
+        .then(options => {
+            const isInUserList = (url) => {
+                for(let u in options.plexUrls) {
+                    if(url.indexOf(options.plexUrls[u]) > -1) {
+                        return true;
+                    }
+                }
+
+                return false;
+            };
+
+            if(changeInfo.status == 'complete' && isInUserList(tab.url)) {
+                chrome.tabs.insertCSS(tabId, { file: 'css/style.css' })
+                chrome.tabs.executeScript(tabId, { file: 'js/content.js' });
+            }
+        });
+});
+
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if(request.options) {
         return chrome.tabs.create({ 'url': 'chrome://extensions/?options=' + chrome.runtime.id });

diff --git a/js/content.js b/js/content.js
@@ -8,6 +8,13 @@ injectShow(Page.openPage);
 const wait = () => {
     window.setTimeout(() => {
         if(document.querySelector('.nav-bar-right') != null) {
+            var ob = new MutationObserver(e => {
+                if(e[0].removedNodes) {
+                    window.setTimeout(init, 500);
+                }
+            });
+            ob.observe(document.querySelector('.nav-bar-right'), { childList: true });
+
             window.setTimeout(init, 500);
         } else {
             wait();

diff --git a/js/navbar.js b/js/navbar.js
@@ -1,6 +1,11 @@
 const Navbar = {
     create: (pageToggle) => {
         const navbar = document.querySelector('.nav-bar-right');
+
+        if(navbar.querySelector('.sonarr-btn')) {
+            return;
+        }
+
         const existingBtn = navbar.querySelector('.activity-btn').parentNode;
         const btn = existingBtn.cloneNode(true);
         btn.classList.remove('active');

diff --git a/js/options.js b/js/options.js
@@ -17,6 +17,44 @@ Storage.load()
             }
         }
 
+        const plexUrlList = document.querySelector('#plex-url-list');
+        const plexUrls = {
+            list: options.plexUrls,
+            add: (url) => {
+                plexUrls.list.push(url);
+                plexUrls.update();
+            },
+            remove: (url) => {
+                const index = plexUrls.list.indexOf(url);
+                if(index > -1) {
+                    plexUrls.list.splice(index, 1);
+                }
+                plexUrls.update();
+            },
+            update: () => {
+                while(plexUrlList.hasChildNodes()) {
+                    plexUrlList.removeChild(plexUrlList.lastChild);
+                }
+                for(let u in plexUrls.list) {
+                    const item = document.createElement('li');
+                    item.textContent = options.plexUrls[u];
+                    const removeBtn = document.createElement('button');
+                    removeBtn.textContent = 'x';
+                    removeBtn.addEventListener('click', plexUrls.remove.bind(null, plexUrls.list[u]));
+                    item.appendChild(removeBtn);
+                    plexUrlList.appendChild(item);
+                }
+            }
+        };
+        plexUrls.update();
+
+        const newPlexUrl = document.querySelector('#new-plex-url');
+        const plexUrlBtn = document.querySelector('#add-plex-url');
+        plexUrlBtn.addEventListener('click', () => {
+            plexUrls.add(newPlexUrl.value);
+            newPlexUrl.value = '';
+        });
+
         submit.addEventListener('click', e => {
             for(let name in inputs) {
                 options.api[name] = inputs[name].value;

diff --git a/js/storage.js b/js/storage.js
@@ -4,7 +4,8 @@ let options = {
         base: 'http://localhost:8989',
         sonarr_base: '',
         poll: 60
-    }
+    },
+    plexUrls: []
 };
 
 const Storage = {