英文:
Have a multipage browser extension with vue
问题
我已经使用vite-plugin-web-extension开始了我的项目。
我使用yarn create vite-plugin-web-extension创建了一个空白项目，并成功在我的Chrome浏览器中加载了扩展。
我想要一个登录页面和另一个仅在用户登录后才能访问的页面。我假设我需要创建一个新的popup - 这可能完全错误，因为这是我第一次创建浏览器扩展。
我在src/pages/Login.vue中创建了一个页面：
<template>
<div>
<div>
登录
</div>
</div>
</template>
然后我创建了src/login.ts：
import Popup from "./pages/Login.vue";
import { createApp } from "vue";
createApp(Popup).mount("body");
然后我创建了我的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 - 登录</title>
</head>
<body></body>
<script type="module" src="./login.ts"></script>
</html>
然后在src/pages/Popup.vue中，我添加了一个链接，当点击时将重定向到Login.vue页面：
<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">
在这里登录
</a>
</div>
</template>
不幸的是，它没有将用户重定向到弹出窗口。这是否是实际执行此操作的正确方式？我应该设置vue-router吗？如果是的话，我应该像在正常项目中那样设置吗？
非常感谢您创建这个项目所付出的努力。
编辑
附上构建扩展时的输出：
$ 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!
您可以看到login.html没有被导出。
英文:
I have started my project using vite-plugin-web-extension
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.
EDIT
Attaching the output for 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!
You can see that login.html is not being exported.
答案1
得分: 1
是的，您应该使用Vue Router。这样，popup.html 包含整个Vue应用程序，您可以像往常一样基于身份验证进行路由。
由于它是一个Chrome扩展程序，打开弹出窗口将默认为单个页面（即index.html），但您可以根据扩展存储/状态在Vue应用程序内部根据需要进行重定向。
据我所知，没有办法根据状态有条件地加载不同的弹出页面。因此，Vue路由是正确的选择。
英文:
Yes, you should use Vue Router. This way the popup.html contains the entire Vue app, and you can route based on authentication as usual.
Since it's a chrome extension, opening the popup will default to a single page (i.e. index.html) but you can redirect as needed within you Vue app based on extension storage/state.
As far as I know, there's no way to conditionally load a different popup page based on state. So Vue routing is the way to go.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论