Skip to content
This repository was archived by the owner on Apr 30, 2025. It is now read-only.

Commit ef194d3

Browse files
MattsAttackMattsAttack
committed
wip: phishing stuff
1 parent 8a8ac0d commit ef194d3

File tree

6 files changed

+244
-2
lines changed

6 files changed

+244
-2
lines changed

‎src/entrypoints/popup/App.svelte‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
88
import HomeComponent from "./Home.svelte";
99
import PhishingComponent from "./Phishing.svelte";
10+
import PhishingMenu from "./PhishingMenu.svelte";
11+
import PhishingLoading from "./PhishingLoading.svelte";
1012
import FactCheckComponent from "./FactCheck.svelte";
1113
import ChatComponent from "./Chat.svelte";
1214
import FactCheckLoadingComponent from "./FactCheckLoading.svelte";
@@ -16,6 +18,8 @@
1618
const RouteName = {
1719
Home: "home",
1820
Phishing: "phishing",
21+
PhishingMenu: "phishing-menu",
22+
PhishingLoading: "phishing-loading",
1923
FactCheck: "fact-check",
2024
FactCheckLoading: "fact-check-loading",
2125
FactsChecked: "real",
@@ -37,6 +41,16 @@
3741
path: `/${RouteName.Phishing}`,
3842
component: PhishingComponent,
3943
},
44+
{
45+
name: RouteName.PhishingMenu,
46+
path: `/${RouteName.PhishingMenu}`,
47+
component: PhishingMenu,
48+
},
49+
{
50+
name: RouteName.PhishingLoading,
51+
path: `/${RouteName.PhishingLoading}`,
52+
component: PhishingLoading,
53+
},
4054
{
4155
name: RouteName.FactCheck,
4256
path: `/${RouteName.FactCheck}`,

‎src/entrypoints/popup/FactCheckLoading.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"Flying the coop",
1414
];
1515
let currentTab = $state<chrome.tabs.Tab>();
16-
var nextPage: string = $state("fake");
16+
var nextPage: string = $state("real");
1717
1818
onMount(async () => {
1919
[currentTab] = await browser.tabs.query({

‎src/entrypoints/popup/Home.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
{@render button("Chat", "#/chat")}
1717
{@render button("Fact Checker", "#/fact-check")}
18-
{@render button("Phishing Detector", "#/phishing")}
18+
{@render button("Phishing Detector", "#/phishing-menu")}
1919
</div>
2020
</Wrapper>
2121

‎src/entrypoints/popup/PhishingLoading.svelte‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts">
2+
import Wrapper from "./Wrapper.svelte";
3+
import Loading from "./Loading.svelte";
4+
import { delay } from "./utils.ts";
5+
import { onMount } from "svelte";
6+
const randomMessages = [
7+
"Verifying sources",
8+
"Feeding ducks",
9+
"Checking for quacks",
10+
"Scouring the pond for biases",
11+
"Checking for goose influence",
12+
"Gathering the flock",
13+
"Flying the coop",
14+
];
15+
let currentTab = $state<chrome.tabs.Tab>();
16+
var nextPage: string = $state("real");
17+
18+
onMount(async () => {
19+
[currentTab] = await browser.tabs.query({
20+
active: true,
21+
currentWindow: true,
22+
});
23+
//Implement phishing email logic here
24+
if (
25+
currentTab?.url ==
26+
"https://newsroom.cisco.com/c/r/newsroom/en/us/a/y2025/m02/cisco-expands-partnership-with-nvidia-to-accelerate-ai-adoption-in-the-enterprise.html"
27+
) {
28+
nextPage = "real";
29+
} else if (
30+
currentTab?.url ==
31+
"https://mail.google.com/mail/u/0/#label/Email/FMfcgzQZTVrVkqWGtfcmgxFFkPHsZChW"
32+
) {
33+
nextPage = "phishing";
34+
}
35+
});
36+
</script>
37+
38+
<Wrapper pageTitle="Phishing Detector">
39+
<div class="fact-wrapper">
40+
<Loading
41+
loader={async (aborter) => await delay(4550, aborter)}
42+
{randomMessages}
43+
url={nextPage}
44+
/>
45+
</div>
46+
</Wrapper>
47+
48+
<style>
49+
.fact-wrapper {
50+
display: flex;
51+
flex-direction: column;
52+
align-items: center;
53+
justify-content: center;
54+
gap: 3rem;
55+
}
56+
</style>

‎src/entrypoints/popup/PhishingMenu.svelte‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<script lang="ts">
2+
import { onMount } from "svelte";
3+
import RadioButton from "./RadioButton.svelte";
4+
import Wrapper from "./Wrapper.svelte";
5+
6+
let currentTab = $state<chrome.tabs.Tab>();
7+
let form = $state<HTMLFormElement>();
8+
9+
onMount(async () => {
10+
[currentTab] = await browser.tabs.query({
11+
active: true,
12+
currentWindow: true,
13+
});
14+
});
15+
</script>
16+
17+
<Wrapper pageTitle="Phishing Detector">
18+
<form bind:this={form} action="#fact-check-loading" method="get">
19+
<fieldset>
20+
<legend>Scan this email for phishing?</legend>
21+
<div></div>
22+
</fieldset>
23+
<div class="card">
24+
<button data-name="phishing-loading" data-router-link type="submit">
25+
Scan For Phishing
26+
</button>
27+
</div>
28+
</form>
29+
</Wrapper>
30+
31+
<style>
32+
.radio-indent {
33+
margin-left: 24px;
34+
}
35+
36+
.option {
37+
cursor: pointer;
38+
font-size: 16px;
39+
}
40+
41+
.option-wrapper {
42+
display: flex;
43+
flex-direction: column;
44+
gap: 0.5rem;
45+
}
46+
47+
.other-input input[type="text"] {
48+
background: transparent;
49+
border-radius: 1rem;
50+
width: calc(100% - 40px);
51+
border: 1px solid;
52+
}
53+
54+
/* New styles for scaling current tab text without taking more than two lines */
55+
.current-tab-text {
56+
/* Font size scales between 14px and 18px based on the viewport width */
57+
font-size: clamp(14px, 2vw, 18px);
58+
overflow: visible;
59+
display: -webkit-box;
60+
line-clamp: 4;
61+
display: flex;
62+
flex-direction: column;
63+
}
64+
.card {
65+
display: flex;
66+
flex-direction: column;
67+
align-items: center;
68+
justify-content: center;
69+
gap: 1rem;
70+
padding: 1rem;
71+
text-align: center;
72+
73+
& > button {
74+
width: 100%;
75+
background-color: #e2c100;
76+
color: #242424;
77+
transition:
78+
border-color 0.25s,
79+
background 0.3s,
80+
transform 0.2s;
81+
82+
border-radius: 8px;
83+
border: 1px solid transparent;
84+
padding: 0.6em 1.2em;
85+
font-size: 1em;
86+
font-weight: 500;
87+
font-family: inherit;
88+
cursor: pointer;
89+
90+
&:hover {
91+
background-color: #f0d500;
92+
transform: scale(1.075);
93+
}
94+
}
95+
}
96+
</style>

‎src/entrypoints/popup/PhishingReal.svelte‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<script lang="ts">
2+
import Wrapper from "./Wrapper.svelte";
3+
import { Check } from "lucide-svelte";
4+
</script>
5+
6+
<Wrapper pageTitle="Phishing">
7+
<div class="center-stuff">
8+
<Check color="#35ff08" size="8rem" />
9+
10+
<p>This message is most likely legitimate!</p>
11+
12+
<div class="open">
13+
{#snippet button()}
14+
<!--
15+
So, technically, there isn't a search passed here, just a fragment.
16+
But... the router handles it, so we just do some hacks on the chat page.
17+
-->
18+
<a
19+
class="chat-button"
20+
data-query={JSON.stringify({
21+
q: "How can I spot phishing?",
22+
})}
23+
href="#/chat"
24+
>
25+
How can I spot phishing?
26+
</a>
27+
{/snippet}
28+
29+
{@render button()}
30+
</div>
31+
</div>
32+
</Wrapper>
33+
34+
<style>
35+
.center-stuff {
36+
display: flex;
37+
flex-direction: column;
38+
align-items: center;
39+
justify-content: center;
40+
gap: 0.5rem;
41+
text-align: center;
42+
}
43+
44+
.open {
45+
display: flex;
46+
flex-direction: column;
47+
align-items: center;
48+
justify-content: center;
49+
gap: 1rem;
50+
padding: 1rem;
51+
text-align: center;
52+
53+
& > .chat-button {
54+
width: 100%;
55+
background-color: #e2c100;
56+
color: #242424;
57+
transition:
58+
border-color 0.25s,
59+
background-color 0.3s,
60+
transform 0.2s;
61+
62+
border-radius: 8px;
63+
border: 1px solid transparent;
64+
padding: 0.6em 1.2em;
65+
font-size: 1em;
66+
font-weight: 500;
67+
font-family: inherit;
68+
cursor: pointer;
69+
70+
&:hover {
71+
background-color: #f0d500;
72+
transform: scale(1.075);
73+
}
74+
}
75+
}
76+
</style>

0 commit comments

Comments
 (0)