From 7bd1c9b1ee29175c18e8671768d8f6d13d4d94b4 Mon Sep 17 00:00:00 2001 From: Dave Earley Date: Sun, 8 Sep 2024 11:35:44 -0700 Subject: [PATCH] Update browser extension to manifest v3 --- browser-extension/background.js | 36 ++++++++++++-------- browser-extension/manifest.json | 18 +++++----- browser-extension/post.html | 59 +++++++++++++++++++++++++++++++-- browser-extension/screenshot.js | 40 ++++++++++++---------- 4 files changed, 108 insertions(+), 45 deletions(-) diff --git a/browser-extension/background.js b/browser-extension/background.js index bbcad02..dc5d465 100644 --- a/browser-extension/background.js +++ b/browser-extension/background.js @@ -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"); + } }); -}); \ No newline at end of file +}); diff --git a/browser-extension/manifest.json b/browser-extension/manifest.json index 46a0b93..8e67b3e 100644 --- a/browser-extension/manifest.json +++ b/browser-extension/manifest.json @@ -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": [ - "" + "activeTab" ], - "manifest_version": 2, + "host_permissions": [], + "manifest_version": 3, "icons": { "16": "16.png", "48": "48.png", diff --git a/browser-extension/post.html b/browser-extension/post.html index a0fcbde..0ff0a20 100644 --- a/browser-extension/post.html +++ b/browser-extension/post.html @@ -3,13 +3,66 @@ -Parsing screenshot... +
+
+ +

+ Capturing screenshot... +

+
+
diff --git a/browser-extension/screenshot.js b/browser-extension/screenshot.js index bc40d1a..93cb6a4 100644 --- a/browser-extension/screenshot.js +++ b/browser-extension/screenshot.js @@ -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(); + } +});