You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@senssoft.apache.org by fo...@apache.org on 2017/06/07 18:20:25 UTC
incubator-senssoft-useralejs git commit: SENSSOFT-175 integrated the
web extension into UserALE.js' build. Also made modifications so that the
version of the UserALE client script is automatically set during the build.
Finally, added an npm task that exp
Repository: incubator-senssoft-useralejs
Updated Branches:
refs/heads/SENSSOFT-175-integrate-webext-with-build [created] 933d72975
SENSSOFT-175 integrated the web extension into UserALE.js' build. Also made modifications so that the version of the UserALE client script is automatically set during the build. Finally, added an npm task that exposes gulp clean so that devs can do this task from npm.
Project: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/commit/933d7297
Tree: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/tree/933d7297
Diff: http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/diff/933d7297
Branch: refs/heads/SENSSOFT-175-integrate-webext-with-build
Commit: 933d729751ad387fdbbd624ff5c2999de86fde72
Parents: 0ab4c86
Author: ceosion <ar...@gmail.com>
Authored: Fri Jun 2 19:50:48 2017 +0000
Committer: ceosion <ar...@gmail.com>
Committed: Fri Jun 2 19:50:48 2017 +0000
----------------------------------------------------------------------
gulpfile.js | 43 ++++++++++++-
package.json | 10 ++-
src/UserALEWebExtension/README.md | 78 +++++++++++++++++++++++
src/UserALEWebExtension/globals.js | 3 +
src/UserALEWebExtension/icons/border-48.png | Bin 0 -> 225 bytes
src/UserALEWebExtension/manifest.json | 35 ++++++++++
src/UserALEWebExtension/options.js | 34 ++++++++++
src/UserALEWebExtension/optionsPage.html | 25 ++++++++
src/UserALEWebExtension/public/index.html | 9 +++
src/UserALEWebExtension/user-ale-ext.js | 50 +++++++++++++++
10 files changed, 282 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/gulpfile.js
----------------------------------------------------------------------
diff --git a/gulpfile.js b/gulpfile.js
index a01e9d4..f465efe 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -23,10 +23,16 @@ var json = require('rollup-plugin-json');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var mocha = require('gulp-mocha');
-var babel = require('babel-register')
+var babel = require('babel-register');
+var jsonModify = require('gulp-json-modify');
+var filter = require('gulp-filter');
+var uglifyHarmony = require('uglify-js-harmony');
+var minifier = require('gulp-uglify/minifier');
+var replace = require('gulp-replace');
var version = require('./package.json').version;
var userale = 'userale-' + version;
+var userAleWebExtDirName = 'UserAleWebExtension';
// Clean build directory
gulp.task('clean', function() {
@@ -50,14 +56,45 @@ gulp.task('rollup', function() {
});
});
+// Copy the rolled-up userale.js script into the webext dir
+gulp.task('copy-userale-script', ['rollup'], function() {
+ return gulp.src('build/' + userale + '.js')
+ .pipe(gulp.dest('build/' + userAleWebExtDirName));
+})
+
+// Build for the browser web extension
+gulp.task('build-web-ext', ['copy-userale-script'], function() {
+ // We setup some filters so that we can work on specific files from the stream
+ const f1 = filter(['**/*.js'], {restore: true});
+ const f2 = filter(['**/manifest.json'], {restore: true});
+ const f3 = filter(['**/globals.js'], {restore: true});
+
+ return gulp.src(['src/' + userAleWebExtDirName + '/icons/**/*.*',
+ 'src/' + userAleWebExtDirName + '/*.*',
+ '!src/' + userAleWebExtDirName + '/README.md'],
+ { base: 'src/' + userAleWebExtDirName + '' })
+ .pipe(f1)
+ .pipe(minifier({}, uglifyHarmony))
+ .on('error', gutil.log)
+ .pipe(f1.restore)
+ .pipe(f2)
+ .pipe(jsonModify({ key: "web_accessible_resources", value: [ userale + '.js' ]}))
+ .pipe(f2.restore)
+ .pipe(f3)
+ .pipe(replace(/userAleScript=\".*?\"/g, 'userAleScript=\'' + userale + '.js\''))
+ .pipe(f3.restore)
+ .pipe(gulp.dest('build/' + userAleWebExtDirName + '/'));
+
+});
+
// Minify and output completed build
-gulp.task('build', ['rollup'], function() {
+gulp.task('build', ['rollup', 'build-web-ext'], function() {
return gulp.src('build/' + userale + '.js')
.pipe(uglify())
.on('error', gutil.log)
.pipe(rename({ suffix : '.min' }))
.pipe(gulp.dest('build'))
- .pipe(rename('userale-test.min.js'))
+ .pipe(rename('userale-test.min.js')) // fordar: what is this for?
.pipe(gulp.dest('build'));
});
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 419feac..8ae729f 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"pretest": "gulp lint",
"test": "gulp test",
"build": "gulp build",
+ "clean": "gulp clean",
"dev": "gulp dev",
"example:watch": "nodemon -w ./example example/server.js"
},
@@ -21,7 +22,8 @@
"author": "Draper",
"contributors": [
"Clay Gimenez",
- "Robert Foley"
+ "Robert Foley",
+ "Alex Ford"
],
"license": "Apache-2.0",
"bugs": {
@@ -37,8 +39,11 @@
"express": "^4.13.4",
"gulp": "^3.9.1",
"gulp-eslint": "^3.0.1",
+ "gulp-filter": "^5.0.0",
+ "gulp-json-modify": "^1.0.2",
"gulp-mocha": "^3.0.1",
"gulp-rename": "^1.2.2",
+ "gulp-replace": "^0.5.4",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"jsdom": "^8.4.0",
@@ -46,5 +51,6 @@
"rollup": "^0.26.0",
"rollup-plugin-json": "^2.0.1",
"sinon": "^1.17.6"
- }
+ },
+ "dependencies": {}
}
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/src/UserALEWebExtension/README.md
----------------------------------------------------------------------
diff --git a/src/UserALEWebExtension/README.md b/src/UserALEWebExtension/README.md
new file mode 100644
index 0000000..db4e7f3
--- /dev/null
+++ b/src/UserALEWebExtension/README.md
@@ -0,0 +1,78 @@
+# UserALE Web Extension
+
+There are many different ways to create extensions/plugins for Firefox. This project follows the Web Extension way.
+
+For installation and other help, check out the Mozilla Developer Network (MDN) website:
+https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension
+
+## Folder/file structure
+
+* ../
+ * The parent directory should be the src for the core of UserALE
+* README.md
+ * You're looking at me!
+* icons/
+ * Used by the web extension to load icon resources.
+* public/
+ * Used for sample/test webpages and resources. Not actually part of the Firefox plugin! Used by NPM's http-server module (and other web servers).
+* globals.js
+ * Holds default values for the web extension's options.
+* manifest.json
+ * The main web extension project file, where it all begins.
+* options.js
+ * JavaScript code used by the web extension's options page.
+* optionsPage.html
+ * HTML for the options page.
+* user-ale-ext.js
+ * The JavaScript code used by the web extension.
+* userale-0.2.1.min.js
+ * The User ALE client script, loaded by the web extension.
+
+## Quick Start
+
+1. You need to have a UserALE server running; one way is to Git clone the UserALE repository (which if this README is on your filesystem, you've already done so), run the build, and then start the included test server.
+ 1. git clone https://github.com/apache/incubator-senssoft-useralejs.git
+ 1. cd incubator-senssoft-useralejs
+ 1. npm install && npm run build
+ 1. npm run example:watch
+ 1. UserALE should now be running on http://localhost:8000
+1. Start a simple server to serve up the test page.
+ 1. cd src/UserAleWebExtension/
+ 1. npm install -g http-server
+ 1. http-server
+ 1. Test page should now be available at http://localhost:8080/index.html
+ 1. NOTE: this test page is served up from the source directory and is NOT copied into the build directory because it is not part of the actual distriubtion.
+1. Load the web extension into Firefox.
+ 1. Option 1: use npm's web-ext
+ 1. cd build/UserAleWebExtension/
+ 1. npm install -g web-ext
+ 1. web-ext run --browser-console --start-url localhost:8080
+ 1. Option 2: manual loading
+ 1. Open Firefox
+ 1. Enter about:debugging into the URL bar and press enter
+ 1. Check the box to 'Enable add-on debugging'
+ 1. Press the 'Load Temporary Add-on' button
+ 1. Navigate to the root of the web extension directory (e.g. 'build/UserAleWebExtension')
+ 1. Press Open, and confirm that 'User ALE Extension' appears in the list
+ 1. You may now navigate to a web page to inject the User ALE script! (e.g. http://localhost:8080)
+
+## Options
+
+You can set options for the web extension in Firefox by opening the menu, clicking on "Add-ons", then "Extensions". You should see the User ALE Web Extension listed and then you can click on the "Preferences" button to open up the options.
+
+You can also simply enter "about:addons" in the URL bar, then click on "Extensions" to achieve the same result.
+
+## Google Chrome
+
+You can load the web extension into Google Chrome with the following procedure:
+
+1. Within Chrome, open the menu, expand 'More tools...', and click on 'web extensions.'
+1. Enable developer mode by checking the box at the top of the page.
+1. Select the root of the web extension directory.
+1. Navigate to the test page (e.g. http://localhost:8080/index.html) to inject UserALE into the page.
+
+## Updating UserALE client script
+
+This version of the web extension has been modified to automatically reflect the correct version of the UserALE core script during the build process. You should not need to change anything for it to "just work".
+
+However, if something appears wrong, you can look at the 'src/UserAleWebExtension/globals.js' and 'src/UserAleWebExtension/manifest.json' to see how the UserALE client script is being set. Also look at the build steps related to the web extension in 'gulpfile.js' to see how the two previously mentioned files are modified to reflect the current version of the UserALE client script.
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/src/UserALEWebExtension/globals.js
----------------------------------------------------------------------
diff --git a/src/UserALEWebExtension/globals.js b/src/UserALEWebExtension/globals.js
new file mode 100644
index 0000000..4d1d4de
--- /dev/null
+++ b/src/UserALEWebExtension/globals.js
@@ -0,0 +1,3 @@
+// these are default values, which can be overridden by the user on the options page
+var userAleHost = 'http://localhost:8000';
+var userAleScript = 'userale-0.2.1.min.js';
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/src/UserALEWebExtension/icons/border-48.png
----------------------------------------------------------------------
diff --git a/src/UserALEWebExtension/icons/border-48.png b/src/UserALEWebExtension/icons/border-48.png
new file mode 100644
index 0000000..90687de
Binary files /dev/null and b/src/UserALEWebExtension/icons/border-48.png differ
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/src/UserALEWebExtension/manifest.json
----------------------------------------------------------------------
diff --git a/src/UserALEWebExtension/manifest.json b/src/UserALEWebExtension/manifest.json
new file mode 100644
index 0000000..d0a6688
--- /dev/null
+++ b/src/UserALEWebExtension/manifest.json
@@ -0,0 +1,35 @@
+{
+ "manifest_version": 2,
+ "name": "User ALE Extension",
+ "version": "1.0",
+ "description": "Injects User ALE into every page for testing purposes",
+ "icons": {
+ "48": "icons/border-48.png"
+ },
+ "permissions": [
+ "activeTab",
+ "storage",
+ "http://localhost:8080/",
+ "http://localhost:8000/",
+ "http://localhost/*",
+ "http://localhost/",
+ "*://draperlaboratory.github.io/"
+ ],
+ "web_accessible_resources": [
+ "userale-0.2.1.min.js"
+ ],
+ "content_scripts": [
+ {
+ "matches": [
+ "<all_urls>"
+ ],
+ "js": [
+ "globals.js",
+ "user-ale-ext.js"
+ ]
+ }
+ ],
+ "options_ui": {
+ "page": "optionsPage.html"
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/src/UserALEWebExtension/options.js
----------------------------------------------------------------------
diff --git a/src/UserALEWebExtension/options.js b/src/UserALEWebExtension/options.js
new file mode 100644
index 0000000..ace66df
--- /dev/null
+++ b/src/UserALEWebExtension/options.js
@@ -0,0 +1,34 @@
+/* eslint-env node */
+
+if (chrome) {
+ browser = chrome;
+}
+
+// creates a Future for retrieval of the named keys
+// the value specified is the default value if one doesn't exist in the storage
+let store = browser.storage.local.get({
+ userAleHost: userAleHost,
+ userAleScript: userAleScript
+}, storeCallback);
+
+function storeCallback(item) {
+ console.log(item);
+ document.getElementById("host").value = item.userAleHost;
+ document.getElementById("clientScript").value = item.userAleScript;
+}
+
+function onError(error) {
+ console.log(error);
+}
+
+function saveOptions(e) {
+ //e.preventDefault();
+ browser.storage.local.set({
+ userAleHost: document.getElementById("host").value,
+ userAleScript: document.getElementById("clientScript").value,
+ });
+}
+
+document.addEventListener("submit", function() {
+ saveOptions();
+});
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/src/UserALEWebExtension/optionsPage.html
----------------------------------------------------------------------
diff --git a/src/UserALEWebExtension/optionsPage.html b/src/UserALEWebExtension/optionsPage.html
new file mode 100644
index 0000000..89f1229
--- /dev/null
+++ b/src/UserALEWebExtension/optionsPage.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>User ALE Web Extension - Options</title>
+ <script src="globals.js"></script>
+ <script src="options.js"></script>
+ <meta charset="utf-8">
+</head>
+<body>
+<h1>Options</h1>
+<form>
+ <label>User ALE Server Host:</label>
+ <input id="host"/>
+ <br/>
+
+ <label>User ALE Client Script:</label>
+ <input id="clientScript"/>
+ <br/>
+
+ <div align="right">
+ <button type="submit">Save</button>
+ </div>
+</form>
+</body>
+</html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/src/UserALEWebExtension/public/index.html
----------------------------------------------------------------------
diff --git a/src/UserALEWebExtension/public/index.html b/src/UserALEWebExtension/public/index.html
new file mode 100644
index 0000000..ed4c171
--- /dev/null
+++ b/src/UserALEWebExtension/public/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Firefox Plugin Test Page</title>
+</head>
+<body>
+Can we use a Firefox plugin to insert UserALE onto this page?
+</body>
+</html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-useralejs/blob/933d7297/src/UserALEWebExtension/user-ale-ext.js
----------------------------------------------------------------------
diff --git a/src/UserALEWebExtension/user-ale-ext.js b/src/UserALEWebExtension/user-ale-ext.js
new file mode 100644
index 0000000..d040bd2
--- /dev/null
+++ b/src/UserALEWebExtension/user-ale-ext.js
@@ -0,0 +1,50 @@
+/*
+ eslint-disable
+ */
+
+// inherent dependency on globals.js, loaded by the webext
+
+// browser is defined in firefox, but not in chrome. In chrome, they use
+// the 'chrome' global instead. Let's map it to browser so we don't have
+// to have if-conditions all over the place.
+if (chrome) {
+ browser = chrome;
+}
+
+// creates a Future for retrieval of the named keys
+// the value specified is the default value if one doesn't exist in the storage
+let store = browser.storage.local.get({
+ userAleHost: userAleHost,
+ userAleScript: userAleScript
+}, storeCallback);
+
+function storeCallback(item) {
+ console.log(item);
+ userAleHost = item.userAleHost;
+ userAleScript = item.userAleScript;
+
+ injectScript();
+}
+
+function onError(error) {
+ console.log(error);
+}
+
+function injectScript() {
+ var userAleTag = document.createElement("script");
+ userAleTag.type = "text/javascript";
+ userAleTag.setAttribute("id", "userale-plugin");
+ userAleTag.setAttribute("data-url", userAleHost);
+ userAleTag.setAttribute("data-autostart", true);
+ userAleTag.src = browser.extension.getURL(userAleScript);
+
+ console.log("Injecting UserALE script into current page! " + userAleHost + " " + userAleScript);
+
+ document.head.appendChild(userAleTag);
+ document.body.innerHTML += "<br/><br/>SUCCESS! UserALE has been injected onto the page!";
+}
+
+
+/*
+ eslint-enable
+ */
\ No newline at end of file