Popup HTML scirpt not being compiled #984

Batimius · 2025-02-16T19:05:10Z

Batimius
Feb 16, 2025

Hello there. I recently came across this plugin and decided to use it since it enables me to use TypeScript to develop my extension. Although it works great, it seems to ignore the script linked to my popup. Here is my project structure:

Here is my popup.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="popup.css">
        <script src="../src/popup.ts" defer></script>
    </head>
    <body>
        <div id="connectedDiv" style="clear: both;">
            <p id="connectedText">Connected</p>
            <span class="dot" id="connected"></span>
        </div>
        <div id="activeTabDiv" style="clear: both;">
            <p id="activeTabText">Active Tab</p>
            <label class="switch" id="activeTabLabel">
            <input type="checkbox" id="activeTab">
                <span class = "slider"></span>
            </label>
        </div>
    </body>
</html>

vite.config.ts:

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    crx({ manifest }),
  ],
  legacy: {
	skipWebSocketTokenCheck: true
  }
})

manifest.json:

{
	"manifest_version": 3,
	"name": "Test",
	"description": "Testing",
	"version": "2.0.0",

	"icons": {
		"16": "resources/icons/icon16.png",
		"48": "resources/icons/icon48.png",
		"128": "resources/icons/icon128.png"
	},

	"host_permissions": [
		"<all_urls>"
	],
	"permissions": [
		"tabs"
	],

	"background": {
		"service_worker": "src/background.ts"
	},
	"content_scripts": [
		{
			"matches": ["*://*.mydomain.com/*"],
			"js": ["src/content.ts"]
		}
	],
	"action": {
		"default_popup": "resources/popup.html"
	}
}

And this is the outputted popup.html:

<!DOCTYPE html>
<html>
    <head>

        <script src="../src/popup.ts"></script>
      <link rel="stylesheet" crossorigin href="/assets/popup-BucsgORP.css">
    </head>
    <body>
        <div id="connectedDiv" style="clear: both;">
            <p id="connectedText">Connected</p>
            <span class="dot" id="connected"></span>
        </div>
        <div id="activeTabDiv" style="clear: both;">
            <p id="activeTabText">Active Tab</p>
            <label class="switch" id="activeTabLabel">
            <input type="checkbox" id="activeTab">
                <span class = "slider"></span>
            </label>
        </div>
    </body>
</html>

There is no compiled popup.js file. I am not sure what is happening or why it is happening. Any and all help is appreciated. Thank you very much!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Popup HTML scirpt not being compiled #984

{{title}}

Replies: 1 comment

Select a reply

Popup HTML scirpt not being compiled #984

Batimius Feb 16, 2025

Replies: 1 comment

Batimius
Feb 16, 2025