Use custom Extension Viewer Autodesk Forge - autodesk-forge

Question

I'm trying to study Autodesk Forge. I'm trying to test script from this link to register Extension change background color when click button. But when click, alert("Autodesk.ADN.Viewing.Extension.Basic loaded") is visible but nothing happy with background color.
Please tell me why and how to solved it if you know.
Thank in advanced !
AutodeskNamespace("Autodesk.ADN.Viewing.Extension");
Autodesk.ADN.Viewing.Extension.Basic = function (viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
var _this = this;
_this.load = function () {
alert("Autodesk.ADN.Viewing.Extension.Basic loaded");
viewer.setBackgroundColor(255, 0, 0, 255, 255, 255);
return true;
};
_this.unload = function () {
viewer.setBackgroundColor(160, 176, 184, 190, 207, 216);
alert("Autodesk.ADN.Viewing.Extension.Basic unloaded");
Autodesk.Viewing.theExtensionManager.unregisterExtension(
"Autodesk.ADN.Viewing.Extension.Basic");
return true;
};
};
Autodesk.ADN.Viewing.Extension.Basic.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
Autodesk.ADN.Viewing.Extension.Basic.prototype.constructor = Autodesk.ADN.Viewing.Extension.Basic;
Autodesk.Viewing.theExtensionManager.registerExtension("Autodesk.ADN.Viewing.Extension.Basic", Autodesk.ADN.Viewing.Extension.Basic);
$(document).ready(function(){
$("#button").click(function(){
viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Basic');
})
})

Answer 1

The blog article you linked to is from 2016. Forge Viewer is still evolving pretty fast, so I'm afraid that the code snippet in this blog post is too out-dated.
If you are interested in learning more about the Forge platform, I'd recommend taking a look at the https://learnforge.autodesk.io website. It contains various tutorials and we try and keep them up-to-date whenever the Forge services or the Forge Viewer API changes. There's also a tutorial about viewer extensions specifically: https://learnforge.autodesk.io/#/tutorials/extensions.
To give you an idea, here's how a simple viewer extension would be implemented today, using the viewer version 7.*:
class MyAwesomeExtension extends Autodesk.Viewing.Extension {
constructor(viewer, options) {
super(viewer, options);
}
load() {
console.log('MyAwesomeExtensions has been loaded');
viewer.setEnvMapBackground(null); // Hide background environment if there is one
viewer.setBackgroundColor(0, 64, 128); // Set background color
return true;
}
unload() {
console.log('MyAwesomeExtensions has been unloaded');
return true;
}
}
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);
Then, when initializing the viewer, you would load your extension like so:
let viewer = new Autodesk.Viewing.GuiViewer3D(divElement, { extensions: ['MyAwesomeExtension'] });