[BEX] Background hooks not reaching content script after some time in a web page

[Matheus Tavares]

What happened?

I'm developing a BEX using popup and I need to append an iframe to the document body to display a modal.

I've developed a small example to show this behavior: https://github.com/mthstv/quasar-bex-popup-modal-example

When entering a new web page, the background script communicates with the content script just fine and the modal is opened and closed as expected. After a while on the page the background script hooks remains working but the content script is not responsive.

Not reaching content script

Reached content script

Any ideas what may be causing this?

What did you expect to happen?

The background script sending the event to the content script and displaying the iframe modal on the document body.

Reproduction URL

https://github.com/mthstv/quasar-bex-popup-modal-example

How to reproduce?

1. Clone the repo;
2. Run locally;
3. Install the extension on chrome browser;
4. Reload any page and click the button to open the iframe modal;
5. After 5-10mins try again and the modal will not be able to close or open;
6. Check the console logs on the web page and the extension.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

BEX Mode

Platforms/Browsers

No response

Quasar info output

> modal-extension@0.0.1 info
> quasar info


Operating System - Linux(5.15.146.1-microsoft-standard-WSL2) - linux/x64
NodeJs - 20.11.0

Global packages
  NPM - 10.2.4
  yarn - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.15.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.8.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.19 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.17 -- Native-ESM powered web dev build tool
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[Matheus Tavares]

I actually resolved this issue by following this documentation: https://github.com/quasarframework/quasar/blob/d4ce905398f883a77d1bdeaad621dfc15ee260a9/docs/src/pages/quasar-cli/developing-browser-extensions/types-of-bex.md

I updated the repo, using the same iframe logic height: 0 to hide it and turns out I needed to add this line to my code.

[Matheus Tavares]

I've noticed this is a recurring error for me, sometimes it keeps working and sometimes the background scripts can't send events to content scripts. Any ideas on why this could be happening?

[Matheus Tavares]

I actually solved this issue, My manifest.json file was wrongly configured, the one I'm using now is working properly, here it is if anyone has the same issue:

{
  "manifest_version": 2,

  "icons": {
    "16": "icons/favicon-16x16.png",
    "48": "icons/favicon-48x48.png",
    "128": "icons/favicon-128x128.png"
  },

  "browser_action": {
    "default_popup": "www/index.html#/popup"
  },

  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["my-content-script.js"],
      "css": ["assets/content.css"]
    }
  ],

  "permissions": ["<all_urls>", "storage", "tabs", "activeTab"],

  "web_accessible_resources": ["*", "<all_urls>"],

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
}