diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5eaee41 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/.gradle +/.idea +build \ No newline at end of file diff --git a/beasts/frog.jpg b/beasts/frog.jpg new file mode 100644 index 0000000..6ebf852 Binary files /dev/null and b/beasts/frog.jpg differ diff --git a/beasts/snake.jpg b/beasts/snake.jpg new file mode 100644 index 0000000..be459b7 Binary files /dev/null and b/beasts/snake.jpg differ diff --git a/beasts/turtle.jpg b/beasts/turtle.jpg new file mode 100644 index 0000000..9d62d39 Binary files /dev/null and b/beasts/turtle.jpg differ diff --git a/build.gradle b/build.gradle new file mode 100644 index 0000000..c16be97 --- /dev/null +++ b/build.gradle @@ -0,0 +1,30 @@ +buildscript { + ext.kotlin_version = '1.1.60' + + repositories { + mavenCentral() + } + dependencies { + classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" + } +} + +version '1.0-SNAPSHOT' + +allprojects { + apply plugin: 'kotlin2js' + apply plugin: 'kotlin-dce-js' + + repositories { + mavenCentral() + } + + dependencies { + compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" + } + + compileKotlin2Js { + kotlinOptions.sourceMap = true + kotlinOptions.sourceMapEmbedSources = "always" + } +} \ No newline at end of file diff --git a/content_script/src/main/kotlin/content_script.kt b/content_script/src/main/kotlin/content_script.kt new file mode 100644 index 0000000..cab4792 --- /dev/null +++ b/content_script/src/main/kotlin/content_script.kt @@ -0,0 +1,41 @@ +import org.w3c.dom.HTMLElement +import org.w3c.dom.asList +import org.w3c.dom.get +import kotlin.browser.document +import kotlin.browser.window + +fun main(args: Array) { + if (window["hasRun"] == true) { + return + } + window.asDynamic()["hasRun"] = true + + browser.runtime.onMessage.addListener { message -> + if (message.command === "beastify") { + insertBeast(message.beastURL) + } else if (message.command === "reset") { + removeExistingBeasts() + } + } +} + +fun insertBeast(beastURL: String) { + removeExistingBeasts() + + val beastImage = document.createElement("img") as HTMLElement + beastImage.run { + setAttribute("src", beastURL) + style.height = "100vh" + className = "beastify-image" + } + + document.body?.appendChild(beastImage) +} + +fun removeExistingBeasts() { + val existingBeasts = document.querySelectorAll(".beastify-image") + + for (beast in existingBeasts.asList()) { + beast.parentNode?.removeChild(beast) + } +} \ No newline at end of file diff --git a/content_script/src/main/kotlin/helpers.kt b/content_script/src/main/kotlin/helpers.kt new file mode 100644 index 0000000..4113c3d --- /dev/null +++ b/content_script/src/main/kotlin/helpers.kt @@ -0,0 +1 @@ +external val browser: dynamic \ No newline at end of file diff --git a/gradle.properties b/gradle.properties new file mode 100644 index 0000000..5711a98 --- /dev/null +++ b/gradle.properties @@ -0,0 +1 @@ +kotlin.incremental.js=false \ No newline at end of file diff --git a/gradle/wrapper/gradle-wrapper.jar b/gradle/wrapper/gradle-wrapper.jar new file mode 100644 index 0000000..6733908 Binary files /dev/null and b/gradle/wrapper/gradle-wrapper.jar differ diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties new file mode 100644 index 0000000..3bffae5 --- /dev/null +++ b/gradle/wrapper/gradle-wrapper.properties @@ -0,0 +1,6 @@ +#Sun Nov 19 14:32:19 CET 2017 +distributionBase=GRADLE_USER_HOME +distributionPath=wrapper/dists +zipStoreBase=GRADLE_USER_HOME +zipStorePath=wrapper/dists +distributionUrl=https\://services.gradle.org/distributions/gradle-4.3.1-bin.zip diff --git a/gradlew b/gradlew new file mode 100644 index 0000000..cccdd3d --- /dev/null +++ b/gradlew @@ -0,0 +1,172 @@ +#!/usr/bin/env sh + +############################################################################## +## +## Gradle start up script for UN*X +## +############################################################################## + +# Attempt to set APP_HOME +# Resolve links: $0 may be a link +PRG="$0" +# Need this for relative symlinks. +while [ -h "$PRG" ] ; do + ls=`ls -ld "$PRG"` + link=`expr "$ls" : '.*-> \(.*\)$'` + if expr "$link" : '/.*' > /dev/null; then + PRG="$link" + else + PRG=`dirname "$PRG"`"/$link" + fi +done +SAVED="`pwd`" +cd "`dirname \"$PRG\"`/" >/dev/null +APP_HOME="`pwd -P`" +cd "$SAVED" >/dev/null + +APP_NAME="Gradle" +APP_BASE_NAME=`basename "$0"` + +# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +DEFAULT_JVM_OPTS="" + +# Use the maximum available, or set MAX_FD != -1 to use that value. +MAX_FD="maximum" + +warn () { + echo "$*" +} + +die () { + echo + echo "$*" + echo + exit 1 +} + +# OS specific support (must be 'true' or 'false'). +cygwin=false +msys=false +darwin=false +nonstop=false +case "`uname`" in + CYGWIN* ) + cygwin=true + ;; + Darwin* ) + darwin=true + ;; + MINGW* ) + msys=true + ;; + NONSTOP* ) + nonstop=true + ;; +esac + +CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar + +# Determine the Java command to use to start the JVM. +if [ -n "$JAVA_HOME" ] ; then + if [ -x "$JAVA_HOME/jre/sh/java" ] ; then + # IBM's JDK on AIX uses strange locations for the executables + JAVACMD="$JAVA_HOME/jre/sh/java" + else + JAVACMD="$JAVA_HOME/bin/java" + fi + if [ ! -x "$JAVACMD" ] ; then + die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." + fi +else + JAVACMD="java" + which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." +fi + +# Increase the maximum file descriptors if we can. +if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then + MAX_FD_LIMIT=`ulimit -H -n` + if [ $? -eq 0 ] ; then + if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then + MAX_FD="$MAX_FD_LIMIT" + fi + ulimit -n $MAX_FD + if [ $? -ne 0 ] ; then + warn "Could not set maximum file descriptor limit: $MAX_FD" + fi + else + warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" + fi +fi + +# For Darwin, add options to specify how the application appears in the dock +if $darwin; then + GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" +fi + +# For Cygwin, switch paths to Windows format before running java +if $cygwin ; then + APP_HOME=`cygpath --path --mixed "$APP_HOME"` + CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` + JAVACMD=`cygpath --unix "$JAVACMD"` + + # We build the pattern for arguments to be converted via cygpath + ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` + SEP="" + for dir in $ROOTDIRSRAW ; do + ROOTDIRS="$ROOTDIRS$SEP$dir" + SEP="|" + done + OURCYGPATTERN="(^($ROOTDIRS))" + # Add a user-defined pattern to the cygpath arguments + if [ "$GRADLE_CYGPATTERN" != "" ] ; then + OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" + fi + # Now convert the arguments - kludge to limit ourselves to /bin/sh + i=0 + for arg in "$@" ; do + CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` + CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option + + if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition + eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` + else + eval `echo args$i`="\"$arg\"" + fi + i=$((i+1)) + done + case $i in + (0) set -- ;; + (1) set -- "$args0" ;; + (2) set -- "$args0" "$args1" ;; + (3) set -- "$args0" "$args1" "$args2" ;; + (4) set -- "$args0" "$args1" "$args2" "$args3" ;; + (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; + (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; + (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; + (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; + (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; + esac +fi + +# Escape application args +save () { + for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done + echo " " +} +APP_ARGS=$(save "$@") + +# Collect all arguments for the java command, following the shell quoting and substitution rules +eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" + +# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong +if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then + cd "$(dirname "$0")" +fi + +exec "$JAVACMD" "$@" diff --git a/gradlew.bat b/gradlew.bat new file mode 100644 index 0000000..f955316 --- /dev/null +++ b/gradlew.bat @@ -0,0 +1,84 @@ +@if "%DEBUG%" == "" @echo off +@rem ########################################################################## +@rem +@rem Gradle startup script for Windows +@rem +@rem ########################################################################## + +@rem Set local scope for the variables with windows NT shell +if "%OS%"=="Windows_NT" setlocal + +set DIRNAME=%~dp0 +if "%DIRNAME%" == "" set DIRNAME=. +set APP_BASE_NAME=%~n0 +set APP_HOME=%DIRNAME% + +@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +set DEFAULT_JVM_OPTS= + +@rem Find java.exe +if defined JAVA_HOME goto findJavaFromJavaHome + +set JAVA_EXE=java.exe +%JAVA_EXE% -version >NUL 2>&1 +if "%ERRORLEVEL%" == "0" goto init + +echo. +echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. +echo. +echo Please set the JAVA_HOME variable in your environment to match the +echo location of your Java installation. + +goto fail + +:findJavaFromJavaHome +set JAVA_HOME=%JAVA_HOME:"=% +set JAVA_EXE=%JAVA_HOME%/bin/java.exe + +if exist "%JAVA_EXE%" goto init + +echo. +echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% +echo. +echo Please set the JAVA_HOME variable in your environment to match the +echo location of your Java installation. + +goto fail + +:init +@rem Get command-line arguments, handling Windows variants + +if not "%OS%" == "Windows_NT" goto win9xME_args + +:win9xME_args +@rem Slurp the command line arguments. +set CMD_LINE_ARGS= +set _SKIP=2 + +:win9xME_args_slurp +if "x%~1" == "x" goto execute + +set CMD_LINE_ARGS=%* + +:execute +@rem Setup the command line + +set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar + +@rem Execute Gradle +"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% + +:end +@rem End local scope for the variables with windows NT shell +if "%ERRORLEVEL%"=="0" goto mainEnd + +:fail +rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of +rem the _cmd.exe /c_ return code! +if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 +exit /b 1 + +:mainEnd +if "%OS%"=="Windows_NT" endlocal + +:omega diff --git a/icons/LICENSE b/icons/LICENSE new file mode 100644 index 0000000..9a206f8 --- /dev/null +++ b/icons/LICENSE @@ -0,0 +1,4 @@ + +The icon "beasts-32.png" is taken from the IconBeast Lite iconset, and used under the terms of its license (http://www.iconbeast.com/faq/), with a link back to the website: http://www.iconbeast.com/free/. + +The icon "beasts-48.png" is taken from Aha-Soft’s Free Retina iconset, and used under the terms of its license (http://www.aha-soft.com/free-icons/free-retina-icon-set/), with a link back to the website: http://www.aha-soft.com/. diff --git a/icons/beasts-32-light.png b/icons/beasts-32-light.png new file mode 100644 index 0000000..dbed714 Binary files /dev/null and b/icons/beasts-32-light.png differ diff --git a/icons/beasts-32.png b/icons/beasts-32.png new file mode 100644 index 0000000..89863cc Binary files /dev/null and b/icons/beasts-32.png differ diff --git a/icons/beasts-48.png b/icons/beasts-48.png new file mode 100644 index 0000000..c3f0924 Binary files /dev/null and b/icons/beasts-48.png differ diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..81f8865 --- /dev/null +++ b/manifest.json @@ -0,0 +1,33 @@ +{ + + "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify", + "manifest_version": 2, + "name": "Beastify", + "version": "1.0", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify", + "icons": { + "48": "icons/beasts-48.png" + }, + + "permissions": [ + "activeTab" + ], + + "browser_action": { + "default_icon": "icons/beasts-32.png", + "theme_icons": [{ + "light": "icons/beasts-32-light.png", + "dark": "icons/beasts-32.png", + "size": 32 + }], + "default_title": "Beastify", + "default_popup": "popup/choose_beast.html" + }, + + "web_accessible_resources": [ + "beasts/frog.jpg", + "beasts/turtle.jpg", + "beasts/snake.jpg" + ] + +} diff --git a/popup/choose_beast.css b/popup/choose_beast.css new file mode 100644 index 0000000..db4c5a5 --- /dev/null +++ b/popup/choose_beast.css @@ -0,0 +1,31 @@ +html, body { + width: 100px; +} + +.hidden { + display: none; +} + +.button { + margin: 3% auto; + padding: 4px; + text-align: center; + font-size: 1.5em; + cursor: pointer; +} + +.beast:hover { + background-color: #CFF2F2; +} + +.beast { + background-color: #E5F2F2; +} + +.reset { + background-color: #FBFBC9; +} + +.reset:hover { + background-color: #EAEA9D; +} diff --git a/popup/choose_beast.html b/popup/choose_beast.html new file mode 100644 index 0000000..2d2e96a --- /dev/null +++ b/popup/choose_beast.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + diff --git a/popup/choose_beast.js b/popup/choose_beast.js new file mode 100644 index 0000000..8caac4c --- /dev/null +++ b/popup/choose_beast.js @@ -0,0 +1,102 @@ +/** + * CSS to hide everything on the page, + * except for elements that have the "beastify-image" class. + */ +const hidePage = `body > :not(.beastify-image) { + display: none; + }`; + +/** + * Listen for clicks on the buttons, and send the appropriate message to + * the content script in the page. + */ +function listenForClicks() { + document.addEventListener("click", (e) => { + + /** + * Given the name of a beast, get the URL to the corresponding image. + */ + function beastNameToURL(beastName) { + switch (beastName) { + case "Frog": + return browser.extension.getURL("beasts/frog.jpg"); + case "Snake": + return browser.extension.getURL("beasts/snake.jpg"); + case "Turtle": + return browser.extension.getURL("beasts/turtle.jpg"); + } + } + + /** + * Insert the page-hiding CSS into the active tab, + * then get the beast URL and + * send a "beastify" message to the content script in the active tab. + */ + function beastify(tabs) { + browser.tabs.insertCSS({code: hidePage}).then(() => { + let url = beastNameToURL(e.target.textContent); + browser.tabs.sendMessage(tabs[0].id, { + command: "beastify", + beastURL: url + }); + }); + } + + /** + * Remove the page-hiding CSS from the active tab, + * send a "reset" message to the content script in the active tab. + */ + function reset(tabs) { + browser.tabs.removeCSS({code: hidePage}).then(() => { + browser.tabs.sendMessage(tabs[0].id, { + command: "reset", + }); + }); + } + + /** + * Just log the error to the console. + */ + function reportError(error) { + console.error(`Could not beastify: ${error}`); + } + + /** + * Get the active tab, + * then call "beastify()" or "reset()" as appropriate. + */ + if (e.target.classList.contains("beast")) { + browser.tabs.query({active: true, currentWindow: true}) + .then(beastify) + .catch(reportError); + } + else if (e.target.classList.contains("reset")) { + browser.tabs.query({active: true, currentWindow: true}) + .then(reset) + .catch(reportError); + } + }); +} + +/** + * There was an error executing the script. + * Display the popup's error message, and hide the normal UI. + */ +function reportExecuteScriptError(error) { + document.querySelector("#popup-content").classList.add("hidden"); + document.querySelector("#error-content").classList.remove("hidden"); + console.error(`Failed to execute beastify content script: ${error.message}`); +} + +/** + * When the popup loads, inject a content script into the active tab, + * and add a click handler. + * If we couldn't inject the script, handle the error. + */ +browser.tabs.executeScript({file: "/content_script/build/classes/kotlin/main/min/kotlin.js"}) + .then(() => { + browser.tabs.executeScript({file: "/content_script/build/classes/kotlin/main/min/content_script.js"}) + .then(listenForClicks) + .catch(reportExecuteScriptError); + }) + .catch(reportExecuteScriptError); diff --git a/popup/src/main/kotlin/helpers.kt b/popup/src/main/kotlin/helpers.kt new file mode 100644 index 0000000..9efece3 --- /dev/null +++ b/popup/src/main/kotlin/helpers.kt @@ -0,0 +1,31 @@ +import kotlin.js.Promise + +external val browser: Browser + +external class Browser { + val tabs: Tabs + val extension: Extension +} + +external class Tabs { + fun executeScript(def: ScriptDefinition) : Promise> + fun insertCSS(details: CssDetails): Promise + fun removeCSS(details: CssDetails): Promise + fun sendMessage(id: Int, any: Any): Any + fun query(info: QueryInfo) : Promise> +} + +external class Extension { + fun getURL(s: String): String +} + +class Tab(val id: Int) + +class ScriptDefinition(val file: String) +class CssDetails(val code: String) +class QueryInfo(active: Boolean, currentWindow: Boolean) + +external open class Object { +} + +fun jsObject(init: dynamic.() -> Unit): dynamic = (Object()).apply(init) \ No newline at end of file diff --git a/popup/src/main/kotlin/popup.kt b/popup/src/main/kotlin/popup.kt new file mode 100644 index 0000000..b374e01 --- /dev/null +++ b/popup/src/main/kotlin/popup.kt @@ -0,0 +1,76 @@ +import org.w3c.dom.Element +import kotlin.browser.document + +const val hidePage = """ + body > :not(.beastify-image) { + display: none; + } +""" + +const val scriptPath = "/content_script/build/classes/kotlin/main/min" + +fun listenForClicks() { + document.addEventListener("click", { e -> + + val target = e.target as Element + + fun beastNameToURL(beastName: String) = when (beastName) { + "Frog" -> browser.extension.getURL("beasts/frog.jpg") + "Snake" -> browser.extension.getURL("beasts/snake.jpg") + "Turtle" -> browser.extension.getURL("beasts/turtle.jpg") + else -> null + } + + fun beastify(tabs: Array) { + browser.tabs.insertCSS(CssDetails(hidePage)) + .then({ + val url = beastNameToURL(target.textContent as String) + browser.tabs.sendMessage(tabs[0].id, jsObject { + command = "beastify" + beastURL = url + }) + }) + } + + fun reset(tabs: Array) { + browser.tabs.removeCSS(CssDetails(hidePage)) + .then({ + browser.tabs.sendMessage(tabs[0].id, jsObject { + command = "reset" + }) + }) + } + + fun reportError(error: Any) { + console.error("Could not beastify: $error") + } + + + val callback = when { + target.classList.contains("beast") -> ::beastify + target.classList.contains("reset") -> ::reset + else -> return@addEventListener + } + + browser.tabs.query(QueryInfo(active = true, currentWindow = true)) + .then(callback) + .catch(::reportError) + }) +} + +fun reportExecuteScriptError(error: Throwable) { + document.querySelector("#popup-content")?.classList?.add("hidden") + document.querySelector("#error-content")?.classList?.remove("hidden") + console.error("Failed to execute beastify content script: ${error.message}") +} + + +fun main(args: Array) { + browser.tabs.executeScript(ScriptDefinition("$scriptPath/kotlin.js")) + .then({ + browser.tabs.executeScript(ScriptDefinition("$scriptPath/content_script.js")) + .then({ listenForClicks() }) + }) + .catch(::reportExecuteScriptError) +} + diff --git a/settings.gradle b/settings.gradle new file mode 100644 index 0000000..5a17def --- /dev/null +++ b/settings.gradle @@ -0,0 +1,3 @@ +rootProject.name = 'kt-beastify' + +include ':popup', ':content_script'