How to switch the view [maybe using router]?

CharlieBrownCharacter commented 1 year ago

First of all, thank you very much for starting such an amazing project.

I have started a blank project with yarn create vite-plugin-web-extension and was able to load the extension in my chrome browser.

I would like to have a login page and another page that is accessible only if the user is logged in. I'm assuming that I would have to create a new popup - I might be completely wrong here as this is my first time I'm creating a browser extension.

I have created a page in src/pages/Login.vue:

<template>
  <div>
    <div>
      Login
    </div>
  </div>
</template>

Then I have created the src/login.ts:

import Popup from "./pages/Login.vue";
import { createApp } from "vue";

createApp(Popup).mount("body");

Then I have created my 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>

Then in my src/pages/Popup.vue I have added a link that when clicked will redirect to the Login.vue page:

<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>

Unfortunately it's not redirecting the user to the popup. Is this the correct way to actually do this? Should I setup vue-router? If yes, I setup just like I would do in a normal project?

Thank you very much for the effort in creating this project.

CharlieBrownCharacter commented 1 year ago

Here's the output for when I build the project:

$ 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!

aklinker1 commented 1 year ago

Thanks!

You can't change the URL of the popup, only the path listed in the manifest can be shown there. So you can't use multiple HTML files. Instead, you can use vue-router in hash mode. That will make your paths look like this:

chrome-extension://<id>/src/popup.html#/
chrome-extension://<id>/src/popup.html#/login

That way you get to use all the goodness of vue-router, but you never leave the popup's URL defined in the manifest.

So you're project will probably looks something like this:

src/
  pages/
    PopupIndex.vue
    PopupLogin.vue
  popup.html
  popup.js

Then inside your popup.js file (or a separate file), your router would look something like this:

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: "/", component: () => import('./pages/PopupIndex.vue') },
    { path: "/login", component: () => import('./pages/PopupLogin.vue') },
  ],
})

Then you can setup navigation guards to handle checking for auth and redirecting to the login page automatically when not logged in.

CharlieBrownCharacter commented 1 year ago

@aklinker1 Thank you very much for the response. IT really solved my problem.

Is there a place I can make a small donation to you for the help provided here? Not only that but for developing this amazing extension.

aklinker1 commented 1 year ago

@CharlieBrownCharacter Thanks! I just set up a GitHub sponsor page, https://github.com/sponsors/aklinker1. Feel free to contribute, but don't feel obligated to 👍

aklinker1 / vite-plugin-web-extension

How to switch the view [maybe using router]? #112