Error running extension popup as a React app

Development
1

Here's what I did:

  1. In the terminal, change into the directory joplin/packages/app-clipper/popup
  2. Run npm start
  3. The popup app is built successfully
  4. Go to https://localhost:3000 in the browser.
  5. I saw blank screen. When opening the console, I got the following error:
Fatal error on initialisation: TypeError: Cannot read property 'addListener' of undefined

run-popup-web-app
run-popup-web-app1157×762 52.2 KB

The error is thrown when calling the init method of class Bridge, at the following line:

this.browser_.runtime.onMessage.addListener(this.browser_notify);

The reason is the object at this.browser_.runtime only contains the following keys:

id,connect,sendMessage,OnInstalledReason,OnRestartRequiredReason,PlatformArch,PlatformNaclArch,PlatformOs,RequestUpdateCheckStatus

Hence this.browser_.runtime returns undefined, and trying to call addListener method on it leads to an error.

I don't know what to expect or if I ran the app totally wrong, so can anyone please help?

2

joplin/BUILD.md at dev · laurent22/joplin · GitHub

3

To behonest, I've read that BUILD.md every day for the last two weeks. It's still not clear if I do it right.

I've done what the BUILD.md tell:

  • cd into packages/app-clipper/popup
  • npm install
  • npm run watch

As I understand correctly, the third command is only for watching whenever there are changes inside the popup directory. Whenever any file inside this directory change, it will rebuild the popup to the build directory.

Then I add the whole app-clipper as an unpacked Chrome extension in developer mode. But that directory includes dependencies and weigh more than 160mb in total. Is that how it is supposed to work?

4

I was going to write something, but I see I'd just repeat what it's in BUILD.md:

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).

Is there something unclear about these instructions? Where does it say you need to open https://localhost:3000 in a browser for example?

5

I assume I have to open localhost:3000 because there is a start script in package.json in popup directory: node scripts/start.js. I tried running it and see the error so just asking.