Easy way to start the development environment for the clipper

Development
1

I expect a dedicated start script that will do everything that helps to speed up development of the clipper:

  • Build popup in the popup/build folder. Watch for changes in all files in the popup directory except for the build subdirectory and rebuild as necessary.
  • Build a folder that can be used to install the clipper as an unpacked extension. At the start, it copies background script, content scripts, icon images, manifest, popup build to the dedicated folder. Then it watches for changes to those files and rebuild the folder as necessary.

An example of what I look for in Toggl Button, an extension for tracking time with a Toggl account:

If I overlook something, please point me in the right direction.

2

The info to build for development is in BUILD.md. Once you are watching the file, you can load the extensions as unpacked in Firefox or Chrome.

Building the clipper

cd packages/app-clipper/popup
npm install
npm run watch # To watch for changes

To test the extension please refer to the relevant pages for each browser: Firefox / Chrome. Please note that the extension in dev mode will only connect to a dev instance of the desktop app (and vice-versa).

3

And what directory do you select to load the unpacked extension? If it is app-clipper, which contains node_modules folder, does that mean the unpacked extension will be around 160mb?

4

And what directory do you select to load the unpacked extension?

It's in the doc. And if the doc's not clear enough, why not just try? Load one folder and see what happens, it's not like it's going to explode or something.

5

Please rest assured that I have tried it many times, and I only resort to this forum because I can't figure it out. I have got an extension published in Chrome store so I remember how to load unpacked extension to the tee, but the Joplin extension is one project that I can't get to work.


As you can see, I ran npm run watch in popup directory. I didn't show the install step but I promise I had run npm install. Then I loaded the app-clipper folder in the Chrome Extension Manage page and got an error because the manifest file contains a field named applications which Chrome didn't recognize.

I assume this manifest is supposed to be a master template for both Chrome and Firefox, but am I supposed to remove the field before loading? If yes, can we do it with script to make it faster?

6

The manifest issue is just a warning which shouldn't prevent loading the extension, unless something has changed in recent Chrome versions. If it has, you might indeed need to manually remove that field while you develop.

1 Like
7

I appreciate you taking the time to reply to newbie participants like me. All cleared for me.
Do you think that it would speed up the development process a bit if we have a script that:

  • run cra-build-watch to build the popup.
  • remove the unrecognized field in the manifest.
  • copy that popup build, together with necessary files like manifest, background script, content scripts, icons to a dedicated folder meant for loading the unpacked extension only.

This way, we'll get three benefits:

  • Developers only need to run one npm start script when they start the session, which is very easy to remember.
  • The clipper folder for loading in the Extension Management pages weighs under 1mb compared to the current folder which is nearly 200mb, which means that reloading extension as developers make code changes will be faster.
  • No warning regarding unrecognized field in the manifest. The warning does't prevent loading the extension, but I believe less warning leads to better experience.

And what do you think about adding a verbose parameter to cra-build-watch to display the full Webpack output? If new contributors use VSCode, the popup/build is excluded in the workspace and it's not clear that popup has been built successfully.

8

Last time I tried it worked fine with Chrome and Firefox as described in the doc and it was fast. If this process doesn't work anymore we'll need to look into it, but it probably won't be any time soon.

9

Do you mind if I take a stab and work on it? It's personal preference, but I think it'd be nice to reduce the number of characters one has to type, and remember when starting the development workflow.

10

Of course you're free to make changes locally but I won't merge it at this point. To be honest I don't have a clue about any of what you wrote so far, because in my case I just run npm run watch and it's done but probably that's not working for you.

11

Okay, then I'll push it soon and you can see if it is worth implementing.