when building chrome extension, there is not popup.js in dist

Cihatata commented 1 year ago

Hi, i have a problem. I want to use popup in my extension. I created popup.html and added scrip tag to popup.html but my code in popup.js did not work. I checked dist directory. I didnt see popup.js why i don't see popup.js in dist ? How can i solve this problem ?

I use v1.4.8

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Chrome Extension
    <button type="button" id="closeButton">X</button>
    <script src="./popup.js"></script>
  </body>
</html>

popup.js

console.log('tes1t');

console.log('test popup');

function closePopup() {
  // window.close();
  alert('hello');
}

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.closeButton').on('click', () => {
    closePopup();
  });
});

manifest.json

{
  "manifest_version": 3,
  "name": "Resmo Chrome Extension",
  "$schema": "https://json.schemastore.org/chrome-manifest.json",
  "description": "",
  "version": "1.0",
  "background": {
    "service_worker": "only_background.js"
  },
  "icons": {
    "16": "public/images/icon-16.png",
    "32": "public/images/icon-32.png",
    "48": "public/images/icon-48.png",
    "128": "public/images/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "public/images/icon-16.png",
      "32": "public/images/icon-32.png"
    },
    "default_title": "Click to view a popup",
    "default_popup": "popup.html"
  },
  "permissions": [
    "alarms",
    "identity",
    "identity.email",
    "scripting",
    "cookies",
    "storage",
    "tabs",
    "webRequest",
    "declarativeNetRequest",
    "declarativeWebRequest",
    "*://*/*"
  ],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "contentScript.js"
      ]
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

dist

aklinker1 commented 1 year ago

Hmm, interesting. There's a popup.js.map file, so it should've output a popup.js file.

Can you set verbose: true in the plugin's options, and share the entire output from vite build?

Cihatata commented 1 year ago

I added popup.js to manifest.json content_script section and my problem is resolved. Thank you

  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "contentScript.js",
        "popup.js"
      ]
    }
  ],

aklinker1 commented 1 year ago

Huh, ok. I wouldn't recommend doing that, the final output won't be as optimized as it could be. But it shouldn't break anything, so if it works for you, that's fine.

aklinker1 / vite-plugin-web-extension

when building chrome extension, there is not popup.js in dist #72