Skip to content

Commit

Permalink
Update browser extension to manifest v3
Browse files Browse the repository at this point in the history
  • Loading branch information
daveearley committed Sep 8, 2024
1 parent 7695a06 commit 7bd1c9b
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 45 deletions.
36 changes: 22 additions & 14 deletions browser-extension/background.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
window.browser = (() => window.msBrowser || window.browser || window.chrome)();

const endpoint = 'https://screenshot.rocks/api/setImage'
const endpoint = 'https://screenshot.rocks/api/setImage';

const postData = (url, data) => {
browser.tabs.create(
{url: browser.runtime.getURL("post.html")}, (tab) => {
chrome.tabs.create(
{ url: chrome.runtime.getURL("post.html") },
(tab) => {
const handler = (tabId, changeInfo) => {
if (tabId === tab.id && changeInfo.status === "complete") {
browser.tabs.onUpdated.removeListener(handler);
browser.tabs.sendMessage(tabId, {url: url, data: data});
chrome.tabs.onUpdated.removeListener(handler);
chrome.tabs.sendMessage(tabId, { url: url, data: data }).catch(error => {
console.error("Error sending message:", error);
});
}
};

browser.tabs.onUpdated.addListener(handler);
browser.tabs.sendMessage(tab.id, {url: url, data: data});
chrome.tabs.onUpdated.addListener(handler);
}
);
};

browser.browserAction.onClicked.addListener(() => {
browser.tabs.captureVisibleTab((screenshotUrl) => {
postData(endpoint, {"image": screenshotUrl});
chrome.action.onClicked.addListener(() => {
chrome.tabs.captureVisibleTab((screenshotUrl) => {
postData(endpoint, { "image": screenshotUrl });
});
});

// Listen for connections from the content script
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (msg.ready) {
console.log("Content script is ready");
}
});
});
});
18 changes: 8 additions & 10 deletions browser-extension/manifest.json
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
{
"name": "Screenshot.rocks: One-click design mockups",
"version": "1.0",
"name": "Screenshot.rocks: One-click screenshot capture and design mockups",
"version": "1.1",
"description": "Create beautiful browser and mobile mockups in one-click.",
"background": {
"persistent": false,
"scripts": [
"background.js"
]
"service_worker": "background.js"
},
"browser_action": {
"action": {
"default_icon": "button.png",
"default_title": "Create Mockup Image!"
"default_title": "Capture a screenshot"
},
"permissions": [
"<all_urls>"
"activeTab"
],
"manifest_version": 2,
"host_permissions": [],
"manifest_version": 3,
"icons": {
"16": "16.png",
"48": "48.png",
Expand Down
59 changes: 56 additions & 3 deletions browser-extension/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,66 @@
<head>
<style>
body {
padding: 30px;
text-align: center;
font-size: 1.4em;;
font-size: 1.4em;
background-color: #e9ddff;
font-family: Arial, sans-serif;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 10px;
padding: 40px;
background-color: #fff;
max-width: 400px;
min-width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.screenshot-rocks-logo {
margin-bottom: 20px;
width: 100px;
animation-name: wiggle;
animation-iteration-count: infinite;
animation-duration: 0.3s;
animation-direction: alternate;
border-radius: 5px;
}

@keyframes wiggle {
from {
transform: rotate(10deg);
}
to {
transform: rotate(-10deg);
}
}
</style>
</head>
<body>
Parsing screenshot...
<div class="wrapper">
<div class="content">
<img id="screenshot" src="128.png" class="screenshot-rocks-logo" alt="Screenshot.rocks logo">
<p>
Capturing screenshot...
</p>
</div>
</div>
</body>
</html>
40 changes: 22 additions & 18 deletions browser-extension/screenshot.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
window.browser = (() => window.msBrowser || window.browser || window.chrome)();
// Establish a connection with the background script
const port = chrome.runtime.connect({name: "screenshot"});

const handler = (message) => {
browser.runtime.onMessage.removeListener(handler);
const form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", message.url);
form.setAttribute('enctype', 'application/x-www-form-urlencoded');
// Inform the background script that the content script is ready
port.postMessage({ready: true});

for (const key in message.data) {
const hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", message.data[key]);
form.appendChild(hiddenField);
}
// Listen for messages from the background script
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.url && message.data) {
const form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", message.url);
form.setAttribute('enctype', 'application/x-www-form-urlencoded');

document.body.appendChild(form);
form.submit();
}
for (const key in message.data) {
const hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", message.data[key]);
form.appendChild(hiddenField);
}

browser.runtime.onMessage.addListener(handler);
document.body.appendChild(form);
form.submit();
}
});

0 comments on commit 7bd1c9b

Please sign in to comment.