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