Safari extension background page unable to fetch web accessible resource

Question

I have a chrome extension that was converted to Safari extension using xcode safari-web-extension-converter utility. With that, everything except one thing seems to be fine. In the background script, I am loading some data from a web accessible resource like so:

export const fetchConfig = async () => {
   let dataURL = '';
   if (!checkBrowser(BROWSERS.Chrome, true)) {
       dataURL = chrome.runtime.getURL('config.json');
   } else {
       dataURL = browser.runtime.getURL('config.json');
   }
   const res = await fetch(dataURL);
   return await res.json();
}

This works for all browsers except Safari.

Where I am getting the runtime URL as:

safari-web-extension://E522689D-94A6-4561-90F3-BF22C7848965/config.json

but the fetch call fails with the error:

Failed to load resource: unsupported URL

I have not been able to find anything on this in the documentation, but can we not access the web accessible resources in background in Safari?

My manifest file looks like this:

{
"manifest_version": 3,
"name": "Ext Dev",
"author": "Test",
"description": "Test",
"version": "1.1.0",
"icons": {
    "16": "assets/icon/icon16.png",
    "32": "assets/icon/icon32.png",
    "48": "assets/icon/icon48.png",
    "128": "assets/icon/icon128.png"
},
"host_permissions": [
  ...
   host addresses here
  ...
],
"permissions": ["storage", "tabs"],
"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self';"
},
"web_accessible_resources": [{
  "resources": ["config.json"],
  "matches": ["<all_urls>"]
}],
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "css": ["commonstyles.css"],
        "run_at": "document_end",
        "all_frames": true
    }
],
"background": { "service_worker": "background.js" },
"action": {
  "default_title": "Ext Client",
  "default_icon": {
    "20": "assets/icon/icon20.png",
    "40": "assets/icon/icon40.png"
  }
}

1.7k

Posted by

tempJMarkson

Reply

Add a Comment

Answer 1

I'm facing the same issue after migrating my chrome extension to safari. Were you able to make progress on this?

Posted by

roymoran

Add a Comment

Answer 2

I was able to come across a solution for this. In my safari browser I was seeing the error message.

Failed to load resource: You do not have permission to access the requested resource.

The problem was in the changes I made in an attempt to fix errors I was seeing in the Safari settings under my extension (errors such as - "Failed to load images in default_icon for the browser_action or page_action manifest entry.", "Failed to load images in icons manifest entry.", "The service_worker script failed to load due to an error").

So I changed some paths in my manifest.json and got ride of those errors. Without realizing, those changes screwed up the way I was trying to load my web_accessible_resources via chrome.runtime.getURL.

Here is my web_accessible_resources section in my manifest.json.

    .
    .
   "web_accessible_resources": [
    {
      "resources": ["dist/panel.html", "dist/iframeListener.bundle.js"],
      "matches": ["<all_urls>"]
    }
  ]
    .
    .

Here's how I was calling it in my logic

private initPanel(): HTMLIFrameElement {
    .
    .
    .
    // wrong
    iframeReference.src = chrome.runtime.getURL("panel.html");
    .
    .
    .
  }

Here's how I fixed it

private initPanel(): HTMLIFrameElement {
    .
    .
    .
    iframeReference.src = chrome.runtime.getURL("dist/panel.html");
    .
    .
    .
  }

These changes are great but temporary - ideally I shouldn't need to change paths in my manifest.json to get this working for safari. As part of my build process I generate a "dist" directory which includes a copy of my manifest.json this is the manfest.json that Xcode should be picking up thereby allowing chrome.runtime.getURL("panel.html"); to work. But Xcode picks up the wrong manifest.json (the one in my projects root folder) so I am manually prepending "dist/" to my paths in this manifest. I think I need to modify some setting in Xcode so that it picks up the right manifest. I am just not familiar with Xcode so I'm working through it.

Posted by

roymoran

Add a Comment

Safari extension background page unable to fetch web accessible resource

Replies