Extra HTML pages don't find the src file in dev #627

corrortiz · 2023-01-15T07:07:34Z

Build tool

Vite

Where do you see the problem?

In the browser
In the terminal

Describe the bug

When you run the dev server the the extra HTML don't generate the reference to the source file, when you run the build command you get the correct reference:

Output with the vite build command (this works correctly):

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>OffScreen</title>
  <script type="module" crossorigin src="/assets/offscreen.7c2aa4e4.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/chunk-1ebdbb1b.js">
  <link rel="modulepreload" crossorigin href="/assets/chunk-641ab1c8.js">
  <link rel="modulepreload" crossorigin href="/assets/chunk-2a3b33e1.js">
  <link rel="modulepreload" crossorigin href="/assets/chunk-9744cff8.js">
  <link rel="modulepreload" crossorigin href="/assets/chunk-745e3ca4.js">
</head>
<body>
  <div id="root"></div>
</body>
</html>

Output with the vite build command:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>OffScreen</title>
</head>

<body>
  <div id="root"></div>
  <script src="./index.ts" type="module"></script>
</body>
</html>

I try to add the file with rollup-plugin-copy but its not working as it does not generate the missing file

Reproduction

N/A

Logs

No response

System Info

System:
    OS: macOS 13.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 36.57 MB / 16.00 GB
    Shell: 5.9 - /usr/local/bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.87
    Firefox: 108.0.2
    Safari: 16.2

Severity

blocking an upgrade

The text was updated successfully, but these errors were encountered:

rbhalla · 2023-01-17T19:29:20Z

It would help to understand how you're including this html file in your manifest.json, is it under web_accessible_resources?

If it is, I've found I needed to fully qualify the file location, so instead of ./index.js you may need to do /the/actual/location/index.js relative to where your build is happening.

jacksteamdev · 2023-03-13T12:58:58Z

@corrortiz Please include at least the manifest and the source HTML file.

Royal-lobster · 2023-04-04T17:46:52Z

Having the same issue with "@crxjs/vite-plugin": "^2.0.0-beta.15" and "vite": "^4.1.1"

defining the html page on web_accessible_resources

  "web_accessible_resources": [
    {
      "resources": ["src/pages/sidebar/index.html"],
      "matches": ["http://*/*", "https://*/*"]
    }
  ]

in src/pages/sidebar/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Sidebar</title>
</head>

<body>
    <div id="__root"></div>
    <script type="module" src="./index.tsx"></script>
</body>

</html>

in src/pages/sidebar/index.tsx

import { createRoot } from "react-dom/client";
import Sidebar from "./components/Sidebar";

function init() {
  const rootContainer = document.querySelector("#__root");
  if (!rootContainer) throw new Error("Can't find Panel root element");
  const root = createRoot(rootContainer);
  root.render(<Sidebar />);
}

init();

It just copies the html as it is, without processing the tsx file linked to it to dist -

Royal-lobster · 2023-04-08T09:58:24Z

Also, There seems to be an issue with loading the page into an iframe in content. It is functioning correctly on build, however, during development, the page fails to load in the iframe. Interestingly, the page is able to load normally when opened in a new tab.

rbhalla · 2023-04-10T18:58:00Z

@Royal-lobster, ideally relative imports work, but have you tried referencing the js file relative to the build location (rather than relative to the html file)?

Royal-lobster · 2023-04-10T19:04:40Z

@Royal-lobster, ideally relative imports work, but have you tried referencing the js file relative to the build location (rather than relative to the html file)?

It's not building the js bundle for that page. unless defining it on roll-up build settings in vite config.

Defining it on the roll-up option input works as expected. (With relative to html file as well)

DaPotatoMan · 2023-04-24T09:26:23Z

@Royal-lobster Did you find any workarounds for this issue?

Royal-lobster · 2023-04-24T12:43:16Z

@Royal-lobster Did you find any workarounds for this issue?

For HTML Page, i just added roll up build setting in vite config https://github.com/Royal-lobster/Syncia/blob/main/vite.config.ts

But for iframe not rendering within content script on dev, its painful. i am developing the iframe page isolated in chrome-extension:// link if i were to test on page, i should build every time for every change i make. i think i should make a new issue for it

DaPotatoMan · 2023-04-24T13:47:26Z

@Royal-lobster in dev you can simply load the http://localhost:5173 url instead of the extension page as a workaround.

DaPotatoMan · 2023-05-04T14:44:50Z

IFrame loading (extension html page) in content script can be fixed by adding port config in vite.config.ts
This issue is most likely connected with #648

Here's the vite config:

server: {
   port: 5173,
   hmr: {
      port: 5173
   } 
}

smeijer · 2023-05-21T09:19:20Z

I'm having the same issue when creating panes & panels:

manifest:

{
  // …
  devtools_page: 'main.html',
}

main.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="main.js" type="module"></script>
  </body>
</html>

main.js

chrome.devtools.panels.create('my devtool', '', '/panel.html');

chrome.devtools.panels.elements.createSidebarPane('my devtool', (sidebar) =>
  sidebar.setPage('/pane.html'),
);

maitrungduc1410 · 2023-05-24T03:34:26Z

I'm facing same issue, trying to create a devtools_page, but during yarn dev, the generated devtools.html under dist is just a placeholder, my files are not there (panel.html,...)

Royal-lobster · 2023-05-28T13:50:36Z

IFrame loading (extension html page) in content script can be fixed by adding port config in vite.config.ts This issue is most likely connected with #648

Here's the vite config:
server: {
   port: 5173,
   hmr: {
      port: 5173
   } 
}

Wow thanks a lot ! You made my life easy

wojciech-borawski · 2023-08-15T00:02:37Z

I have the same issue with "offscreen.html".
I guess it's a duplicate but I link to my repo which is reproducing the issue and also it's in different use case cuz it happens with just .ts file instead of tsx.

Should I close / remove it?

I still can't make workaround work...

supfiger · 2024-02-29T07:30:04Z

I still can't make workaround work...

@SeekerOfTrueCode have you found a solution?

Currently, I'm trying to figure out how to use Chrome offscreen API with this tool (crxjs/chrome-extension-tools), but I have issues.

What I have:

// vite.config.ts

const PORT = 5173

export default defineConfig({
  // Other stuff
  plugins: [
      react(),
      crx({ manifest }),
  ],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        offscreen: resolve(process.cwd(), 'src/app/offscreen.html'), // According to https://crxjs.dev/vite-plugin/concepts/pages#extra-html-pages
      },
    },
  },
  server: {
    strictPort: true,
    port: PORT,
    hmr: {
      clientPort: PORT,
    },
  },
}

// manifest.ts

export default defineManifest({
 // Other stuff
  manifest_version: 3,
  permissions: ['offscreen'],
  host_permissions: ['<all_urls>'],
  background: {
    service_worker: 'src/app/background.ts',
    type: 'module',
  },
  web_accessible_resources: [
    {
      resources: ['src/app/offscreen.html'], // According to https://github.com/crxjs/chrome-extension-tools/issues/767#issuecomment-1809560172
      matches: ['<all_urls>'],
    },
  ],
},

// src/app/offscreen.html

<script type="module" src="/src/app/offscreen.ts"></script>

// src/app/background.ts

await chrome.offscreen.createDocument({
  url: chrome.runtime.getURL('src/app/offscreen.html'),
  reasons: ['DOM_PARSER'],
  justification: 'Process Images',
});

...but I'm getting the error Failed to load resource: net::ERR_FILE_NOT_FOUND (since no offscreen js file in dist folder, and also dist/src/app/offscreen.html file even not changed (it still has src="/src/app/offscreen.ts", not .js)

GWSzeto · 2024-03-26T06:27:42Z

@supfiger What worked for me was to bring down the offscreen.html and offscreen.js into the root directory, where the manifest.json is located.

manifest.json

{
  ...
  "permissions": ["activeTab", "offscreen", "tabCapture"],
  "background": {
    "service_worker": "src/background.ts",
    "type": "module"
  },
  "web_accessible_resources": [{
    "resources": ["offscreen.html", "offscreen.js"],
    "matches": ["<all_urls>"]
  }]
}

vite.config.ts

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

export default defineConfig({
  plugins: [
    react(), 
    crx({ manifest }),
  ],
  build: {
    rollupOptions: {
      input: {
        offscreen: 'offscreen.html',
      },
    }
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

geanrt · 2024-08-21T21:03:35Z

To properly use additional HTML pages with scripts in Chrome extensions during development and production with CRXJS, follow these guidelines:

1. `manifest.json` Configuration

The manifest.json file is essential for defining the configuration of your Chrome extension. You need to specify which resources are accessible and how they should be used.

web_accessible_resources Configuration:

"web_accessible_resources": [
  {
    "matches": ["<all_urls>"],
    "resources": ["src/pages/mypage/index.html"]
  }
]

matches: Defines which URLs can access your resources. <all_urls> allows access from any URL. You can restrict this to specific URLs if needed.
resources: Lists the resources that are accessible. Here, it specifies the index.html file located in src/pages/mypage.

2. `index.html` File

The index.html file is the main HTML page for your extension. It should be configured to correctly load your JavaScript or TypeScript.

The only way is to say the total relative path of your app (in this case I put it in default src) and not in (dist)

Example index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mypage</title>
</head>
<body>
  <div id="root-mypage"></div>
  <script type="module" src="/src/pages/mypage/main.tsx"></script>
</body>
</html>

<script type="module" src="/src/pages/mypage/main.tsx"></script>: This script tag specifies that the file is a module JavaScript (or TypeScript that has been transpiled), and it is loaded by the page. Ensure the path to main.tsx is correct and accessible.

3. `vite.config.js` Configuration

The vite.config.js file is where you configure how Vite should handle and build your files. To ensure your additional HTML pages are properly included in the build, configure the input for Vite.

vite.config.js Configuration:

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        kanban: 'src/pages/mypage/index.html',
      }
    },
  },
});

rollupOptions.input: Here, you instruct Vite (and Rollup, the bundler used by Vite) to include the index.html of your extra page in the build. This ensures the page and its resources are correctly processed and included in the final extension.

Summary

In manifest.json: Use web_accessible_resources to make your additional HTML pages accessible to the extension.
In index.html: Properly configure the loading of your JavaScript or TypeScript.
In vite.config.js: Ensure your extra pages are included in the build through Rollup configuration.

Following these steps will help you effectively use additional HTML pages with scripts in your Chrome extensions, both during development and in production.

pandasoli · 2024-09-23T23:24:29Z

The last comment worked for me in parts (thanks geanrt), even though it included the page and the script to the development build it didn't compile the ts file.

github-actions · 2025-02-22T02:33:11Z

Thanks for contributing to CRXJS! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within 7 days.

jacksteamdev added the awaiting-feedback Further information is requested label Mar 13, 2023

supfiger mentioned this issue Feb 29, 2024

Extra html's script src path is not transformed in dev #767

Closed

2 tasks

GWSzeto mentioned this issue Mar 26, 2024

Added support for offscreen document #713

Closed

github-actions bot added the Stale label Feb 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extra HTML pages don't find the src file in dev #627

Extra HTML pages don't find the src file in dev #627

corrortiz commented Jan 15, 2023 •

edited

Loading

rbhalla commented Jan 17, 2023

jacksteamdev commented Mar 13, 2023

Royal-lobster commented Apr 4, 2023 •

edited

Loading

Royal-lobster commented Apr 8, 2023 •

edited

Loading

rbhalla commented Apr 10, 2023

Royal-lobster commented Apr 10, 2023 •

edited

Loading

DaPotatoMan commented Apr 24, 2023

Royal-lobster commented Apr 24, 2023

DaPotatoMan commented Apr 24, 2023

DaPotatoMan commented May 4, 2023

smeijer commented May 21, 2023

maitrungduc1410 commented May 24, 2023 •

edited

Loading

Royal-lobster commented May 28, 2023

wojciech-borawski commented Aug 15, 2023 •

edited

Loading

supfiger commented Feb 29, 2024 •

edited

Loading

GWSzeto commented Mar 26, 2024 •

edited

Loading

geanrt commented Aug 21, 2024

pandasoli commented Sep 23, 2024

github-actions bot commented Feb 22, 2025

Extra HTML pages don't find the src file in dev #627

Extra HTML pages don't find the src file in dev #627

Comments

corrortiz commented Jan 15, 2023 • edited Loading

Build tool

Where do you see the problem?

Describe the bug

Output with the vite build command (this works correctly):

Output with the vite build command:

Reproduction

Logs

System Info

Severity

rbhalla commented Jan 17, 2023

jacksteamdev commented Mar 13, 2023

Royal-lobster commented Apr 4, 2023 • edited Loading

Royal-lobster commented Apr 8, 2023 • edited Loading

rbhalla commented Apr 10, 2023

Royal-lobster commented Apr 10, 2023 • edited Loading

DaPotatoMan commented Apr 24, 2023

Royal-lobster commented Apr 24, 2023

DaPotatoMan commented Apr 24, 2023

DaPotatoMan commented May 4, 2023

smeijer commented May 21, 2023

maitrungduc1410 commented May 24, 2023 • edited Loading

Royal-lobster commented May 28, 2023

wojciech-borawski commented Aug 15, 2023 • edited Loading

supfiger commented Feb 29, 2024 • edited Loading

GWSzeto commented Mar 26, 2024 • edited Loading

geanrt commented Aug 21, 2024

1. manifest.json Configuration

2. index.html File

3. vite.config.js Configuration

Summary

pandasoli commented Sep 23, 2024

github-actions bot commented Feb 22, 2025

corrortiz commented Jan 15, 2023 •

edited

Loading

Royal-lobster commented Apr 4, 2023 •

edited

Loading

Royal-lobster commented Apr 8, 2023 •

edited

Loading

Royal-lobster commented Apr 10, 2023 •

edited

Loading

maitrungduc1410 commented May 24, 2023 •

edited

Loading

wojciech-borawski commented Aug 15, 2023 •

edited

Loading

supfiger commented Feb 29, 2024 •

edited

Loading

GWSzeto commented Mar 26, 2024 •

edited

Loading

1. `manifest.json` Configuration

2. `index.html` File

3. `vite.config.js` Configuration