background-hooks script is sending two messages to content-hooks when it is expected to send one

[daveavi]

Hello!

Currently, I am writing a basic Quasar BEX application to get myself more familiar with the framework. In my background-hooks script, I have an on-click listener that activates/deactivates my Quasar app accordingly. I am running into an issue where when I click on my extension icon once to remove my Qusar app off the web page, it sends two messages, where it removes the Quasar app but it brings it back up again. It looks like my background- hooks script is sending the message twice off one click and I am not sure why. Here is the code:

I would love to know why this behavior is occurring so I can have my Quasar App open/close normally.

Thanks,

Avi Dave

[daveavi]

Sometimes this is also sending multiple messages. I am running into similar issues while running https://github.com/smolinari/quasar-bex-todo-app.

[webnoob]

Can you show all your code please? It looks as though the event listener is being added multiple times.

[daveavi]

Here is my background-hooks.js :

Here is my Vue Code:

[chenlevy]

Same issue here, did you find a solution?
Sometimes it calls the background listener function multiple times - sometimes as many times as the number of open tabs running the extension.

Running quasar 1.15.2

[daveavi]

Sorry for the late reply, but I had to move away from quasar for this reason. I couldn't seem to understand what was going wrong, so I decided to just go with the familiar way to build chrome extensions. I am still using Vue, but instead of using a framework, I used laravel mix for bundling my vue and sass code

[ArsalaBangash]

@daveavi I would appreciate it if you could link your repository, and write out the steps to reproduce this issue.

Furthermore, I saw that you used quasar V1, so I created a merge request on GitLab where I added a prototype so you can try and see if this issue still exists on V2.

Finally, I went ahead and recorded a video of how the extension behaves on my personal computer from the latest master commit on
your repo

[ArsalaBangash]

https://www.loom.com/share/75ddbf2101e5416fbe0b6c30d1417ea3

[daveavi]

Here is my repo: https://github.com/daveavi/quasar-bex-tutorial

To reproduce the error, here are the command line steps:

1. cd my-bex-project
2. Make sure you do npm install or yarn to download any dependencies
3. quasar dev -m bex, to enter bex mode of the app and building our developer version of our application

Once you have done these commands, go to chrome and on the toolbar, you want to click on the extension's icon, and then manage extensions:

You then want to enter developer mode, and click on load unpacked , to load your extension:

Here you want to choose your src-bex folder. Once the extension is loaded, make sure to pin the extension, open a new tab, can be any website. Click on the extension icon, initially it should load the quasar app, but try to click it again, and it will still stay on the page.

It is demonstrated in this video right here: https://www.loom.com/share/75ddbf2101e5416fbe0b6c30d1417ea3

[daveavi]

After running the extension on V2, there is still issues with the event listeners:
https://www.loom.com/share/8022badfeec242ab9f9b0425b68551d8

Here are some logs that represents the toggle functionality:

[daveavi]

@webnoob I hope you are doing well! I would love to know if you have any insight on this issue as this issue is blocking me from using Quasar to build a browser extension.

[swtanggara]

Hi @daveavi I had same issue in my first try using BEX Mode in Quasar. But then I've managed to trick it using this code:

function defaultThrottle(throttled) {
  return throttle(throttled, 100, { trailing: false });
}

this.$q.bex.on('bex.toggle.toolbar', defaultThrottle(this.toggleToolbar));

[volksec]

up