Skip to content

Instantly share code, notes, and snippets.

@cuylerstuwe
Created April 12, 2018 15:36
Show Gist options
  • Select an option

  • Save cuylerstuwe/4a02fc01164f95d9a8745b992f4310ad to your computer and use it in GitHub Desktop.

Select an option

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.
// ==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