How to develop with the Joplin Web Clipper?

devonzuegel · 2020-01-28T02:04:14.898Z

How does one run a development version of the Web Clipper?

I went to chrome://extensionsand clicked Load unpacked to load the joplin/Clipper/joplin-webclipper directory…

… but got this error:

I also tried loading just the joplin/Clipper directory and also joplin/Clipper/joplin-webclipper/popup/public but got errors like this:

image1082×410 34.4 KB

tessus · 2020-01-28T21:21:39.520Z

You have to build it first. This is usually done with the release-clipper.js script, which also creates a new tag and pushes it to the repo.

The way to build the clipper is as follows:

git clone https://github.com/laurent22/joplin.git
cd joplin/Clipper/joplin-webclipper/popup
npm install
npm run build

I hope this helps!

tessus · 2020-01-28T21:24:05.305Z

@laurent do you have a script that creates the zip files for dev versions?

laurent · 2020-01-29T11:07:00.220Z

To work on the clipper, you can also run npm run watch so that it recompiles as soon as you change a file. You’ll still need to reload the extension in the browser though.

The directory to select is indeed joplin/Clipper/joplin-webclipper.

laurent · 2020-01-29T11:07:52.568Z

tessus:

@laurent do you have a script that creates the zip files for dev versions?

Hmm, not sure what you mean? There's no need for a zip file to develop, but it can be created using release-clipper.js.

tessus · 2020-01-29T23:03:51.710Z

laurent:

not sure what you mean

As far as I know the manifests are built during the release-cli.js script, so how is someone supposed to run a dev version of the clipper?
And as @devonzuegel mentioned a no valid manifest error happens when trying to use the directory directly.

The release-cli.js script can be used, but it creates a local tag, which messes up your local working directory/git. It also commits and pushes the changes to the remote, which of course will fail, if one does not have write access to the repo. This is fine, but you still have a mess in your local working dir.

So how do you create a dev version of the clipper that you can run for testing?

laurent · 2020-01-29T23:21:23.176Z

tessus:

As far as I know the manifests are built during the release-cli.js script, so how is someone supposed to run a dev version of the clipper?

For development you can load the extension directly from the directory. What was missing I think for @devonzuegel is that the popup view wasn't built but you've provided the instructions to do that.

tessus · 2020-01-29T23:22:02.297Z

Ah, I see. Thanks for the info.