diff --git a/src/popup.html b/src/popup.html index ce1bb49..49de373 100644 --- a/src/popup.html +++ b/src/popup.html @@ -1,11 +1,32 @@ - - - - Popup - - - - + + + + Popup + + + + + + + + + \ No newline at end of file diff --git a/src/scripts/background.js b/src/scripts/background.js index 3993747..2cecbc5 100644 --- a/src/scripts/background.js +++ b/src/scripts/background.js @@ -7,7 +7,7 @@ browser.runtime.onInstalled.addListener(() => { browser.runtime.onMessage.addListener((request, sender, sendResponse) => { // Do something with the message! - alert(request.url); + // alert(request.url); // And respond back to the sender. return Promise.resolve('got your message, thanks!'); diff --git a/src/scripts/popup.js b/src/scripts/popup.js index 3c43dfa..a37e97e 100644 --- a/src/scripts/popup.js +++ b/src/scripts/popup.js @@ -1,5 +1,9 @@ import browser from 'webextension-polyfill'; +function openWebPage(url) { + return browser.tabs.create({ url }); +} + document.addEventListener('DOMContentLoaded', async () => { const tabs = await browser.tabs.query({ active: true, @@ -15,4 +19,12 @@ document.addEventListener('DOMContentLoaded', async () => { // eslint-disable-next-line no-console console.log(response); + + document.getElementById('github__button').addEventListener('click', () => { + return openWebPage('https://github.com/abhijithvijayan/web-extension-starter'); + }); + + document.getElementById('donate__button').addEventListener('click', () => { + return openWebPage('https://www.buymeacoffee.com/abhijithvijayan'); + }); }); diff --git a/src/styles/popup.scss b/src/styles/popup.scss index ab8e82c..46c3d21 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -6,3 +6,33 @@ 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