Created
April 12, 2018 15:36
-
-
Save cuylerstuwe/4a02fc01164f95d9a8745b992f4310ad to your computer and use it in GitHub Desktop.
Proof of concept -- loading a basic skeleton for an Angular.js app w/ a userscript on an mTurk target page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Angle Cray Cray | |
| // @namespace salembeats | |
| // @version 1 | |
| // @description . | |
| // @author Cuyler Stuwe (salembeats) | |
| // @include *://worker.mturk.com/?using=AngleCrayCray | |
| // @require https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.js | |
| // ==/UserScript== | |
| const globals = { | |
| }; | |
| async function main() { | |
| clearBody(); | |
| showLoadingPage(); | |
| await waitForAngularToLoad(); | |
| clearBody(); | |
| insertAppMarkup(); | |
| insertAppStyles(); | |
| setUpApp(); | |
| manuallyBootstrapApp(); | |
| } | |
| async function waitForAngularToLoad() { | |
| return new Promise((resolve, reject) => { | |
| let interval = setInterval(() => { | |
| if(window.angular) { | |
| clearInterval(interval); | |
| resolve(angular); | |
| } | |
| }, 100); | |
| }); | |
| } | |
| function manuallyBootstrapApp() { | |
| try { | |
| angular.bootstrap(document.querySelector(".bootstrapMe"), ['angularApp']); | |
| } | |
| catch(err) { | |
| } | |
| } | |
| function clearBody() { | |
| document.body.innerHTML = ""; | |
| } | |
| function showLoadingPage() { | |
| document.body.innerHTML += "<p>Loading Angular app...</p>"; | |
| } | |
| function insertAppMarkup() { | |
| document.body.innerHTML += ` | |
| <div class="bootstrapMe"> <!-- The usual way would be to use the ng-app directive, but we're doing it this way here to take control with a manual bootstrap. --> | |
| <div ng-controller="angularController"> | |
| <p class="success-message">{{ successMessage !== undefined ? successMessage : "If you see this, something went terribly wrong." }}</p> | |
| Text: <input type="text" ng-model="boundVariable"> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| function insertAppStyles() { | |
| document.body.innerHTML += ` | |
| <style> | |
| p { | |
| font-weight: 300; | |
| } | |
| .success-message { | |
| background: green; | |
| color: white; | |
| margin-bottom: 10px; | |
| text-align: center; | |
| } | |
| .ng-empty { | |
| border: 2px solid red; | |
| } | |
| .ng-not-empty { | |
| border: 2px solid green; | |
| } | |
| </style> | |
| `; | |
| } | |
| function setUpApp() { | |
| var app = angular.module('angularApp', []); | |
| app.controller('angularController', function($scope, $log) { | |
| $scope.successMessage = "Angular app successfully started!"; | |
| }); | |
| } | |
| main(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment