#7622: MV3: Add support for SVG theme icons #7925

fregante · 2024-03-14T12:49:37Z

Ready for review, but not complete.

What does this PR do?

Continues from #7622: Add support for MV3 to setToolbarIcon via chrome.offscreen #7634
Will eventually fix MV3 support for custom browser action icon #7622

Checklist

Remove hardcoded demo image
Deploy our own proxy
Update tests
Designate a primary reviewer: @grahamlangford

codecov · 2024-03-15T04:41:21Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 72.91%. Comparing base (602a7de) to head (80c1062).

❗ Current head 80c1062 differs from pull request most recent head 5ffd4d9. Consider uploading reports for the commit 5ffd4d9 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7925   +/-   ##
=======================================
  Coverage   72.91%   72.91%           
=======================================
  Files        1291     1291           
  Lines       40206    40206           
  Branches     7482     7482           
=======================================
  Hits        29315    29315           
  Misses      10891    10891

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

fregante · 2024-03-15T05:45:47Z

Current status:

all online solutions expect this issue to be solved via postMessage, which is not available for MV3 offscreen documents
runtime.sendMessage does not appear to support "transferable" objects, so I can't pass around Blob, ImageData, ImageBitmap
those types aren't exactly "serializable"
probably the only way I can do this is to:
1. pass the url to the offscreen document
2. return a raw array of pixels in the offscreen document (via getImageData().data)
3. use OffscreenCanvas again to paint it in the background worker
4. use getImageData() to get the proper ImageData object again

fregante · 2024-03-15T06:11:43Z

Can we just setup a proxy? This appears to have too many small issues to be maintainable. If we spun up a small server/lambda/vercel we could pass an SVG URL and receive a PNG, preserving most of the existing code here

+ if (url.endsWith('svg')) {
+  url = `https://svg-to-png.pixiebrix.com/?width=32&height=32&url=${url}`
+ }
const { data } = await axios.get<Blob>(url, { responseType: "blob" });
return await blobToImageData(data);

The proxy itself can use any off-the-shelves SVG-to-PNG converter. Example:

We'll need it until it's natively supported:

Proposal: Add Support for Dynamic SVG Icons in browser.action.setIcon() w3c/webextensions#462

fregante · 2024-03-15T11:52:23Z

Most of the code improvements were extracted to a non-MV3-specific PR that is ready to be reviewed and merged #7935

fregante · 2024-03-16T06:16:06Z

src/background/setToolbarIconFromTheme.ts

@@ -25,6 +25,8 @@ export default async function setToolbarIconFromTheme({
  toolbarIcon,
  themeName,
 }: Pick<ThemeAssets, "logo" | "toolbarIcon" | "themeName">) {
+  toolbarIcon =
+    "https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg";
  if (toolbarIcon) {


Hardcoded demo image. This image is SVG and lacks a height/width attribute, which further complicates things without a proxy.

fregante · 2024-03-16T06:17:01Z

src/utils/canvasUtils.ts

-  await image.decode();
-  // `createImageBitmap` will fail on SVGs that lack width/height attributes, so we must use <img>
-  return image;
+  return blobToImageData(blob, width, height);


Boom. This is all that's needed to fully support SVGs both in MV2 and MV3.

Compare it to the chrome.offscreen-based version (which still had edge cases): https://github.com/pixiebrix/pixiebrix-extension/pull/7925/files/12865f341294d30f965c0cd9ae342ba8fc0e9d97..1a024cf3ce400684bf73ddd0e60be282083cff0b

fregante · 2024-03-16T06:19:13Z

src/utils/canvasUtils.ts

+}
+
+function getSvgProxyUrl(url: string): string {
+  return `https://svg-to-png.mrproper.dev/${url}`;


Rust-based demo proxy working on CloudFlare Workers. We need to deploy our own before merging this PR

https://github.com/GewoonJaap/svg-to-png-cf-worker

grahamlangford · 2024-03-18T14:55:34Z

Can we just setup a proxy? This appears to have too many small issues to be maintainable. If we spun up a small server/lambda/vercel we could pass an SVG URL and receive a PNG, preserving most of the existing code here
+ if (url.endsWith('svg')) {
+  url = `https://svg-to-png.pixiebrix.com/?width=32&height=32&url=${url}`
+ }
const { data } = await axios.get<Blob>(url, { responseType: "blob" });
return await blobToImageData(data);
The proxy itself can use any off-the-shelves SVG-to-PNG converter. Example:

source: https://github.com/GewoonJaap/svg-to-png-cf-worker

live URL: https://svg-to-png.mrproper.dev/https://docs.tandoor.dev/logo_color.svg

We'll need it until it's natively supported:

Proposal: Add Support for Dynamic SVG Icons in browser.action.setIcon() w3c/webextensions#462

It's unfortunate Heroku doesn't support serverless functions. Let me discuss with @johnnymetz what the best approach would be for us. I don't see why we couldn't.

Alternatively, we might just setup an endpoint on App.

fregante · 2024-03-18T15:22:50Z

We also have an account on Vercel already so we could set that up. CloudFlare might be even safer (more generous free plan, as well as a repo ready to be deployed)

grahamlangford · 2024-03-19T15:53:11Z

@johnnymetz will create a separate Extension issue to look into this. We're going to pursue the cf worker solution initially.

johnnymetz · 2024-03-19T16:12:36Z

Here's the issue: #7982

twschiller · 2024-03-25T21:10:22Z

Closing out this PR because we're going to be creating/hosting the PNG based icon: https://www.notion.so/pixiebrix/Support-custom-branding-MV3-browser-action-icon-f43f5cf790ed4776b15e23638f5ce580?pvs=4

fregante · 2024-03-26T01:27:19Z

If we don't support SVG here, we still need to apply most changes in this PR

Make utility functions more self-contained

12865f3

twschiller added the mv3 label Mar 14, 2024

twschiller assigned fregante Mar 14, 2024

Base implementation

7119df4

vercel bot deployed to Preview March 15, 2024 04:34 View deployment

fregante added 3 commits March 15, 2024 13:08

Lint

543d9f0

Complete implementation

3eae7ee

Don't attempt to pass around the Blob

1a024cf

vercel bot deployed to Preview March 15, 2024 05:39 View deployment

fregante mentioned this pull request Mar 15, 2024

Improve canvas utils in the browser action #7935

Merged

3 tasks

Restart PR from scratch, discarding offscreen API attempt

80c1062

vercel bot deployed to Preview March 16, 2024 05:48 View deployment

fregante added 2 commits March 16, 2024 14:12

Just use a proxy

f77814b

Hard-code demo URL

5ffd4d9

vercel bot deployed to Preview March 16, 2024 06:16 View deployment

fregante commented Mar 16, 2024

View reviewed changes

fregante assigned grahamlangford Mar 16, 2024

fregante requested review from twschiller and grahamlangford March 16, 2024 06:23

fregante mentioned this pull request Mar 19, 2024

#7673: Avoid CORS issues in ImageReader #7972

Merged

3 tasks

johnnymetz mentioned this pull request Mar 19, 2024

Setup proxy to convert SVG to PNG #7982

Closed

twschiller added this to the 1.8.12 milestone Mar 21, 2024

twschiller closed this Mar 25, 2024

fregante deleted the F/mv3/action-icon branch March 27, 2024 08:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#7622: MV3: Add support for SVG theme icons #7925

#7622: MV3: Add support for SVG theme icons #7925

fregante commented Mar 14, 2024 •

edited

Loading

codecov bot commented Mar 15, 2024 •

edited

Loading

fregante commented Mar 15, 2024

fregante commented Mar 15, 2024

fregante commented Mar 15, 2024 •

edited

Loading

fregante Mar 16, 2024 •

edited

Loading

fregante Mar 16, 2024 •

edited

Loading

fregante Mar 16, 2024

grahamlangford commented Mar 18, 2024

fregante commented Mar 18, 2024

grahamlangford commented Mar 19, 2024 •

edited

Loading

johnnymetz commented Mar 19, 2024

twschiller commented Mar 25, 2024

fregante commented Mar 26, 2024

#7622: MV3: Add support for SVG theme icons #7925

#7622: MV3: Add support for SVG theme icons #7925

Conversation

fregante commented Mar 14, 2024 • edited Loading

What does this PR do?

Checklist

codecov bot commented Mar 15, 2024 • edited Loading

Codecov Report

fregante commented Mar 15, 2024

fregante commented Mar 15, 2024

fregante commented Mar 15, 2024 • edited Loading

fregante Mar 16, 2024 • edited Loading

Choose a reason for hiding this comment

fregante Mar 16, 2024 • edited Loading

Choose a reason for hiding this comment

fregante Mar 16, 2024

Choose a reason for hiding this comment

grahamlangford commented Mar 18, 2024

fregante commented Mar 18, 2024

grahamlangford commented Mar 19, 2024 • edited Loading

johnnymetz commented Mar 19, 2024

twschiller commented Mar 25, 2024

fregante commented Mar 26, 2024

fregante commented Mar 14, 2024 •

edited

Loading

codecov bot commented Mar 15, 2024 •

edited

Loading

fregante commented Mar 15, 2024 •

edited

Loading

fregante Mar 16, 2024 •

edited

Loading

fregante Mar 16, 2024 •

edited

Loading

grahamlangford commented Mar 19, 2024 •

edited

Loading