diff --git a/src/ContentScript/index.ts b/src/ContentScript/index.ts
index 1cd57e2..05f7d18 100644
--- a/src/ContentScript/index.ts
+++ b/src/ContentScript/index.ts
@@ -1 +1,3 @@
document.body.style.filter = 'invert(1)';
+
+export {};
diff --git a/src/Options/Options.tsx b/src/Options/Options.tsx
index 9b4befc..6d5ac5a 100644
--- a/src/Options/Options.tsx
+++ b/src/Options/Options.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-const Options = () => {
+const Options: React.FC = () => {
return
Hello World
;
};
diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx
index 2c0b34d..eed9fc3 100644
--- a/src/Popup/Popup.tsx
+++ b/src/Popup/Popup.tsx
@@ -1,7 +1,40 @@
import React from 'react';
+import { browser, Tabs } from 'webextension-polyfill-ts';
-const Popup = () => {
- return Hello world
;
+function openWebPage(url: string): Promise {
+ return browser.tabs.create({ url });
+}
+
+const Popup: React.FC = () => {
+ return (
+
+ );
};
export default Popup;
diff --git a/src/Popup/popup.scss b/src/Popup/popup.scss
index 991ad79..97605b8 100644
--- a/src/Popup/popup.scss
+++ b/src/Popup/popup.scss
@@ -6,3 +6,34 @@ body {
color: $black;
background-color: $greyWhite;
}
+
+
+#popup {
+ min-width: 350px;
+ padding: 30px 20px;
+
+ h2 {
+ font-size: 25px;
+ text-align: center;
+ }
+
+ .links__holder {
+ ul {
+ display: flex;
+ margin-top: 1em;
+ justify-content: space-around;
+
+ li {
+ button {
+ border-radius: 8%;
+ font-size: 20px;
+ font-weight: 600;
+ background-color: rgba(0, 0 ,255, 0.7);
+ color: white;
+ cursor: pointer;
+ padding: 8px 12px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file