Typically, you can use the @@extension_id special string to reference the absolute path into the bundled resources of an extension, such as an image or a custom font, in a CSS file.
However, this broke with Safari 18.
Consider this section in a popup.css file:
.card-icon {
height: 16px;
width: 20px;
background-image: url(safari-web-extension://__MSG_@@extension_id__/images/card.svg);
background-size: 20px 16px;
}
In Safari 17.4, once loaded in the browser, @@extension_id is replaced with E8BEA491-9B80-45DB-8B20-3E586473BD47, and the background-image reads as so:
background-image: url(safari-web-extension://E8BEA491-9B80-45DB-8B20-3E586473BD47/images/card.svg);
But as of Safari 18, the @@extension_id just collapses to an empty string, and the background-image reads as so:
background-image: url(safari-web-extension:///images/card.svg);
and the svg fails to load with the following error: "Failed to load resource: You do not have permission to access the requested resource."
This is a regression, does to match the behavior of the other major browsers, and should be fixed.
Filed with Feedback ID: FB15104807