Managebac Plus

Making a plugin

This is a purely informational page that is in no way affiliated with Managebac.

Programming an extension

Plugins are coded in Javascript, with knowledge of HTML and CSS required. However, knowledge of copy-pasting is often enough!

If this is your first time programming, you can make some simple modifications to other plugins, making them better. In order to do this, go to any plugin in the Plugins section, press "See code" and copy it. Then, edit the relevant elements and re-upload it thought the developer section. For example, lets make a plugin that changes the wallpaper.

First, find a good plugin that already does this. I found one called "Banana Background", seen in the screenshot below:

Now, press "See code" to see exactly what code is running which causes the background to change.

Now just copy the code:

Perfect. Now make your own plugin with the same code. To do this, go to the Developer page up top:

I made a couple plugins already, but you shouldn't see any if you haven't made any yet.

Next, press "Create plugin" at the bottom.

This should immediately create a new plugin on top of the button. It's default name will be Unnamed. Change that to whatever you want. I'll put "Star wars background".

Next, there is a place to put your code. Inside, you may see it says Insert your description here!, but this space is for your code aswell. To change your description only change the actual writting that says "Insert your description here!", don't change anything else. That's what I have done below:

You may now add your code to the bottom. Add a few lines to leave some space. Then, paste the code.

As you can see, I've pasted the code at the bottom. It may look scary, but all you need to do is get the general idea of what's going on. Clearly, there is a link, so that must be the place where the image is. Thus, if you change that for another link, you can change the background image. I searched for a solid star wars background, and found the one below.

Instead of copying the actual image, I just copied the image address because that will give me a link. I then pasted that link into the code and hit the "Save" button below.

If you're asking yourself whether you can put your own image, well it's complicated. There is no "upload" feature, because someone would need to host that. However, if you have this image set as your profile picture in any website, you can right click that image and copy the link. There are other ways to get around this aswell. It is quite an inconvenience though.

Trying and publishing the extension

To publish your extension, just set the project to Public, and anyone will be able to install it. However, if you want to try it yourself, toggle the Enabled switch and it will simply run for you, but it won't be public.

If you publish it and install it via the store, make sure that you don't have it Enabled aswell, as if you do it will run twice!

Make sure to hit reload after installing / enabling the extension for it to come into effect.

Programming an extension if you're a javascript pro.

There are two main things that you may want to keep in mind. First, is that every project should start with a multiline comment, spaced exactly as shown when generated. The text inside this comment is the description of the plugin.

Next, you have a variable available to you called "context". It has a lot of goodies inside, such as the current class that the student is in: context.currentClassId and context.currentClassName. It also has the student's info: context.useremail, context.userid, and context.username. Use them responsibly!

Can I protect my plugins against being copied?

I mean, I really like the idea of people learning from other people's code so I'd prefer if you don't make your code overly complex to prevent copying, but I'm not going to stop you.

If your question is whether you can remove the "See code" button completely, then the answer is no. The code is running on their computer anyways, so they could find it if they wanted to.

What's really going on?

Extensions that you write are saved to database. Then, if you install one, the code is stored in your own computer. This javascript code will be executed using the "eval" function every time the page is reloaded. In addition, the extension's code is placed inside an anonymous function and then immediately executed in order to prevent different extensions from interfering with each other.

When the owner of the extension hits save, the new code is shipped to everyone that has the extension installed, and then the old code is overridden with the new code in each computer, effectively "updating" the extension.

Sadly, this method leaves room for people to misuse the tool of malitious purposes, which there is little I can do about except for banning the person. Ofcourse, I don't count unintended behaviour (bugs) as malicious. Luckily, it isn't easy for you or anyone to "accidentally" hack, as hacking can only really be done if there is intent, so you don't need to worry about this.

How can I see who made an extension?

You can't. Authors can choose to say who made it in the description, but that's their choice. As Managebac doesn't have "usernames", instead using real names and surnames, I think it would be a violation of privacy to put this information alongside the plugins you make.

Any questions?

Just email and I'll answer as quick as possible (I have lots of time to answer now that the IB is cancelled)

© 2020, Zubatomic, Inc. All rights reserved.

Main page