App.vue
2.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
<div class="#app">
<el-switch v-model="DEVELOPER_MODE" @change="change"/>
<span :style="{ marginLeft: '10px' }"> 开启开发者模式 </span>
<br>
<br>
<b>常用链接：</b>
<el-row>
<el-link style="font-size: 12px;padding:2px 5px;" v-for="(link, key) in LINKS" target="_blank" :href="link.link" :key="key">
{{link.title}}
</el-link>
</el-row>
</div>
</template>
<script setup>
import {ref} from "vue";
const { sessionStorage } =
chrome.extension.getBackgroundPage().backgroundState || {};
const DEVELOPER_MODE = ref(sessionStorage.DEVELOPER_MODE === "1");
const LINKS = [{
title: '开发环境',
link: 'http://10.9.1.180'
}, {
title: '测试环境',
link: 'https://test.qgutech.com'
}, {
title: 'UAT环境',
link: 'https://uat.qixiaocloud.com'
}, {
title: '生产环境',
link: 'https://apaas.qixiaocloud.com/index'
}, {
title: '龙葵',
link: 'https://chat.qgutech.com/'
}, {
title: 'Jenkins',
link: 'https://test.qgutech.com/jenkins/'
}]
const open = (link) => {
window.open(link.link, '_blank');
}
chrome.runtime.onMessage.addListener((message) => {
if (message.type === "sessionStorage") {
DEVELOPER_MODE.value = message.value.DEVELOPER_MODE === "1";
}
});
const bg = chrome.extension.getBackgroundPage();
const {tabs} = bg.chrome || {};
/*** 获取当前 tab ID*/
function getCurrentTabId() {
return new Promise((resolve, reject) => {
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
resolve(tabs.length ? tabs[0].id : null);
});
});
}
const change = async (checked) => {
const tabId = await getCurrentTabId();
if (checked) {
tabs.sendMessage(tabId, {
type: "setSessionStorage",
key: "DEVELOPER_MODE",
value: "1",
});
} else {
tabs.sendMessage(tabId, {
type: "removeSessionStorage",
key: "DEVELOPER_MODE",
});
}
tabs.sendMessage(tabId, {type: "reload"});
};
</script>
<style>
body {
background-color: rgba(255, 255, 255, 0.8);
}
#app {
display: flex;
align-items: center;
width: 240px;
height: 90px;
padding: 10px;
}
</style>