Using Tampermonkey to add question banks

After being annoyed that there is no question bank API, I thought about using requests to the Canvas UI using Tampermonkey. It turns out that this is complicated because although in the end, it is just POST of a title (i.e., the name of a question bank) via a form. Unfortunately, this form uses an authenticity token to prevent cross site request forgery (CSRF). So the solution was to find the form on a page (when logged into the course where you want to create the question banks), fill-in the name of the question bank and send the form. The results (and script) are shown  below:

// ==UserScript==
// @name        Add Question Bank
// @description Generates a question bank of a given name
// @include     http://*/courses/*/question_banks
// @require     https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js
// @require     http://code.jquery.com/jquery-3.3.1.min.js
// @require     https://code.jquery.com/ui/1.11.4/jquery-ui.min.js
// @version     10
// @grant       none
// @run-at      document-idle
// ==/UserScript==
/* globals $ */
(function() {
  'use strict';

  // get the validation token and do a post

  var userData = {};
  
  createBank('Test bank20');
  createBank('Test bank21');
  createBank('Test bank22');
  createBank('Test bank23');


  function createBank(title) {
      var token=""
      var courseid=getCourseId()
      var url='http://canvas.docker/courses/'+courseid+'/question_banks'

      if ($('#right-side-wrapper').length) {
          $('#right-side-wrapper').click() // click the button
          token=$("#edit_bank_form input[name=authenticity_token]").val() // output the token just to see it
          console.info("token", token);
          $("#edit_bank_form #assessment_question_bank_title").val(title) // set the title of the new question bank
          $.post( url, $('form#edit_bank_form').serialize(), function(data) {
              var result = data;
              var id=result.assessment_question_bank.id;
              console.info("back from POST, the new id is ", id, " and the full result is ", result)
          },
                 'json' // I expect a JSON response
          );
    return;
    }
  }
 
  function getCourseId() {
    var courseId = null;
    try {
      var courseRegex = new RegExp('/courses/([0-9]+)');
      var matches = courseRegex.exec(window.location.href);
      if (matches) {
        courseId = matches[1];
      } else {
        throw new Error('Unable to detect Course ID');
      }
    } catch (e) {
      errorHandler(e);
    }
    return courseId;
  }


  function errorHandler(e) {
    console.log(e.name + ': ' + e.message);
  }
})();

The resulting set of question banks:

Console output:

It would have been much nicer to have had an API such as:

POST /api/v1/courses/:course_id/question_banks

with a JSON payload of the form:

payload={'assessment_question_bank[title]': title}

I would like to thanks James Jones Links to an external site. for his script access-report-instructor.user.js (from https://github.com/jamesjonesmath/canvancement Links to an external site. ) as an inspiration. It helped get me started with the script I wrote (which is not very elegant, but shows that is is possible to create question banks without having to manually click at the GUI).