Showwpost: A Browser Extension that allows you to post content to Showwcase
18 May, 2023
16
16
1
Contributors
Overview
For Hackfest 2023 I decided to create a browser extension that allows you to share the current tab you are on with a title and message without leaving the page.
I have created the basic draft of the extension and here's what it looks like:
Product
Let's look into a step-by-step explanation of how I did it.
STEP 1:
My first step was to find out how to create a browser extension. I had no idea how to create a browser extension; this was my first time doing it 😅. Nevertheless, it was easier than expected😀. You just need to create a manifest.json file.
Here's what the manifest.json file looks like:
{
"name": "Showwpost",
"description": "A browser extension that let's you post the current open tab to Showwcase",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
STEP 2:
The next step was to create popup.html, the file that would show the content of the extension. This task was fairly easy as I just needed an input tag for title, textarea for message and a button to do the task, i.e., share the content directly to Showwcase.
Here's the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="text" placeholder="Enter the title" id="title">
<!-- <input type="text" placeholder="Enter the message" id="message"> -->
<textarea placeholder="Enter the message" id="message" cols="28" rows="8"></textarea>
<button id="btn">Post</button>
</div>
</body>
<script src="index.js"></script>
</html>
STEP 3:
This was probably the most time-consuming task for me. What I wanted was to get the url of the current open tab. Initially, I tried usingwindow.location.href, but then I learned that this won't work on a browser extension, so, I tried looking for solutions online. Then, I found out about Chrome extension API, and created a function that fetches the url of the current open tab.
Here's what the function looks like:
function getCurrentUrl() {
return new Promise((resolve, reject) => {
//Chrome extension API
// The object passed as the first argument to chrome.tabs.query() specifies that it should return information about the currently active tab in the currently active window, by setting the active and currentWindow properties to true.
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
if (tabs.length === 0) {
reject("No active tabs found.");
} else {
resolve(tabs[0].url);
}
});
});
}We return a Promise here as the method chrome.tabs.query is asynchronous.
STEP 4:
The next step was to use the Showwcase API to do the actual task of sending a post request to post the thread on Showwcase. This was an easy task but I was, at first, using axios, which was causing problems. After doing some research, I found out that it's quite complicated to use axios with browser extensions, so the recommended method is to use fetch API as it's already integrated with Chrome.
Then, the main idea was to get the title and message from the input box and textarea respectively and append the fetched URL to the message and successfully post it to Showwcase.
Here's the remaining code:
getCurrentUrl()
.then(url => {
const btn = document.getElementById('btn')
const postThread = async (title, message, callback) => {
try {
const response = await fetch('https://cache.showwcase.com/threads', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'YOUR API_KEY'
},
body: JSON.stringify({
title: title,
message: message
})
});
console.log(response.data);
callback()
} catch (error) {
console.error(error);
}
};
btn.addEventListener('click', () => {
const messageArea = document.getElementById('message')
let message = messageArea.value
const titleArea = document.getElementById('title')
const title = titleArea.value
message = message+'\n '+url
postThread(title, message, ()=>{
window.close()
});
})
})
.catch(error => {
console.error(error)
});
That's how I created the basic draft of the extension.
Working
Video Demo
Check out the video demo here.
I picked this idea because I thought it would be cool if you could share important content from another site to Showcase without even opening Showwcase.
It would be helpful for developers as let's say they read some article related to a trending technology they can share the same without even leaving the tab.
For the future, I plan to add authorisation to this extension and release it on Chrome Extension store.
Technologies Used
I mainly used JavaScript, HTML and CSS for this project.
Repository
You can find the code on GitHub, with the required guide to run it locally:
hackathon
hackfest2023