Merge branch 'master' of https://github.com/Sudoblark/Doggify-Firefox

beautiful-doggos.js

@@ -3,7 +3,6 @@ function GetDoggoPreference() {
         var getting = browser.storage.sync.get("PreferredBreed");
         getting.then(function(result) {
             var PreferredBreedIndex = result.PreferredBreed
-            console.log(`PreferredBreed: ${PreferredBreedIndex}`)
             return resolve(PreferredBreedIndex)
         })
     })
@@ -19,7 +18,6 @@ function ReturnDoggoURL(result) {
             // otherwise construct the appropriate string and then return this
             var url = "https://dog.ceo/api/breed/" + result + "/images/random"
         }
-        console.log(`Doggo URL: ${url}`)
         return resolve(url)
     })
 }
@@ -58,7 +56,7 @@ function ReplaceImageURL(BaseURL, image) {
     })
 }
 
-function ReplaceImages(DoggoUrl) {
+function ReplaceImages() {
     // find all images on page
     var imageCollection = document.images
     var imageCollectionLength = imageCollection.length
@@ -88,6 +86,21 @@ function GetContinousDoggoSetting() {
     })
 }
 
+function CheckImage(image) {
+    try {
+        // convert to string
+        var imageString = image.src.toString()
+        // check if already doggo
+        var isDoggo = imageString.includes("https://images.dog.ceo/breeds/")
+        // return opposite as we only want to return images that are not doggos
+        return !isDoggo
+    } catch {
+        // if for whatever reason we fail then do not update the image
+        return false
+    }
+
+}
+
 GetContinousDoggoSetting().then(function(value) {
     var ContinousDoggos = false
     if ((value != null) && (value != false)) {
@@ -97,15 +110,28 @@ GetContinousDoggoSetting().then(function(value) {
     if (ContinousDoggos != false)  {
         console.log("continousDoggos set to TRUE")
         // First populate the url for doggos then replace all images
-        GetDoggoPreference().then(ReturnDoggoURL).then(ReplaceImages)
+        ReplaceImages()
+        // then create a timer so new images are replaced
+        window.setInterval((function() {   
+            // get htmlcollection
+            var imageCollection = document.images
+            for (let image of imageCollection) {
+                // Check if image should be replaced
+                var imageCheck = CheckImage(image)
+                if (imageCheck) {
+                // Replace src
+                GetDoggoPreference().then(ReturnDoggoURL).then(function(url) {
+                    ReplaceImageURL(url, image)})
+                }
+            }
+        }),1000)
+
     } else {
         // Otherwise do not
         console.log("continousDoggos set to FALSE")
     }
-
 })
 
-
 // Add listener for info passed from doggify contextmenu click
 browser.runtime.onMessage.addListener(request => {
     // Check if valid URL is passed back

readme.md

@@ -22,7 +22,9 @@ Uses the [dog-ceo-api](https://dog.ceo/dog-api/) by [ElliottLandsborough](https:
 
 ## Overview
 ### Continous Doggos
-When enabled the plugin will automatically replace all images on a webpage with dogs.
+When enabled the plugin will automatically replace all images on a webpage with dogs. 
+
+It will then check for pictures not populated by the extension every second, and replace these with dog pictures. This should mean that images dynamically injected into the page are replaced with dogs relatively quickly.
 
 Say for example someone is searching for some nasty cades on google images. Normally, they would see something similar to this:
 
@@ -50,7 +52,7 @@ This can be accessed in firefox by going to "options > addons > extensions > dog
 Remember to "save" when you make changes to the settings menu!
 
 ## Future Plans
-- Every x seconds search the current webpage for non-doggo images and replace them, this will ensure dynamically loaded cades are replaced with doggos
+- Dynamically resize dog image 
 
 ## Setup Checklist
 
@@ -61,11 +63,25 @@ Simply add the extension in Firefox: https://addons.mozilla.org/en-GB/firefox/ad
 - Open the [about:debugging](https://developer.mozilla.org/en-US/docs/Tools/about:debugging) page in Firefox
 - Navigate to the repo and select the ```manifest.json``` file
 - Select "Inspect" to see the web console for the settings page
-- Continous doggos loads via a content script injected onto the page, so first you'll need to open a web console on that page and then refresh to see the console
 
 Note: Adding an extension via the method above only adds it for that session of Firefox; if you close then start Firefox again the Doggify extension will not be loaded.
 
-Any changes you make to existing files should update automatically on a refresh, although sometimes you'll need to close and open Firefox again.
+Any changes you make to existing files should update automatically on a page refresh, although sometimes you'll need to close and open Firefox again.
+
+### Extension Anatomy
+
+[beautiful-doggos](beautiful-doggos.js) is the content script injected into webpages that:
+- First replaces all images with dogs if continous doggos is enabled
+- Sets up a timer to replace all non-dog images every second is continous doggos is enabled
+- Listens for requests from the background script
+
+[background](background.js) is the background script, it will:
+- Create the "Doggify me!" context menu
+- Sends messages to the content script on context menu click
+
+The [icons](icons) folder contains icons for the entire extension to consumed by the manifest and context menu items
+
+The [settings](settings) folder contains [HTML](settings/settings.html)/[CSS](settings/settings.css)/[JS](settings/settings.js) relating to the settings page displayed to the user via addons > extensions > Doggify > options. It uses ```browser.storage.sync.set``` to set preferences, whilst the background script uses ``` browser.storage.sync.get``` to get these preferences.
 
 ## Compatibility
 - The iteration of images HTMLCollection is done via the following syntax: