Reply to thread

Message

<blockquote data-quote="Monkey D Dragon" data-source="post: 31389357" data-attributes="member: 587008">මේ විදිහට folder එකක් හදන්නඒක ඇතුලේ&nbsp; &quot;icons&quot; folder එකත් හදන්න images වලට paint වලින් මොනවා හරි png ටිකක් හදලා resolutions&nbsp; දාන්න match වෙන්නopen-original-image/├── manifest.json&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; # Extension manifest (Manifest V3)├── background.js&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; # Service worker — creates context menu, handles clicks├── content.js&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; # Content script — finds the real image under cursor└── icons/&nbsp; &nbsp; ├── icon16.png&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; # resolution 16x16&nbsp; &nbsp; ├── icon48.png&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; # resolution 48x48&nbsp; &nbsp; └── icon128.png&nbsp; &nbsp; &nbsp;&nbsp; # resolution 128x128මේ files note pad එකෙන් හදලා හරි&nbsp; extension එක්ක save කරන්න manifest.json[CODE=json]{&nbsp; &quot;manifest_version&quot;: 3,&nbsp; &quot;name&quot;: &quot;Open Original Image — Instagram&quot;,&nbsp; &quot;version&quot;: &quot;1.0&quot;,&nbsp; &quot;description&quot;: &quot;Right-click any image on Instagram and open the full-resolution original in a new tab.&quot;,&nbsp; &quot;permissions&quot;: [&quot;contextMenus&quot;, &quot;activeTab&quot;],&nbsp; &quot;icons&quot;: {&nbsp; &nbsp; &quot;16&quot;: &quot;icons/icon16.png&quot;,&nbsp; &nbsp; &quot;48&quot;: &quot;icons/icon48.png&quot;,&nbsp; &nbsp; &quot;128&quot;: &quot;icons/icon128.png&quot;&nbsp; },&nbsp; &quot;background&quot;: {&nbsp; &nbsp; &quot;service_worker&quot;: &quot;background.js&quot;&nbsp; },&nbsp; &quot;content_scripts&quot;: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &quot;matches&quot;: [&quot;*://*.instagram.com/*&quot;],&nbsp; &nbsp; &nbsp; &quot;js&quot;: [&quot;content.js&quot;],&nbsp; &nbsp; &nbsp; &quot;run_at&quot;: &quot;document_idle&quot;&nbsp; &nbsp; }&nbsp; ]}[/CODE]background.js[CODE=javascript]// Create context menu item on installchrome.runtime.onInstalled.addListener(() =&gt; {&nbsp; chrome.contextMenus.create({&nbsp; &nbsp; id: &quot;open-original-image&quot;,&nbsp; &nbsp; title: &quot;Open Original Image in New Tab&quot;,&nbsp; &nbsp; contexts: [&quot;all&quot;],&nbsp; &nbsp; documentUrlPatterns: [&quot;*://*.instagram.com/*&quot;]&nbsp; });});// Handle context menu clickchrome.contextMenus.onClicked.addListener((info, tab) =&gt; {&nbsp; if (info.menuItemId !== &quot;open-original-image&quot;) return;&nbsp; // Ask the content script for the image URL at the last right-click position&nbsp; chrome.tabs.sendMessage(tab.id, { action: &quot;getImageUrl&quot; }, (response) =&gt; {&nbsp; &nbsp; if (chrome.runtime.lastError) {&nbsp; &nbsp; &nbsp; console.warn(&quot;Content script not reachable:&quot;, chrome.runtime.lastError.message);&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; if (response &amp;&amp; response.url) {&nbsp; &nbsp; &nbsp; chrome.tabs.create({ url: response.url, active: false });&nbsp; &nbsp; }&nbsp; });});[/CODE]content.js[CODE=javascript]/**&nbsp;* Instagram Image Finder — Content Script&nbsp;*&nbsp;* Tracks the last right-click position, then on demand walks&nbsp;* the DOM stack at those coordinates to find the real &lt;img&gt; element&nbsp;* (even under Instagram's overlay divs) and returns the highest&nbsp;* resolution URL from srcset.&nbsp;*/let lastX = 0;let lastY = 0;// Track every contextmenu event to know exactly where the user right-clickeddocument.addEventListener(&quot;contextmenu&quot;, (e) =&gt; {&nbsp; lastX = e.clientX;&nbsp; lastY = e.clientY;}, true);/**&nbsp;* Parse a srcset string and return the URL with the largest width descriptor.&nbsp;* Falls back to the last entry if no width descriptors are found.&nbsp;*/function getHighestResSrcsetUrl(srcset) {&nbsp; if (!srcset) return null;&nbsp; const candidates = srcset.split(&quot;,&quot;).map((entry) =&gt; {&nbsp; &nbsp; const parts = entry.trim().split(/\s+/);&nbsp; &nbsp; const url = parts[0];&nbsp; &nbsp; const descriptor = parts[1] || &quot;&quot;;&nbsp; &nbsp; const width = parseInt(descriptor, 10) || 0;&nbsp; &nbsp; return { url, width };&nbsp; });&nbsp; if (candidates.length === 0) return null;&nbsp; // Sort descending by width, pick the largest&nbsp; candidates.sort((a, b) =&gt; b.width - a.width);&nbsp; return candidates[0].url;}/**&nbsp;* Given a DOM element, try to extract the best image URL from it.&nbsp;* Checks: &lt;img&gt; src/srcset, CSS background-image.&nbsp;*/function extractImageUrl(el) {&nbsp; if (!el) return null;&nbsp; // Direct &lt;img&gt; element&nbsp; if (el.tagName === &quot;IMG&quot;) {&nbsp; &nbsp; const srcsetUrl = getHighestResSrcsetUrl(el.srcset);&nbsp; &nbsp; if (srcsetUrl) return srcsetUrl;&nbsp; &nbsp; if (el.src) return el.src;&nbsp; }&nbsp; // CSS background-image&nbsp; const bg = getComputedStyle(el).backgroundImage;&nbsp; if (bg &amp;&amp; bg !== &quot;none&quot;) {&nbsp; &nbsp; const match = bg.match(/url\([&quot;']?(.*?)[&quot;']?\)/);&nbsp; &nbsp; if (match &amp;&amp; match[1]) return match[1];&nbsp; }&nbsp; return null;}/**&nbsp;* Main finder: walks through all elements at the click point,&nbsp;* then searches their subtrees for &lt;img&gt; elements.&nbsp;*/function findImageAtPoint(x, y) {&nbsp; // 1. Get all elements stacked at this coordinate (pierces overlays)&nbsp; const stack = document.elementsFromPoint(x, y);&nbsp; // 2. First pass — check if any element in the stack IS an &lt;img&gt;&nbsp; for (const el of stack) {&nbsp; &nbsp; const url = extractImageUrl(el);&nbsp; &nbsp; if (url) return url;&nbsp; }&nbsp; // 3. Second pass — for each element in the stack, look for &lt;img&gt; children&nbsp; //&nbsp; &nbsp; This catches Instagram's pattern: overlay div sits above, &lt;img&gt; is a sibling/child&nbsp; for (const el of stack) {&nbsp; &nbsp; // Check the element's parent container for nearby &lt;img&gt; tags&nbsp; &nbsp; const container = el.closest(&quot;div&quot;);&nbsp; &nbsp; if (container) {&nbsp; &nbsp; &nbsp; const imgs = container.querySelectorAll(&quot;img&quot;);&nbsp; &nbsp; &nbsp; for (const img of imgs) {&nbsp; &nbsp; &nbsp; &nbsp; const url = extractImageUrl(img);&nbsp; &nbsp; &nbsp; &nbsp; if (url) return url;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp; // 4. Third pass — walk up the tree further, looking for the post/story container&nbsp; for (const el of stack) {&nbsp; &nbsp; // Instagram uses &lt;article&gt; for feed posts&nbsp; &nbsp; const article = el.closest(&quot;article&quot;);&nbsp; &nbsp; if (article) {&nbsp; &nbsp; &nbsp; // Find all images within the article, pick the one closest to click point&nbsp; &nbsp; &nbsp; const imgs = article.querySelectorAll(&quot;img&quot;);&nbsp; &nbsp; &nbsp; let bestUrl = null;&nbsp; &nbsp; &nbsp; let bestDistance = Infinity;&nbsp; &nbsp; &nbsp; for (const img of imgs) {&nbsp; &nbsp; &nbsp; &nbsp; // Skip tiny images (profile pics, icons — usually &lt; 40px)&nbsp; &nbsp; &nbsp; &nbsp; if (img.naturalWidth &gt; 0 &amp;&amp; img.naturalWidth &lt; 40) continue;&nbsp; &nbsp; &nbsp; &nbsp; if (img.width &lt; 40 &amp;&amp; img.height &lt; 40) continue;&nbsp; &nbsp; &nbsp; &nbsp; const rect = img.getBoundingClientRect();&nbsp; &nbsp; &nbsp; &nbsp; // Check if click point is inside this image's bounds&nbsp; &nbsp; &nbsp; &nbsp; if (x &gt;= rect.left &amp;&amp; x &lt;= rect.right &amp;&amp; y &gt;= rect.top &amp;&amp; y &lt;= rect.bottom) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const url = extractImageUrl(img);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (url) return url;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // Otherwise measure distance&nbsp; &nbsp; &nbsp; &nbsp; const cx = rect.left + rect.width / 2;&nbsp; &nbsp; &nbsp; &nbsp; const cy = rect.top + rect.height / 2;&nbsp; &nbsp; &nbsp; &nbsp; const dist = Math.hypot(x - cx, y - cy);&nbsp; &nbsp; &nbsp; &nbsp; if (dist &lt; bestDistance) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bestDistance = dist;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bestUrl = extractImageUrl(img);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if (bestUrl) return bestUrl;&nbsp; &nbsp; }&nbsp; }&nbsp; return null;}// Listen for messages from the background service workerchrome.runtime.onMessage.addListener((message, sender, sendResponse) =&gt; {&nbsp; if (message.action === &quot;getImageUrl&quot;) {&nbsp; &nbsp; const url = findImageAtPoint(lastX, lastY);&nbsp; &nbsp; sendResponse({ url: url || null });&nbsp; }&nbsp; return true; // keep channel open for async response});[/CODE]You can then load it in Chrome via chrome://extensions → Developer mode → Load unpacked → point to that folder.</blockquote>

[QUOTE="Monkey D Dragon, post: 31389357, member: 587008"] මේ විදිහට folder එකක් හදන්න ඒක ඇතුලේ "icons" folder එකත් හදන්න images වලට paint වලින් මොනවා හරි png ටිකක් හදලා resolutions දාන්න match වෙන්න open-original-image/ ├── manifest.json # Extension manifest (Manifest V3) ├── background.js # Service worker — creates context menu, handles clicks ├── content.js # Content script — finds the real image under cursor └── icons/ ├── icon16.png # resolution 16x16 ├── icon48.png # resolution 48x48 └── icon128.png # resolution 128x128 මේ files note pad එකෙන් හදලා හරි extension එක්ක save කරන්න manifest.json [CODE=json]{ "manifest_version": 3, "name": "Open Original Image — Instagram", "version": "1.0", "description": "Right-click any image on Instagram and open the full-resolution original in a new tab.", "permissions": ["contextMenus", "activeTab"], "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["*://*.instagram.com/*"], "js": ["content.js"], "run_at": "document_idle" } ] } [/CODE] background.js [CODE=javascript]// Create context menu item on install chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: "open-original-image", title: "Open Original Image in New Tab", contexts: ["all"], documentUrlPatterns: ["*://*.instagram.com/*"] }); }); // Handle context menu click chrome.contextMenus.onClicked.addListener((info, tab) => { if (info.menuItemId !== "open-original-image") return; // Ask the content script for the image URL at the last right-click position chrome.tabs.sendMessage(tab.id, { action: "getImageUrl" }, (response) => { if (chrome.runtime.lastError) { console.warn("Content script not reachable:", chrome.runtime.lastError.message); return; } if (response && response.url) { chrome.tabs.create({ url: response.url, active: false }); } }); }); [/CODE] content.js [CODE=javascript]/** * Instagram Image Finder — Content Script * * Tracks the last right-click position, then on demand walks * the DOM stack at those coordinates to find the real <img> element * (even under Instagram's overlay divs) and returns the highest * resolution URL from srcset. */ let lastX = 0; let lastY = 0; // Track every contextmenu event to know exactly where the user right-clicked document.addEventListener("contextmenu", (e) => { lastX = e.clientX; lastY = e.clientY; }, true); /** * Parse a srcset string and return the URL with the largest width descriptor. * Falls back to the last entry if no width descriptors are found. */ function getHighestResSrcsetUrl(srcset) { if (!srcset) return null; const candidates = srcset.split(",").map((entry) => { const parts = entry.trim().split(/\s+/); const url = parts[0]; const descriptor = parts[1] || ""; const width = parseInt(descriptor, 10) || 0; return { url, width }; }); if (candidates.length === 0) return null; // Sort descending by width, pick the largest candidates.sort((a, b) => b.width - a.width); return candidates[0].url; } /** * Given a DOM element, try to extract the best image URL from it. * Checks: <img> src/srcset, CSS background-image. */ function extractImageUrl(el) { if (!el) return null; // Direct <img> element if (el.tagName === "IMG") { const srcsetUrl = getHighestResSrcsetUrl(el.srcset); if (srcsetUrl) return srcsetUrl; if (el.src) return el.src; } // CSS background-image const bg = getComputedStyle(el).backgroundImage; if (bg && bg !== "none") { const match = bg.match(/url\(["']?(.*?)["']?\)/); if (match && match[1]) return match[1]; } return null; } /** * Main finder: walks through all elements at the click point, * then searches their subtrees for <img> elements. */ function findImageAtPoint(x, y) { // 1. Get all elements stacked at this coordinate (pierces overlays) const stack = document.elementsFromPoint(x, y); // 2. First pass — check if any element in the stack IS an <img> for (const el of stack) { const url = extractImageUrl(el); if (url) return url; } // 3. Second pass — for each element in the stack, look for <img> children // This catches Instagram's pattern: overlay div sits above, <img> is a sibling/child for (const el of stack) { // Check the element's parent container for nearby <img> tags const container = el.closest("div"); if (container) { const imgs = container.querySelectorAll("img"); for (const img of imgs) { const url = extractImageUrl(img); if (url) return url; } } } // 4. Third pass — walk up the tree further, looking for the post/story container for (const el of stack) { // Instagram uses <article> for feed posts const article = el.closest("article"); if (article) { // Find all images within the article, pick the one closest to click point const imgs = article.querySelectorAll("img"); let bestUrl = null; let bestDistance = Infinity; for (const img of imgs) { // Skip tiny images (profile pics, icons — usually < 40px) if (img.naturalWidth > 0 && img.naturalWidth < 40) continue; if (img.width < 40 && img.height < 40) continue; const rect = img.getBoundingClientRect(); // Check if click point is inside this image's bounds if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) { const url = extractImageUrl(img); if (url) return url; } // Otherwise measure distance const cx = rect.left + rect.width / 2; const cy = rect.top + rect.height / 2; const dist = Math.hypot(x - cx, y - cy); if (dist < bestDistance) { bestDistance = dist; bestUrl = extractImageUrl(img); } } if (bestUrl) return bestUrl; } } return null; } // Listen for messages from the background service worker chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.action === "getImageUrl") { const url = findImageAtPoint(lastX, lastY); sendResponse({ url: url || null }); } return true; // keep channel open for async response }); [/CODE] You can then load it in Chrome via chrome://extensions → [B]Developer mode[/B] → [B]Load unpacked[/B] → point to that folder. [/QUOTE]

Verification

Hathara warak wissa keeyada? (Hathara wadi karanna 20)

Search

Latest ads

Reply to thread