Every time I reload the extension it refreshes / reloads all the tabs in my browse

[mderazon]

While in development, it reloads all tabs in my browser when I reload the extension.
Any idea why ?

[aklinker1]

You must be running a content script in all URLs? So it's reloading all the tabs where content scripts are active.

This has already been asked about, see: #975

[mderazon]

Sorry I should have been more clear.

It does NOT reload all tabs anymore (It does not reload any tab actually), this is a different problem :-/
The problem is that I click the extension and nothing happens.

The log entry inside content script doesn't appear on the tab console.
The log entry in background also doesn't appear in the worker console.
So basically it doesn't seem like the worker is injecting the script, or even being run.

All I see in the logs is what's inside the background.js log (the above screenshot)

[mderazon]

I just tried running the example extension as is.
It is working on google.com url.
Here's the manifiest generated from the example:

{
  "manifest_version": 3,
  "name": "active-tab-content-script",
  "version": "0.0.0",
  "icons": {
    "16": "icon/16.png",
    "32": "icon/32.png",
    "48": "icon/48.png",
    "96": "icon/96.png",
    "128": "icon/128.png"
  },
  "permissions": [
    "activeTab",
    "scripting",
    "tabs"
  ],
  "action": {},
  "web_accessible_resources": [
    {
      "resources": [
        "/content-scripts/content.css"
      ],
      "matches": [
        "*://*.google.com/*"
      ]
    },
    {
      "resources": [
        "content-scripts/content.css"
      ],
      "matches": []
    }
  ],
  "commands": {
    "wxt:reload-extension": {
      "description": "Reload the extension during development",
      "suggested_key": {
        "default": "Alt+R"
      }
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": [
    "http://localhost/*"
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval' http://localhost:3001; object-src 'self';",
    "sandbox": "script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:3001; sandbox allow-scripts allow-forms allow-popups allow-modals; child-src 'self';"
  }
}

The diff between them:

3c3,4
<   "name": "active-tab-content-script",
---
>   "name": "wxt-starter",
>   "description": "manifest.json description",
18,33d18
<   "web_accessible_resources": [
<     {
<       "resources": [
<         "/content-scripts/content.css"
<       ],
<       "matches": [
<         "*://*.google.com/*"
<       ]
<     },
<     {
<       "resources": [
<         "content-scripts/content.css"
<       ],
<       "matches": []
<     }
<   ],

I don't know what could be the difference as to why the example is working and my code is not.
Perhaps because the matching condition ?

[mderazon]

One thing I see different from the example .output folder and mine is that background.js in the example output contains this line:

const res = await browser.scripting.executeScript({
            target: { tabId: tab.id },
            files: ["/content-scripts/content.js"]
          });

While my background.js file does not contain any reference to /content-scripts/content.js (although the folder and file are generated)

I looked and found some old wrong references in my background.ts file so I fixed it

.
├── .gitignore
├── .output
│   └── chrome-mv3
│       ├── background.js
│       ├── chunks
│       │   └── options-BxzUToPe.js
│       ├── content-scripts
│       │   └── content.js
│       ├── icon
│       │   ├── 128.png
│       │   ├── 16.png
│       │   ├── 32.png
│       │   ├── 48.png
│       │   └── 96.png
│       ├── manifest.json
│       ├── options.html
│       └── wxt.svg
├── .wxt
│   ├── tsconfig.json
│   ├── types
│   │   ├── globals.d.ts
│   │   ├── i18n.d.ts
│   │   ├── imports.d.ts
│   │   └── paths.d.ts
│   └── wxt.d.ts
├── assets
│   └── typescript.svg
├── components
│   └── counter.ts
├── entrypoints
│   ├── background
│   │   ├── background.ts
│   │   └── style.css
│   ├── content
│   │   └── index.ts
│   └── options
│       ├── index.html
│       └── main.ts
├── package-lock.json
├── package.json
├── public
│   ├── icon
│   │   ├── 128.png
│   │   ├── 16.png
│   │   ├── 32.png
│   │   ├── 48.png
│   │   └── 96.png
│   └── wxt.svg
├── tsconfig.json
├── utils
└── wxt.config.ts

import readabilityCSS from "./style.css?inline";

export default defineBackground(() => {
  (browser.action ?? browser.browserAction).onClicked.addListener(
    async (tab) => {
      console.log("Action clicked", tab);
      if (tab.id && tab.url) {
        const data = await browser.scripting.executeScript({
          target: { tabId: tab.id },
          files: ["/content-scripts/content.js"],
        });
        const html = `<!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8">
              <title>${data.title}</title>
              <style>${readabilityCSS}</style>
            </head>
            <body>
              <h1>${data.title}</h1>
              ${data.byline ? `<p><em>${data.byline}</em></p>` : ""}
              ${data.excerpt ? `<p>${data.excerpt}</p>` : ""}
              ${data.content}
            </body>
          </html>`;

        browser.tabs
          .create({
            url: "data:text/html;charset=utf-8," + encodeURIComponent(html),
          })
          .catch((err) => {
            console.error("Error creating tab:", err);
          });
      }
    }
  );
});

import { Readability } from "@mozilla/readability";

export default defineContentScript({
  // Set "registration" to runtime so this file isn't listed in manifest
  registration: "runtime",
  // Use an empty array for matches to prevent any host_permissions be added
  //  when using `registration: "runtime"`.
  matches: [],
  async main(ctx) {
    console.log("Content script executed!");

    const documentClone = document.cloneNode(true) as Document;
    const article = new Readability(documentClone).parse();

    if (article) {
      return {
        title: article.title,
        content: article.content,
      };
    }
  },
});

Still, nothing happens when I click. Will continue to investigate

[aklinker1]

Can you upload a minimal zip of your project? That way I can try running it and see what's going on.

[mderazon]

@aklinker1 I've opened a new discussion for this problem (#1434) which you've already helped me solve.
Thanks a lot for your help!