How do I build my own version of Obsidian Web?

You are probably wondering how to try out your own changes to this extension; that's fantastic! I know that this is obvious to anybody who has been doing this for a while, but if you are new to programming: it's important for you to know that nobody makes the correct changes on the first try. So: what you want to do first is get a solid development build process running (that is: you want to get as tight of a feedback loop as you can between you making your changes and you evaluating whether those changes work). After you have that process running, you can make your changes and see if they do what you're hoping for...over and over again, probably.

Getting a development build process running

You need a few things for this to work:

• A compatible version of Node.JS
• All necessary dependencies
• To run the builder
• To load this extension into the browser
• To iterate (by making further changes until they do what you want them to do)

Getting a compatible version of Node

You need Node v14. This is easy if you already have it, but if you don't -- I recommend using asdf to set up a compatible version of Node; see https://asdf-vm.com/ for more details.

Installing necessary dependencies

From your clone of the project, run the following command:

npm ci

This will install all of the project "runtime" dependencies and also all dependencies needed for development and, after it has completed, drop you back to the prompt.

Running the builder

From your clone of the project, run the build process:

npm run dev

This will first perform the build process and then rebuild the project as you make changes.

As this runs, the latest version of these files will be written to the dist/ folder.

Loading your build of the extension in the browser

You can load your build of the extension in to your browser by going to chrome://extensions/ and clicking the "Load Unpacked Button". Once the dialog appears, navigate to the dist/ folder within your clone of the project.

You have now loaded the extension so you can try out your changes to see if they work!

Iterate (a.k.a. "But if your changes didn't work...")

Unfortunately, computers demand a level of precision and perfection that a human can deliver only after a lot of back-and-forth -- so you'll likely have to make more changes and try again.

Good news: in most cases, the changes you've made to the extension will be seen by the build script the next time you refresh a page and interact with the extension button. So: you don't have to do much more than refreshing the page if you've made a change to either the pop-up or the options page.

Bad news: if you've made a change to the service worker or any files that the service worker uses, you will need to "Update" the extension by finding the extension version you installed at chrome://extensions/ (you might find it helpful to know that by default a development version of the extension will have a red background). This will restart the background process with your new changes.