I've initiated my project using vite-plugin-web-extension
Starting with a blank project using
yarn create vite-plugin-web-extensionMy goal is to include a login page and another page accessible only to logged-in users. Assuming I need to create a new popup - although, being a first-time creator of a browser extension, I could be mistaken here.
To start, I created a page at src/pages/Login.vue:
<template>
<div>
<div>
Login
</div>
</div>
</template>
Next, I created src/login.ts:
import Popup from "./pages/Login.vue";
import { createApp } from "vue";
createApp(Popup).mount("body");
Then, I made src/login.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>Refodev - Login</title>
</head>
<body></body>
<script type="module" src="./login.ts"></script>
</html>
In src/pages/Popup.vue, I added a link that should redirect to the Login.vue page when clicked:
<script lang="ts" setup>
import browser from "webextension-polyfill";
function onClickLogin(e: Event) {
e.preventDefault();
console.log(browser.action);
browser.action.setPopup({ popup: 'login.html' })
}
</script>
<template>
<div>
<a href="/login" @click.native="onClickLogin">
login here
</a>
</div>
</template>
However, the user isn't redirected to the popup as expected. Am I going about this the right way? Should I consider setting up vue-router? If so, would the setup be similar to a regular project?
Many thanks for putting effort into creating this project.
EDIT
Below is the output generated when building the extension:
$ vite build --watch --mode development
vite v4.3.9 building for development...
watching for file changes...
build started...
Build Steps
1. Building src/popup.html indvidually
2. Building src/background.ts indvidually
Building src/popup.html (1/2)
vite v4.3.9 building for development...
✓ 15 modules transformed.
dist/src/popup.html 0.39 kB │ gzip: 0.27 kB
dist/popup.css 0.39 kB │ gzip: 0.25 kB
dist/src/popup.js 59.83 kB │ gzip: 23.07 kB
✓ built in 351ms
Building src/background.ts (2/2)
vite v4.3.9 building for development...
watching for file changes...
build started...
✓ 4 modules transformed.
dist/src/background.js 10.01 kB │ gzip: 2.98 kB
built in 60ms.
✓ All steps completed.
✓ 1 modules transformed.
dist/manifest.json 0.27 kB │ gzip: 0.18 kB
built in 1721ms.
Opening browser...
Done!
The issue arises where login.html doesn't get exported appropriately.