Hi!

I wanted to convert a button entirely done in HTML/CSS into a .svg image for direct usage elsewhere, but the only way I see to take a capture is to drag the mouse over elements in the web page, which is pretty inconvenient and error-prone.

It would be nice if it was possible to use a css selector to target just the right element, like uBlock Origin does.

i want to capture a specific element, it'd be good to select it in a similar fashion to the devtools element selector

When taking an SVG screenshot of the Wikipedia home page, the header is missing:

This is not a simple image, instead it is:

<span class="central-textlogo__image sprite svg-Wikipedia_wordmark"> Wikipedia </span>

Chrome Dev Tools resolve this to an SVG image:

https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-e99844f6.svg

This in turn is a collection of vectors for the icons further down the page.

The content script can't access .cssRules of cross-origin stylesheets, while the background page should be in theory (if not it could at least fetch() and parse it with a parser).

This may be a weired question to ask in a bug tracker, but how do I use this?

The corresponding issue/feature requets would be: Add one or two lines of usage instructions to the GitHub README.md or the website or the Firefox/Chrome addon description.
Optionally, you could also add a "first use" screen, displayed as a website immediately after installing the addon (some other addons or even browser-unrelated software packages do this).

What I did so far:
Installed the addon (Version 0.11.6) in Firefox (version 115.6.0esr 64-Bit). The addon installed just fine and shows up in the list of extensions. I can change settings, check for updates, etc.

However, I see no UI whatsoever that allows me to take a SVG screenshot. I do not even know what to look for (a button, context menu, toolbar icon, menu entry, shortcut?).

I do have the built-in Firefox screenshot tool available, but when I save the screenshot, it offers no option to make it a SVG file either (even when I name it .svg, it is still a PNG file, content-wise).
I obviously do have the built-in Firefox "Save As..." menu entry, but it offers the same choices as without the addon (HTML only, etc.).

Please advise and/or add some usage instructions somewhere.

The extension selects the specified area, however it doesn't do anything after it, like download the required .svg file

The behavior:-

ps:- If there are some additional steps to be done after the selection, I think it'd be better to mention it in the readme file and the extension page :)

I am trying to capture a part of https://github.com/orgs/JabRef/projects/3/views/3 and I get TypeError: length is undefined.

I copy all messags in details.

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). content.js:64:35

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). content.js:64:260

Content script running content.js:47127:11

Capturing captureArea content.js:47160:11

Error resolving @font-face src URLs for styleSheet, skipping

CSSStyleSheet

DOMException: CSSStyleSheet.rules getter: Not allowed to access cross-origin stylesheet

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14887

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

asyncparcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:14915:15

Error resolving @font-face src URLs for styleSheet, skipping

CSSStyleSheet

DOMException: CSSStyleSheet.rules getter: Not allowed to access cross-origin stylesheet

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14887

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

asyncparcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:14915:15

Error resolving @font-face src URLs for styleSheet, skipping

CSSStyleSheet

DOMException: CSSStyleSheet.rules getter: Not allowed to access cross-origin stylesheet

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14887

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

asyncparcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:14915:15

Error resolving @font-face src URLs for styleSheet, skipping

CSSStyleSheet

DOMException: CSSStyleSheet.rules getter: Not allowed to access cross-origin stylesheet

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14887

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

asyncparcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:14915:15

Error resolving @font-face src URLs for styleSheet, skipping

CSSStyleSheet

DOMException: CSSStyleSheet.rules getter: Not allowed to access cross-origin stylesheet

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14887

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

asyncparcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:14915:15

Error resolving @font-face src URLs for styleSheet, skipping

CSSStyleSheet

DOMException: CSSStyleSheet.rules getter: Not allowed to access cross-origin stylesheet

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14887

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

asyncparcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:14915:15

Error resolving @font-face src URLs for styleSheet, skipping

CSSStyleSheet

DOMException: CSSStyleSheet.rules getter: Not allowed to access cross-origin stylesheet

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14887

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

asyncparcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:14915:15

Error resolving @font-face src URLs for styleSheet, skipping

CSSStyleSheet

DOMException: CSSStyleSheet.rules getter: Not allowed to access cross-origin stylesheet

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14887

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

asyncparcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:14915:15
TypeError: length is undefined

parseCSSLength moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:12660

addBackgroundAndBorders moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14443

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14333

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

handleElement moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14415

walkNode moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14671

elementToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14920

documentToSVG moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:14871

capture moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47168

main moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47139

async*parcelRequire<["src/content.ts"]< moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:47307

newRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:49

parcelRequire moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:83

 moz-extension://38595c1a-b345-4293-90ff-1985ccdb8a55/src/content.js:122

content.js:47145:13

Hi

As per I noticed, there is no license in this repo. This means this addon is a proprietary. This is intended?

When making a screenshot of the following HTML file, the bullets before "Foo" and "Bar" are missing:

<html>
  <body>
    <ul>
      <li>Foo</li>
      <li>Bar</li>
    </ul>
  </body>
</html>

This is the case with both Firefox 102.10.0esr-1 and Chromium 112.0.5615.138-1.

Chrome is working on improving the ability to copy SVG to the clipboard, can you reuse the Async Clipboard API and add image/svg+xml? We need to test that it doesn't crash before shipping.

9612565

await navigator.clipboard.writeText(svgString)
// const plainTextBlob = new Blob([svgString], { type: 'text/plain' })
// Copying image/svg+xml is not yet supported in Chrome and crashes the tab
// await navigator.clipboard.write([
//  new ClipboardItem({
//    [blob.type]: blob,
//    'text/plain': plainTextBlob,
//  }),
// ])

Now you can use ClipboardItem.supports('image/svg+xml') to detect if SVG is supported.

When creating a screen of a page containing the bootstrap-icon font import, the resulting svg does not render the fonts correctly even when using the 'keep links' option.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: packageRules[4]: packageRules cannot combine both matchUpdateTypes and extractVersion. Rule: {"extractVersion":"^v(?<version>.*)$","commitMessageTopic":"Node.js","matchPackageNames":["node"],"matchUpdateTypes":["major"],"enabled":true}

Some web pages return loaded state while dynamic loading of content is still in progress. In such cases the screenshot only contains a screenshot of the busy indicater, e.g. spinning wheel icon.
Would it be possible to configure a delay in seconds until the screenshot is exported? A delay in seconds would be totally sufficient to help with this issue, it's not necessary to auto-detect some event or end of loading.

Thank you very much!
Martin

When I try to capture (using either of the 2 methods) it creates a file but the screenshot does not capture the dashboard charts that are on the page. They are oddly blank but the rest of the page is there. I tried with Chrome and Firefox, same result. I tried with Greenshot and that does work but I prefer yours for SVG output.

Here are the two samples:
Greenshot:
https://1drv.ms/u/s!ApXG-VZ_cmSJto8afIW_TCeWfJG2mQ?e=Ml8FHI

SVG:
https://1drv.ms/u/s!ApXG-VZ_cmSJto8b9Byabe2g-p_C-A?e=KT1kDn

Hope you can help me make this work!

I tried to create a screenshot of a page that contains several <canvas> elements. These elements are missing from the resulting SVG. The rational for this is given here.

Obviously, including the canvas elements in the SVG is only possible as a raster image. However, I still think that including the raster images is beneficial in comparison to a pure raster screenshot: You retain all the other text elements and links that are included on the site. After all, other images are embedded as well.

Otherwise, this extension is working great, so I was surprised that parts of the screenshot I created were missing. Maybe this is something worth considering? Alternatively, I would suggest to add a small note to the README to mention that canvas elements are excluded.

Title

Hi,
I'm very enthusiastic about your extension.
I want to ask if it is possible to insert a function that gives me the chance to select one or more custom attributes and maintain them in the final svg.
E.g. I have this html code

Text

Davide

When taking screenshots with pages using transform, mix-blend-mode or shadows they get ignored in the screen capture?
Is that an intended feature or can that be implemented in the conversion?

All the best,
Alex

Both the capture viewport and capture area options cause the following alert to appear.

Alert:

An error happened while capturing the page: length is undefined
Check the developer console for more information.

Console:

TypeError: length is undefined
    parseCSSLength moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:12660
    addBackgroundAndBorders moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14443
    handleElement moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14333
    walkNode moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14671
    handleElement moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14415
    walkNode moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14671
    handleElement moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14415
    walkNode moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14671
    handleElement moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14415
    walkNode moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14671
    handleElement moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14415
    walkNode moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14671
    handleElement moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14415
    walkNode moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14671
    elementToSVG moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14920
    documentToSVG moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:14871
    capture moz-extension://59220466-2875-42c8-a6cc-caf720919cb7/src/content.js:47168
    content.js:47145:13

Hi,

On https://medium.com/apache-pinot-developer-blog/real-time-analytics-with-presto-and-apache-pinot-part-ii-3d09ff937713,

With all of the 4 options selected (Inline resources, Keep links, Minify SVG, Pretty-print SVG) and with "Download SVG" as target, the process just hangs up and never completes.

Thanks for the awesome extension!

When making a screenshot of the following HTML file, the selected option text, either "Foo" or "Bar" is left out:

<html>
  <body>
    <label for="options">Choose an option:</label>
    <select id="options">
      <option value="foo">Foo</option>
      <option value="bar">Bar</option>
    </select>
  </body>
</html>

This is the case with both Firefox 102.10.0esr-1 and Chromium 112.0.5615.138-1.

Website being captured: https://stepbro.voring.me/~/76m0-0K

Capture:

As you can see, the animated SVG in the top right doesn't render properly and just show a red box.

1. When I selected the "minify" option, it basically just spun and spun forever and never produced an output. When I turn off the "minify" option, it produces the download in less than a second. What could cause it to get into some infinite loop while minifying?

   I'm using Chrome 108 on Windows 10, and just installed the extension with its latest version.

2. I inspected the non-minified SVG and it has a bunch of attributes like this in my text elements:

text-decoration="none solid rgb(90, 212, 230)"

Notice the "none" there, which effectively means there's no text decoration. So it should just omit this attribute, right?

3. There's a lot of other unnecessary attributes on my text elements, that set what would otherwise be default values, such as:

direction="ltr"
letter-spacing="normal"
font-style="normal"
text-rendering="auto"
unicode-bidi="normal"
font-variant="normal"
writing-mode="horizontal-tb"
user-select="auto"
text-anchor="start"

All those unnecessary attributes end up bloating the SVG a ton in size. I'm sure there's more in there too, those are just the ones I caught.

I think a quick installation/setup guide would work the best.

Is it possible to add menu with countdown delay list [2s, 5, 10s]

This is to get state of activate link, mouse-over, opened list directlty in the snapshot

Not sure if there might be any CORS issues, but it would be great if this extension also traversed down into iFrames!

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Use matchDepNames instead of matchPackageNames

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• fix(deps): update dependency xml-formatter to ^2.6.1

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency @types/file-saver to ^2.0.7
• chore(deps): update node.js to v15.14.0
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update actions/upload-artifact action to v4
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency @semantic-release/github to v10
• chore(deps): update dependency @types/firefox-webext-browser to v120
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency husky to v9
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency semantic-release-chrome to v3
• chore(deps): update dependency typescript to v5
• chore(deps): update dependency web-ext to v7
• chore(deps): update node.js to v20
• fix(deps): update dependency delay to v6
• fix(deps): update dependency pretty-bytes to v6
• fix(deps): update dependency svgo to v3
• fix(deps): update dependency xml-formatter to v3
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• fix(deps): update dependency dom-to-svg to ^0.12.2
• fix(deps): update dependency svgo to ^2.8.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency semantic-release to v19 [security]
• chore(deps): update npm to v8 [security]
• chore(deps): update dependency @sourcegraph/eslint-config to ^0.37.1
• chore(deps): update dependency eslint to ^7.32.0
• chore(deps): update dependency prettier to ^2.8.8
• chore(deps): update dependency typescript to ^4.9.5
• chore(deps): update dependency web-ext to ^6.8.0
• fix(deps): update dependency webextension-polyfill to ^0.11.0
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• fix(deps): update dependency pretty-bytes to ^5.6.0

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

It's unclear why this occurs, unfortunately the only page I can recreate this with is behind some auth (and requires a costly subscription!). I tried to find img:not([id]), but that only yielded one result. I deleted the element, and issue persisted.

I have an HTML/CSS snippet my tool is producing -- it's syntax highlighting of a programming language I'm designing -- and when I select the text and copy-paste, the text pastes through with no extra newlines or spacing.

But when I render this same HTML/CSS page to SVG using the extension, while the image renders/looks perfectly fine, when I select and copy-paste the text, it's coming through with a whole bunch of extra newlines/spacing, so the formatting of the text is all wrong.

Here's what is pasted when I copy-paste from the rendered HTML/CSS:

defn binaryToDecimalConverter(binaryDigits) {
  def < :decimal >: (| ~fold
    binaryDigits,
    < decimal: 0, idx: 0, >,
    (< :decimal, :idx >, digit) {
      def power: size(binaryDigits) - idx - 1;
      decimal := decimal + (digit * pow(2,power));
      < :decimal, idx: |+ idx,1| >;
    }
  |);
  ^decimal;
};

binaryToDecimalConverter("111110011101100");  // 31980

But here's what is pasted when I copy-paste from the rendered SVG:

defn
 
binaryToDecimalConverter
(
binaryDigits
)
 
{
    
def
 
<
 
:
decimal
 
>
:
 
(
|
 
~fold
      
binaryDigits
,
      
<
 
decimal
:
 
0
,
 
idx
:
 
0
,
 
>
,
      
(
<
 
:
decimal
,
 
:
idx
 
>
,
 
digit
)
 
{
        
def
 
power
:
 
size
(
binaryDigits
)
 
-
 
idx
 
-
 
1
;
        
decimal
 
:
=
 
decimal
 
+
 
(
digit
 
*
 
pow
(
2
,
power
)
)
;
        
<
 
:
decimal
,
 
idx
:
 
|
+
 
idx
,
1
|
 
>
;
      
}
    
|
)
;
    
^
decimal
;
 
}
;
   
binaryToDecimalConverter
(
"
111110011101100
"
)
;
  
// 31980

I thought maybe this might have been because of extra newlines/whitespace in between the SVG elements, but I tried manually removing that whitespace and that didn't fix the copy-pasting.

If it helps diagnose, here's a part of the SVG the tool is producing, for the first several text tokens on the first line of that snippet:

...

                <g data-tag="i" id="t61" class="t6" data-z-index="auto" data-stacking-context="true">
                    <title>
                        KEYWORD
                    </title>
                    <text color="rgb(90, 212, 230)" dominant-baseline="text-after-edge" font-family="&quot;Source Code Pro&quot;, monospace" font-size="24px" font-stretch="100%" font-style="normal" font-variant="normal" font-weight="400" direction="ltr" letter-spacing="normal" text-decoration="none solid rgb(90, 212, 230)" text-anchor="start" text-rendering="auto" unicode-bidi="normal" word-spacing="0px" writing-mode="horizontal-tb" user-select="auto" fill="rgb(90, 212, 230)">
                        <tspan xml:space="preserve" x="24" y="54" textLength="57.60417175292969" lengthAdjust="spacingAndGlyphs">defn</tspan>
                    </text>
                </g>
                <text color="rgb(0, 0, 0)" dominant-baseline="text-after-edge" font-family="&quot;Source Code Pro&quot;, monospace" font-size="24px" font-stretch="100%" font-style="normal" font-variant="normal" font-weight="400" direction="ltr" letter-spacing="normal" text-decoration="none solid rgb(0, 0, 0)" text-anchor="start" text-rendering="auto" unicode-bidi="normal" word-spacing="0px" writing-mode="horizontal-tb" user-select="auto" fill="rgb(0, 0, 0)">
                    <tspan xml:space="preserve" x="81.60417175292969" y="54" textLength="14.40625" lengthAdjust="spacingAndGlyphs"> </tspan>
                </text>
                <g data-tag="i" id="t11" class="t1" data-z-index="auto" data-stacking-context="true">
                    <title>
                        GENERAL
                    </title>
                    <text color="rgb(247, 241, 255)" dominant-baseline="text-after-edge" font-family="&quot;Source Code Pro&quot;, monospace" font-size="24px" font-stretch="100%" font-style="normal" font-variant="normal" font-weight="400" direction="ltr" letter-spacing="normal" text-decoration="none solid rgb(247, 241, 255)" text-anchor="start" text-rendering="auto" unicode-bidi="normal" word-spacing="0px" writing-mode="horizontal-tb" user-select="auto" fill="rgb(247, 241, 255)">
                        <tspan xml:space="preserve" x="96.01042175292969" y="54" textLength="345.60418701171875" lengthAdjust="spacingAndGlyphs">binaryToDecimalConverter</tspan>
                    </text>
                </g>

...

And here's the original HTML/CSS for that same bit of text:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
:root {
	--color-dark-gray: 34, 34, 34;				/* #222222 */
	--color-light-gray: 139, 136, 143;			/* #8B888F */
	--color-white: 247, 241, 255;				/* #F7F1FF */
	--color-light-yellow: 252, 229, 102;		/* #FCE566 */
	--color-light-orange: 255, 195, 144;		/* #FFC390 */
	--color-medium-pink: 222, 111, 255;			/* #DE6FFF */
	--color-light-green: 123, 216, 143;			/* #7BD88F */
	--color-light-blue: 90, 212, 230;			/* #5AD4E6 */
	--color-medium-purple: 148, 138, 227;		/* #948AE3 */
	--color-medium-orange: 253, 147, 78;		/* #FD934E */
	--color-dark-pink: 252, 97, 141;			/* #FC618D */
}
body {
	margin: 1em;
	padding: 0;
	background-color: rgba(var(--color-dark-gray));
	font-size: 1.5em;
}
pre {
	font-family: "Source Code Pro", monospace;
	tab-size: 4;
}
i { font-style: normal; }
i:hover { cursor: help; background-color: rgba(255,255,255,0.1); }
.t0 {
	color: rgba(var(--color-light-gray));
	font-style: italic;
}
.t1 { color: rgba(var(--color-white)); }
.t2 { color: rgba(var(--color-light-yellow)); }
.t3 { color: rgba(var(--color-light-orange)); }
.t4 { color: rgba(var(--color-medium-pink)); }
.t5 { color: rgba(var(--color-light-green)); }
.t6 { color: rgba(var(--color-light-blue)); }
.t7 { color: rgba(var(--color-medium-purple)); }
.t8 { color: rgba(var(--color-dark-pink)); }
.oops {
	/* currently unassigned */
	color: rgba(var(--color-medium-orange));
	text-decoration: underline;
	text-decoration-style: wavy;
}
</style>
</head>
<body><pre><i class="t6" title="KEYWORD">defn</i> <i class="t1" title="GENERAL">binaryToDecimalConverter</i>

...

Any ideas where the extra spacing while copy-pasting might be coming from?

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The item cannot be updated now because it is in pending review, ready to publish, or deleted status.

Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the semantic-release-chrome plugin to add more helpful information.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Steps to reproduce:

1. Visit https://cloud.binary.ninja
2. Click "Capture viewport" in the extension's menu.
3. Observe error: