katsutedev / background

The most advanced background image extension for VSCode

Background

The most advanced background image extension for VSCode

Add multiple background images for the window, editors, sidebars, or the panel. Load backgrounds from file, glob, or URL. Transition between multiple background images.

Installation

• Install from the Visual Studio Marketplace.
• Install directly from VSCode using the id katsute.code-background.

Usage

1. Type Background: Configuration in the command pallette or press the Background tab in the statusbar.
2. Select where you want to add a background (Window, Editor, Sidebar, Panel).
3. Add backgrounds and change how it should be displayed.
4. Use Background: Install or press the install button.

Features

Multiple Backgrounds

Add background images for the whole window, editors, sidebars, or the panel. Transition between multiple background images.

Full Window

Editor, Sidebar, and Terminal

Slideshow

Configuration Menu

Type Background: Configuration in the command pallette or press the Background tab in the statusbar to access the configuration menu.

Glob, URL, and Environment Variable Support

Add background images by file, folder, glob, or URL.

⚠️ Use only / for directories

node-glob only accepts / as path separators, \ is reserved for escape characters.

▲

Commands

Command	Description
Background: Install	Installs and enables the background.
Background: Uninstall	Uninstalls and disables the background.
Background: Reload	Randomizes the backgrounds. Background must already be installed.
Background: Configuration	Opens the configuration menu.
Background: Changelog	Opens changelog.

▲

Configuration

Use the Background: Configuration command to access the configuration menu.

Background properties are saved as arrays so you can have different options for different UI elements.

The order settings are saved in is:

0. Window
1. Editor
2. Sidebar
3. Panel

Background	Type	Description
background.windowBackgrounds	string[]	The list of files or globs to use for the window background image.
background.editorBackgrounds	string[]	The list of files or globs to use for editor background images.
background.sidebarBackgrounds	string[]	The list of files or globs to use for the sidebar background images.
background.panelBackgrounds	string[]	The list of files or globs to use for the panel background image.

Property	Type	Description
background.backgroundAlignment	enum[4]	The alignment of the background image.
background.backgroundAlignmentValue	string[4]	If the background image alignment is set to Manual, this is the literal value for the background-position css property. Only accepts a css <position>.
background.backgroundBlur	string[4]	Background image blur. Only accepts a css <length>.
background.backgroundOpacity	number[4]	The UI opacity. 0 is fully visible and 1 is invisible.
background.backgroundRepeat	enum[4]	The background image repeat.
background.backgroundSize	enum[4]	The background image size.
background.backgroundSizeValue	string[4]	If the background image size is set to Manual, this is the literal value for the background-size css property. Only accepts a css <position>.
background.backgroundChangeTime	number[4]	How long in seconds before the background should automatically change. Set to 0 to always use the same image.

Advanced	Type	Description
background.autoInstall	boolean	Automatically installs backgrounds and reloads the window on startup if changes are detected or VSCode updates. This option is disabled when you run the uninstall command.
background.renderContentAboveBackground	boolean	Render content like images, PDFs, and markdown previews above the background.
background.smoothImageRendering	boolean	Use smooth image rendering rather than pixelated rendering when resizing images.
background.CSS	string	Apply raw CSS to VSCode.

▲

Environment Variables

Variable	Description
${vscode:workspace}	Current VSCode project folder
${user:home}	Current user's home directory
${...}	System environment variable

▲

API

Add this extension to your package.json.

{
    ...
    "extensionDependencies": [
        "katsute.code-background"
    ]
    ...
}

Access the api by using:

const background = vscode.extensions.getExtension("katsute.code-background").exports;

• install(): void

  Runs the Background: Install command.

• uninstall(): void

  Runs the Background: Uninstall command.

• reload(): void

  Runs the Background: Reload command.

• get(ui): string[]?

  • ui : Background to get from; either window, editor, sidebar, panel.

  Returns an array of globs for the specified background.

• add(ui, glob): Promise<boolean>

  • ui : Background to add to; either window, editor, sidebar, panel.
  • glob: Glob to add.

  Returns true if successful.

• replace(ui, old, glob): Promise<boolean>

  • ui : Background to replace from; either window, editor, sidebar, panel.
  • old: Glob to replace.
  • glob: Updated glob.

  Returns true if successful.

• remove(ui, glob): Promise<boolean>

  • ui : Background to remove from; either window, editor, sidebar, panel.
  • glob: Glob to remove.

  Returns true if successful.

▲

 

This extension is released under the GNU General Public License (GPL) v2.0.

background's Issues

More specific validation patterns

Feature

Pull pattern from package json and use that for validation.

Add more specific regex validation.

Reason

Prevent confusion with invalid css values.

RangeError: Invalid string length

Operating System

Windows 10

VSCode Version

1.74.2

Extension Version

2.3.1

Issue

When attempting to add a large number of images as backgrounds, the extension fails on install throwing the following error in Output:

RangeError: Invalid string length
    at Array.join (<anonymous>)
    at getJS (c:\Users\Uncon\.vscode\extensions\katsute.code-background-2.3.1\src\extension.ts:215:44)
    at installJS (c:\Users\Uncon\.vscode\extensions\katsute.code-background-2.3.1\src\extension.ts:113:55)
    at c:\Users\Uncon\.vscode\extensions\katsute.code-background-2.3.1\src\command\install.ts:26:14
    at s.h (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:94:107622)
    at s.$executeContributedCommand (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:94:108311)
    at u.N (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:11208)
    at u.M (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:10926)
    at u.H (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:10019)
    at u.G (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:9000)
    at d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:104:7788
    at d.invoke (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:145)
    at w.deliver (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2029)
    at g.fire (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1667)
    at h.fire (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:14314)
    at d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:120:15804
    at d.invoke (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:145)
    at w.deliver (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2029)
    at g.fire (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1667)
    at h.fire (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:14314)
    at c.y (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:17324)
    at d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:15795
    at d.invoke (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:145)
    at w.deliver (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2029)
    at g.fire (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1667)
    at g.acceptChunk (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:12045)
    at d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:11332
    at Socket.l (d:\VSCode\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:19792)
    at Socket.emit (node:events:526:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) background.install {"value":"Katsute.code-background","c":"katsute.code-background"}

How to replicate

I'm not sure the exact replication requirements, but I've narrowed this down to string length, the length of the string is exceeding the maximum string length. I'm using over 250 files each with with 6 - 12 file name lengths.

Prompt user for admin permission when write is denied

https://www.npmjs.com/package/@vscode/sudo-prompt

https://www.npmjs.com/package/sudo-prompt

https://www.npmjs.com/package/@mh-cbon/sudo-fs

Possibly use child_process in conjunction with sudo to run a node script.

Show notification, ask users if they want to activate sudo mode.

Use force move/mv to update files.

https://stackoverflow.com/a/5560480

Originally posted by @Katsute in #84 (comment)

Background sometimes does not install

Operating System

Windows

VSCode Version

1.73

Extension Version

2.2.0

Issue

Installation/reinstallation from notification occasionally does not work; some users have also reported that a reload is required.

Related:

• #53
• #62

Extension should possibly evaluate the glob in the configuration menu so it can report the actual amount of loaded backgrounds.

How to replicate

TODO

How to remove installed images?

Feature

Remove installed images.

Reason

This is a really neat extension!

I know how to add and install images. But I wonder how can I remove images that were installed?

If this has already been implemented, it could be great if instructions are added to the README.

Thanks!

Check if image exists

Feature

For disk files:

On launch, use thennable to check if file (not glob) paths exist. Alert if missing.

For URL files:

On launch, use thennable to check if code 200. Alert if missing.

Add toggle for alerts, some users may already know a file doesn't exist.

Alternatively: run check when injected css chooses background

Reason

Resolves confusion when background images are not loading

Disable backgrounds for editor subwindow on certain filetypes

Feature

When the currently open editor window matches a glob pattern (or a regex), turn off background customizations or set the opacity to 100%. Alternatively, a command palette option to set the opacity to 100% for the current editor window only.

Reason

My workflow heavily depends on editing and compiling $\LaTeX$ documents, which output as PDF. Having a pdf available to quickly check how code has compiled is super useful, but when this extension sets the opacity of the pdf viewer to <100%, the colors get funky and it doesn't resemble the final print as well. Being able to visually disable this extension for specific editor windows, or to start by having the extension disabled for those windows would be useful.

Adaptive image selection

Feature

Allow configuring different background image based on whether the window is a remote session and if so, depending on the remote name. Add an API that allows other extensions to swap to a different background image.

Reason

I have my desktop wallpapers and terminal emulators configured so different images are used depending on the time (in relation to my schedule, so the updates are made by a custom script) and, for terminals, the host of the SSH session. I would like VS Code's background to match this behavior.

visible text upon background

Feature

This is best background changing extension in VS Code marketplace. But here are some issues i found.
if i set a background, text or code color getting change that cause some visibility issue because text background also get change. If there any way to without changing the background of text that will help to focus on coding.
In setting option there is a option, Background: Use Window Options for All Backgrounds. if enable this option background are not clearly displayed on editor and if change the blur and opacity of the background image doesn't work anything.
So, my humble request to make an option that will not change the background of text and background blur and opacity is editable.

Reason

If the background doesn't impact the text color then it will help to focus coding.

EPERM operation not permitted when Background:Install

Operating System

Linux

VSCode Version

1.74.2

Extension Version

2.4.0

Issue

Maybe it's because that command runs without sudo priviledges, or maybe that file that is supposed to get modified doesn't have the right permissions I don't know

How to replicate

View -> Command palette -> Background:Install

Add glob timeout

Prevent long menu load and install times when accidentally using a glob that captures too many files.

https://github.com/isaacs/node-glob/blob/46ff6531345c8d069418efc73a9ebd43d9f24569/README.md?plain=1#L40-L42

const stopAfter100ms = await glob('**/*.css', {
  signal: AbortSignal.timeout(100),
})

Vertical editor split is not randomized

Operating System

Windows 10

VSCode Version

1.73.1

Extension Version

1.30.0 (beta)

Issue

Vertical splits do not have a random background, they use the same as the above window.

1	1
0	0

How to replicate

Split horizontally then split vertically in each editor window.

General optimizations

• Remove excessive imports
• Pack into a single js file https://code.visualstudio.com/api/working-with-extensions/bundling-extension
• Remove unnecessary files from node_modules in .vscodeignore

Background wont appear sometimes

Operating System

Windows 10

VSCode Version

1.78.1

Extension Version

v2.5.5

Issue

A lot of the time I have to constantly restart my VS code as the background won't even appear, I even tried the reload background feature but that rarely if even fixes the issue, the only way I've gotten the background to appear is by constantly closing and opening VS Code until the background loads.

How to replicate

It's random if it loads the first time or not.

Background won't disappear

Operating System

Windows10

VSCode Version

1.74.3

Extension Version

Version: 1.74.3 (system setup) Commit: 97dec172d3256f8ca4bfb2143f3f76b503ca0534 Date: 2023-01-09T16:59:02.252Z Electron: 19.1.8 Chromium: 102.0.5005.167 Node.js: 16.14.2 V8: 10.2.154.15-electron.0 OS: Windows_NT x64 10.0.22621 Sandboxed: No

Issue

Even after deleting a url from extension settings it keeps showing up as a window background. i tried uninstall it and reload, it seems to work (even though not always) but then it shows up again. it looks like it's cached somewhere...

How to replicate

• add a background with the procedure listed in the extension readme using an url as source img
• delete the image url from settings.json at the key "background.windowBackgrounds"
• reload either by reloading whole vscode window or by using the extension reload.

after those steps the image is likely to stay. if it doesn't try close and reopen your editor to see it there again (not in the background.windowBackgrounds but as the actual ide background)

Accept Image URLs

Feature

Accept URLs as background image locations.

Reason

Original extension for this functionality shalldie/vscode-background utilized URLs to grab background images.

Examples:

https://user-images.githubusercontent.com/18376480/55394572-30827700-5572-11e9-9435-2cc501eb53bb.png
file:///E:/backgrounds/35a8f9af-9d8d-46fc-b2e0-98690e7eb067.png

I am unsure if this would have problems with glob patterns but I like being able to reference githubusercontent in my dotfiles repo or potentially link to imgur gallery URLs.

WSL: Not working

Operating System

Windows 10

VSCode Version

v1.70.0

Extension Version

v1.1.0

Issue

Showing an error "Failed to find 'bootstrap-window.js'" after choosing a file and reloading

How to replicate

1. Install extension on a remote WSL
2. Choose a file inside the linux distro
3. Install and Reload the extension

Inject CSS

Feature

Allow users to inject their own css.

https://code.visualstudio.com/api/references/contribution-points#Configuration-property-schema

A string setting can be rendered with a multiline text input if it sets "editPresentation": "multilineText" on the configuration entry.

Contribution Points

To extend Visual Studio Code, your extension (plug-in) declares which of the various Contribution Points it is using in its package.json Extension Manifest file.

Blur makes background image disappear or won't work

Operating System

Linux (Manjaro KDE)

VSCode Version

1.72.2 (VSCodium)

Extension Version

2.0.2

Issue

Blur sometimes won't work, and sometimes make the background disappear.

Blur 0
Opacity 0.5

Blur 2
Opacity 0.5

Blur 4 (sometimes value of 2 also makes the bg disappear)
Opacity 0.5

How to replicate

Set these values:

Adding multiple files doesn't work

Operating System

Windows 10

VSCode Version

1.78.1

Extension Version

2.5.5

Issue

VSCode has broken vscode.workspace.getConfiguration. This method is NOT returning the most up to date result.

Background/src/vs/vsconfig.ts

Line 30 in 74d234f

const config = () => vscode.workspace.getConfiguration("background");

Only occurs in 1.78, 1.77 was working properly.

How to replicate

Add multiple files

How to remove background image

A new delete menu has been added in v2.7 #185

v2.6 and under

To modify or remove a path select file then select the path you want to change.

Extreme lag when setting folder for editor backgrounds using VS Code Insiders

Operating System

Windows 10

VSCode Version

1.75.0-insider

Extension Version

2.3.1

Issue

When using the background config menu, and setting a folder as the glob for background in the "Editor", VS Code takes a long time to load, and using a low wallpaper change time cause huge lags. This doesn't happen while setting the background for "Window" or when you use a single file as background.

PS: While using a small Time parameter while setting a folder as glob in the "Window" setting causes a very small CPU spike, it's completely doable, and the loading works as expected.

How to replicate

Open background menu > choose Editor > select folder as glob > Reload editor.
Your editor should take longer to start.

Additionally, if you set the "Time" parameter to something like 5-10 seconds, reverting this change becomes almost impossible, as the editor is constantly lagging when changing backgrounds.

I believe this has something to do with the actual wallpaper load, because it only happens when the file is being loaded (and with a low Time, it's loaded constantly), after that the performance is normalized.

Why is github copilot prohibited?

Feature

This isn't a feature request, I'm just kinda curious why github copilot is prohibited.

Reason

Error when trying to install background on mac

Operating System

macOS

VSCode Version

1.70.1

Extension Version

v1.1.0

Issue

When I run Background:Install in command pallette I get this error from Mac:

Command 'Background: Install' resulted in an error (A system error occurred (EROFS: read-only file system, open '/private/var/folders/lg/dnk04c613yn9h0pk51fgy97c0000gn/T/AppTranslocation/22C18D79-D2CC-467C-8AA1-80126B0C0910/d/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-window.js'))

Any ideas?

How to replicate

I installed the extension from Windows store..then added image from Downloads folder in the Background:Configuration setttings..a message popped up saying resintall required and I clicked ok...nothing happened. Then I closed Vscode and opened again and tried Background:Install

Any idea?

When opening a folder through VS the wallpaper is diappearing.

Operating System

Mac M1 Ventura 13.3.1(a)

VSCode Version

1.78.1(universal)

Extension Version

2.5.5

Issue

When i reopen vs code the wallpaper is showing fine in Vs code welcome screen. but when i opening a folder or file the wallpaper is dissapearing.

How to replicate

Screen.Recording.2023-05-11.at.3.39.52.PM.mov

The window background image is not visible in the area of the system buttons

Operating System

Windows 10

VSCode Version

1.80.2

Extension Version

2.6.1

Issue

The minimize, restore, and close buttons are obscuring the background image.

Settings

No response

How to replicate

Setup a Window background image and check top-right corner.

Cursors

Feature

Ability to use custom cursors. Same specs as backgrounds:

• Random from array
• Gif support
• Trails?

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Reason

n/a

cursor - CSS: Cascading Style Sheets | MDN

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

Letters and images become more transparent when you change the background opacity value

Feature

New opacity options for both letters and images

Reason

By changing the opacity of the backgrounds, my code letters also become more transparent, and images are no exception. I wish there was an option to prevent the above from happening as it makes it harder to visualize the job.

Skip invalid background images

Remove background from array if the URL points to a non-existent file

Background/src/extension.ts

Line 427 in 83311e8

background-image: url("\${windowBackgrounds[iWindowBackgrounds[0]]}");

function checkImage(url) {
  var image = new Image();
  image.onload = function() {
    if (this.width > 0) {
      console.log("image exists");
    }
  }
  image.onerror = function() {
    console.log("image doesn't exist");
  }
  image.src = url;
}
checkImage("https://picsum.photos/200/300");

― https://stackoverflow.com/a/55880263

[Feat] Option to configure how images are selected

Feature

Allow user to change aspect of the image selector instead of purely by random.
My idea for this include options such as:

• random: Unchanged from default functionality
• unique: Randomly enumerate without repeating
• linear: displayed in the same order defined in the image array,
  I'm unsure how glob pattern should be handled...
  Perhaps selected alpha-numerically or fallback to random/unique?

Once, the last image has been reached, simply repeat.

Reason

The key element here for me is the unique parameter.
I have a limited selection of images set on the editor property, and maybe 3-4 split editor groups at a time.
There are always duplicate images between these splits and it would be nice to have some extra control over the order in which they are selected.

Fails on Linux with EACCES: permission denied, copyfile

Operating System

Pop!_OS 22.04 LTS

VSCode Version

1.76.1 (Sandboxed: No)

Extension Version

v2.5.1

Issue

My configuration works on Mac but fails on PopOS with the following error

2023-03-10 23:54:50.487 [error] Activating extension Katsute.code-background failed due to an error:
2023-03-10 23:54:50.487 [error] Error: EACCES: permission denied, copyfile '/usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main.js' -> '/usr/share/code/resources/app/out/vs/workbench/workbench.desktop.main-backup.js'
	at Object.copyFileSync (node:fs:2804:3)
	at Object.func (node:electron/js2c/asar_bundle:5:1812)
	at activate (/home/robinfriedli/.vscode/extensions/katsute.code-background-2.5.1/dist/extension.js:53:24)
	at Ui.db (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:108:14833)
	at Ui.cb (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:108:14532)
	at /usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:108:12550
	at async f.n (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:94:6818)
	at async f.m (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:94:6781)
	at async f.l (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:94:6238)

Not sure if this is related to #92

How to replicate

Try to activate extension on PopOS or quite probably other distros

Background transition

Feature

Add an option to automatically transition between backgrounds at a set interval.

Reason

Previously setInterval and setTimeout did not work inside the bootstrap-window.js file, now it works so we can move forward with this feature.

Additional Notes

Background images cannot use the transition property to crossfade, instead we should:

• Transition current image opacity to 0
• Set the new image
• Transition the new image opacity to whatever it's set to

setTimeout must be used for transition: set opacity, wait, set image, unset opacity

Make sure randomized image is not the same! It won't look right. Catch edge case with only one image.

l10n

Localization

• Extension
• package json
• README

Background Slider

Feature

Hi There

Please Add Background slider feature to this great extension

For Example : background in images folder change after 5 min

Reason

This Feature will make working with VSCODE more interesting, and it will also make this plugin more complete than before

Add back button

Add back button to all menus to allow users to traverse to previous menus.

All functions that open menus should include a new parameter ref of which menu opened the submenu.

Fix for MacOS users

Mac users are likely to get a EROFS: read-only file system error when trying to install backgrounds using this extension. To fix this:

1. Move Visual Studio Code.app from Download to the Application directory.
2. Run sudo chmod -R a+rwx '/Applications/Visual Studio Code.app' to grant write permissions.

Make sure vscode is not running when you follow these steps.

Related: #62

Not working in VSCode 1.72

Operating System

Windows 10

VSCode Version

1.72.0

Extension Version

1.3.0

Issue

JS used to inject CSS is not working.

How to replicate

Install on VSCode 1.72

Not working on Mac

Operating System

Ventura 13.2.1

VSCode Version

1.75.1

Extension Version

2.4.2

Issue

I follow the instructions and the background does not change. When trying to follow the instructions for #76 , terminal says:

chmod: Unable to change file mode on /Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper (Renderer).app/Contents/MacOS/Code Helper (Renderer): Operation not permitted

How to replicate

1. Install extension
2. Follow instructions for installation and configuration
3. Observe that background does not change

Choosing background image or folder from local path results in `Error: [UriError]`

Operating System

Arch Linux

VSCode Version

1.75.1

Extension Version

v2.4.1

Issue

Picking a background from a folder, such as /home/[user]/wallpapers/**, or a specific file /home/[user]/wallpapers/background.jpg, throws

[error] Error: [UriError]: If a URI does not contain an authority component, then the path cannot begin with two slash characters ("//")
    at P (/opt/visual-studio-code/resources/app/out/vs/code/electron-main/main.js:20:68898)
    at new f (/opt/visual-studio-code/resources/app/out/vs/code/electron-main/main.js:20:69806)
    at new w (/opt/visual-studio-code/resources/app/out/vs/code/electron-main/main.js:20:71187)
    at w.with (/opt/visual-studio-code/resources/app/out/vs/code/electron-main/main.js:20:70233)
    at P.uriToFileUri (/opt/visual-studio-code/resources/app/out/vs/code/electron-main/main.js:21:4231)
    at p.j (/opt/visual-studio-code/resources/app/out/vs/code/electron-main/main.js:81:95062)
    at p.i (/opt/visual-studio-code/resources/app/out/vs/code/electron-main/main.js:81:94568)
    at Function.<anonymous> (/opt/visual-studio-code/resources/app/out/vs/code/electron-main/main.js:81:94019)

VSCode was installed from the arch user repository, since installing from tar or from snap didn't seem to work (permissions error).

The extension works fine with urls, however.

How to replicate

background => configure, and select folder or file.
background => install, checking the main output tab shows this error, and no background is updated.

Include CSS from file

Feature

Allow users to add files to load css from, rather than writing css in the background.CSS field. Don't remove the existing field, some users may want to keep the CSS saved in settings.

Optional support for:

• glob
• URLs
• ftp?

Implement some kind of CSS/JS validation to prevent loads on invalid syntax.

Reason

n/a

Add command to view changelog

Add button/command to open changelog

https://stackoverflow.com/a/64111071

Stack Overflow

From VS Code Extension API open file in markdown preview

So I want to open a file in markdown preview, so when the certain command is triggered I want to open a file in vscode (but in markdown preview mode) What have I tried so far:

This will open the f...

Installation doesn't work. No prompt for admin permission.

Operating System

Linux - Nobara 37 (derivative of Fedora 37)

VSCode Version

1.76.0

Extension Version

2.5.0

Issue

Installing extensions via "Background: Install" doesn't work. In fact, it feels as if the option itself doesn't do anything at all, as there is no feedback notification or anything that happens after pressing it.

The issue might be somewhat OS-related, because it works just perfectly fine on my other PC with Windows, running the same version of VSCode as my Linux machine. My VSCode installation on Linux is installed via official VSCode repository mentioned on the official setup page for VSCode, so the issue is not Flatpak/Snap-related.

• I've tried to reinstall the extension, making sure to use use "Background: Uninstall" and restarting VSCode.
• I've disabled all other extensions to make sure that there are no conflicts, but it didn't affect the issue.

It might be useful to mention that when I later decided to try out another background changing extension (shalldie.background) it worked just fine - I've got a proper prompt and everything worked as expected. Maybe this will provide some hint regarding cause of the issue.

How to replicate

Just install the extension and attempt to run Background: Install:

Add support for environment variables

Should be used at runtime, however testing is needed to see if we can even access them at that point.

Change always requires install, env vars should be checked when we install, not when choosing images.

sys: https://nodejs.org/api/process.html#process_process_env

vs: https://code.visualstudio.com/docs/editor/variables-reference

Show processed path while typing input

Should probably add command to open README/Manual

Root backup command is ill formed

Operating System

Pop!_OS 22.04 LTS

VSCode Version

1.76.2

Extension Version

v2.5.2

Issue

This is a follow up to #118

The admin prompt works now, however the command is ill formed on Linux:
--: command not found

Appears to be the following line
-- sh -c "cp -f '${workbench}' '${workbench_backup}'; cp -f '${product}' '${product_backup}'"

How to replicate

Accept the admin prompt on Linux

Separate options for different image categories

Feature

Allow for alignment/size options depending on the image groups/categories.

I assume the settings I'd be looking for would be something like.

• Editor = Manual = 20%
• Panel = Cover
• Sidebar = Cover
• Window = Cover

Reason

In the bottom right, Editor backgrounds are sized to 20% but the window background also inherit this global setting.
So as far as I can tell, I cannot have bottom corner characters as well as a full-sized window image.

Background blur

Feature

Add image blur

filter: blur(1rem);
-webkit-filter: blur(1rem);
-moz-filter: blur(1rem);
-o-filter: blur(1rem);
-ms-filter: blur(1rem);

Reason

n/a

Add image preview icon to menu

Add quick pick icon to globs that have a single image

https://code.visualstudio.com/updates/v1_81#_icons-in-quickpickitem-finalized

https://code.visualstudio.com/api/references/vscode-api#QuickPickItem (icon path)

https://code.visualstudio.com/api/references/vscode-api#Uri (parse)

VSCode warns about installation being corrupt

This issue has been fixed, just update to the latest version of this extension.

---

This warning will be removed after you relaunch VSCode, a reload is not enough.

Alternatively, press Don't Show Again to suppress the warning.

Background doesn't work on archlinux

Operating System

Arch Linux x86_64

VSCode Version

1.76.2

Extension Version

2.5.4

Issue

when i activate the extension or want to upload a background this error message appears

How to replicate

just download the extension on arch and you will encounter this error (try on other computer than mine and the probleme is still here)

Add background deletion menu

Add a multiselect quick pick menu for background deletion, this feature should help reduce confusion when it comes to removing backgrounds.

Change is not needed for edits since user can just add and remove, only deletion is causing some confusion.

• https://code.visualstudio.com/api/references/vscode-api#QuickPickItem