The popup.html file was overlooked during the generation of the Chrome extension build with Vite

I'm currently utilizing a github CLI plugin found at this link to set up mv3 chrome extensions using vue and vite.

The initial template is properly set up and I can work on it without any issues. However, I encounter a problem when trying to utilize chrome.window.create or chrome.tabs.create. When I execute the build command, the final folder does not contain the popup.html file unless it's used within the manifest.js file that is utilized for generating the build.

Below is the configuration in the manifest:

import { defineManifest } from '@crxjs/vite-plugin'

export default defineManifest({
  name: '',
  description: '',
  version: '1.0.0',
  manifest_version: 3,
  icons: {
    16: 'img/logo-16.png',
    32: 'img/logo-34.png',
    48: 'img/logo-48.png',
    128: 'img/logo-128.png',
  },
//Uncommenting popup inclusion causes tabs and popup windows to malfunction
  action: {
    // default_popup: 'popup.html',
    // default_icon: 'img/logo-48.png',
  },
  //options_page: 'options.html',
  background: {
    service_worker: 'src/background/index.js',
    type: 'module',
  },
  content_scripts: [
    {
      matches: ['http://*/*', 'https://*/*'],
      js: ['src/content/index.js'],
    },
  ],
  host_permissions: [
    'https://*.herokuapp.com/*'
  ],
  web_accessible_resources: [
    {
      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
      matches: [],
    },
  ],
  permissions: [
    'tabs',
    'gcm',
    'identity',
  ],
  oauth2: {
    "client_id": "...cd.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  }
})

Here's the vite code snippet:

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import vue from '@vitejs/plugin-vue'

import manifest from './src/manifest.js'

// Vite config
export default defineConfig(({ mode }) => {
  const production = mode === 'production'

  return {
    build: {
      emptyOutDir: true,
      outDir: 'build',
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/chunk-[hash].js',
        },
      },
    },
    plugins: [crx({ manifest }), vue()],
  }
})

Is there a way to ensure the build includes the popup.html page or any other custom HTML page that may be required?

Answer №1

To avoid placing the popup.html file inside the manifest file, you must reference it within rollupOptions.input.

 rollupOptions: {
      input: {
        popup: resolve(__dirname, "popup.html"),
      },
}
const __dirname = path.dirname(fileURLToPath(import.meta.url)); // This is applicable when {"type":"module"} is specified in package.json.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Vue and JSON to dynamically fill select options based on another select input

Seeking assistance in developing a dynamic search form with select options for Districts, Regions and locations. The Regions selection should be populated based on the selected District, and the Locations based on the chosen Region. The data is structured ...

Tips for updating data in the AngularJS Smart TableWould you like to learn

I'm still getting the hang of Java Script, so please bear with me if this question is a bit basic. Does anyone know how to edit rows in tables using Smart-Table with AngularJS? I can't seem to find any tutorials that match the new version of Sma ...

Adjust the width of a div container in Vue JS by dynamically setting it based on the dimensions of

I am currently working on a project that requires a dual scroll feature, where there will be a scroll bar both above and below the table. The table width will be determined by the user's action of adding more columns, making the width dynamic. Below ...

What is the procedure in AngularJS to obtain an ID from a URL? My current approach involves utilizing Restangular for communication with REST APIs

I have been successfully using Restangular to retrieve data from the backend. The URLs I was hitting used to provide the data in the following format: For example, when I hit http://mysite/responses/, the responses were in the following structure: [ ...

Adding JSON information to various elements

I'm looking for a more efficient way to use a switch statement in order to create markups based on the retrieved feed. Although I am currently able to successfully retrieve the data, I'm not sure if it's the best approach to use two $(data.v ...

What is the best way to connect a JavaScript file to an HTML file in an Express app?

I have my NodeJS server set up with Express, utilizing Handlebars as the rendering engine. app.use(express.static(publicDirPath)) (...) app.engine("hbs",hbs({ extname: "hbs", defaultView: "main", layoutsDir: path.join(srcDirP ...

Implementing Basic List Display in Vue with index identification and prop usage

As I start my todo list, I have set up an array state() { return { news: [ { id: 1, title: "Title 1", text: "Example text 1" ...

Selecting items from a list at random using the power of math.random() and math.floor()

When attempting to randomize the popping of elements in a list stored in the baby variable, only baby[1] is being popped. How can I make it pop random elements? <body> <h1 id="1">bebe</h1> <h1 id="2">t ...

Nano frontend program

My current project consists of 5 different single-page applications (SPAs): 2 in Angular, 2 in React, and 1 in Vue.js. These SPAs are served by an integrated server that handles routing for each one. I am looking for a way to share data between these app ...

What are some ways to utilize symbol fonts such as marvosym within a web browser?

Are you looking to use special LaTeX fonts like \Pluto from marvosym in your web development projects? Wondering how to display this symbol with HTML / JavaScript / CSS without relying on an image? You can download the font from This symbol corresp ...

Validating input in Angular UI Bootstrap Datepicker

I have integrated a datepicker from angular-ui/bootstrap. However, I am facing an issue where the user can freely type in the input field instead of selecting a date. Here is a snippet of my code: session.js session.getDateFormat = function() { ...

Is there a way to use Lodash to quickly return the same value if a condition is met using the ternary operator

Is there a condensed way to do this using Lodash? (or perhaps Vanilla JS/TypeScript) var val = _.get(obj, 'value', ''); Please note that var val = obj.value || ''; is not suitable as it considers 0 and false as valid but fal ...

What could be causing this JSON object error I'm experiencing?

res.send({ customerDetails:{ fName, lName, }, applicantDetails:{ [ {primaryApplicant:{fName1,lName1}}, {secondaryApplicant:{fName2,lName2}}, {thirdA ...

Event of Mouse Wheel - Speed/Impact

Exploring a new THREE.JS project, I am implementing a mousewheel scroll event to transition from 0 to 1 smoothly. Nevertheless, my goal is to replicate the momentum effect seen on this website playdoh by merci Michael So far, here's what I have acco ...

Pagination in AngularJS that allows users to easily "jump to page"

Looking to enhance my pagination function by adding a textbox and button for users to input the desired page number. Any ideas or reference links on how to go about this? Thanks in advance! Here's my current HTML: <div class="pagingDiv"> <b ...

Setting the initial values of state variables upon rendering of a component and using custom hooks

I have a file called Body.jsx that handles fetching data from an API and filtering it. In an attempt to clean up the code, I created a custom hook named useResData specifically for fetching data: export const Body = () => { const resDataList = useResD ...

Tips for storing a JSON file locally and accessing it at a later time on the client side

Can PHP be used to generate a JSON file containing information like first name and last name? When using json_encode, what is the process of saving it on the client side, and how can it be retrieved and read afterward? ...

Tips for enhancing the speed of drawing circles in mouse movement using JS and CANVAS

My current script allows me to draw a circle during mousemove, but it's not as fast as I'd like. Before drawing the circle, I gather the color pixel during mousemove in order to draw a circle on the canvas with the picked color. I came across ...

Error: The API call response could not be shown on the webpage

Upon exploring the React App.js page, I discovered that I am making calls to a Django Rest API and receiving an array as a response. Within this array, there are nested components that should be listed in my code. However, when attempting to display multi ...

When using Node.js, res.render may encounter issues, but res.send typically functions properly

Currently, I am in the process of setting up the environment for a node.js app. Unfortunately, I am encountering an issue where the views/ejs files are not being rendered properly. When I use the following code snippet: app.get("/", function(req, res){ ...