A theme usually is about the visual representation of a forum. 90% of the changes most people think about when it comes to theming can be done with CSS alone. You can even inject some javascript without writing an extension by inserting it here: Administration > Appearance > Custom Header.
The best way to learn about extensions is taking an existing one that serves a similar purpose to the one you are thinking about and then trying to understand why things are done in the way they are. I'm quite new to the OO way of programming myself, so unfortunately I can't offer you a lot of help here. But I want to try anyway. If I tell you things you are already aware of, please bear with me, I don't know anything of your knowledge level.
First of all, have a look here:
https://discuss.flarum.org/d/1608-extension-development-using-composer-repositories-path
As you write about main.js, I assume that you have setup your extension folder (e.g. my_extension) in your workbench folder and have created bootstrap.php and composer.json in the root of your extension folder.
If you are only interested in the javascript part, the bootstrap.php could look as simple as:
<?php
use Flarum\Event\ConfigureClientView;
use Illuminate\Contracts\Events\Dispatcher;
return function (Dispatcher $events) {
$events->listen(ConfigureClientView::class, function (ConfigureClientView $event) {
if ($event->isForum()) {
$event->addAssets([
__DIR__ . '/js/forum/dist/extension.js',
__DIR__ . '/less/forum/extension.less',
]);
$event->addBootstrapper('romanzpolski/my_extension/main');
}
});
};
Be careful, romanzpolski/my_extension needs to match your given name in your extensions composer.json.
Now you have created two chains of folders js/forum/src and less/forum/ inside your extension folder. Then you have included your extension in the composer.json file in the flarum root folder and run composer update there.
Having done all that, a main.js could look along the lines of:
import app from 'flarum/app';
import { extend } from 'flarum/extend';
import UserPage from 'flarum/components/UserPage';
app.initializers.add('my_extension', function() {
extend(UserPage.prototype, 'view', function () {
$(".item-private-discussion").insertAfter(".item-mentions");
});
});
So what does this code do?
First you initialise your extension giving it a name (my_extension) and a function call. To do so, you need to import app from 'flarum/app' first. The name my_extension needs to be in accordance to your bootstrap.php. Then you extend the UserPage.prototype, that's why you need to import extend and UserPage too. In my example, you extend the view method. Now you do some jquery-ing, in my example you just move a node with the class .item-private-discussion to a different place.
Don't forget the composer.json (in my example just an empty json: {}), package.json (take it from some other extension) and Gulpfile.js files in your workbench/my_extension/js/forum folder. The Gulpfile.js will look like:
var flarum = require('flarum-gulp');
flarum({
modules: {
'romanzpolski/my_extension': [
'src/*.js'
]
}
});
And last but not least don't forget to install gulp and execute gulp inside your workbench/my_extension/js/forum folder to generate the content of workbench/my_extension/js/forum/dist/extension.js which is the only thing that is called via your bootstrap.php along with an extension.less file in the less/forum folder (which can be empty). If you really don't need to include any CSS/less, you can also skip this part in the bootstrap.php.
I hope, that this is of some help to you.
