I recently converted my Chrome extension to a Safari extension using the Apple Conversion tool (XCode CLI). The extension is developed with ReactJS and SaSS.
It works very well on Google Chrome but when I try it on Safari after converting it, the local extension works but the CSS file that handles the extension is not applied.
There are no errors during the conversion but the Safari developer tool indicates several errors :
console tab : Failed to load resource: You are not allowed to access the required resource.
network tab : An error occurred while trying to load the resource and the resource was requested in an insecure manner.
In the extension, we isolate CSS using iframe :
/*global chrome*/
/* src/content.js */
import React from 'react';
import ReactDOM from 'react-dom';
import Frame, { FrameContextConsumer }from 'react-frame-component';
import "./content.css";
class Main extends React.Component {
render() {
return (
<Frame head={[<link type="text/css" rel="stylesheet" href={chrome.runtime.getURL("/static/css/content.css")} ></link>]}>
<FrameContextConsumer>
{
// Callback is invoked with iframe's window and document instances
({document, window}) => {
// Render Children
return (
<div className={'my-extension'}>
<h1>Hello world - My first Extension</h1>
</div>
)
}
}
</FrameContextConsumer>
</Frame>
)
}
}
Here is the manifest.json file:
{
"short_name": "My Extension",
"name": "My Extension",
"version": "1.0",
"manifest_version": 3,
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"action": {
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"default_title": ""
},
"background": {
"service_worker": "background.js"
},
"content_scripts" : [
{
"matches": ["<all_urls>"],
"css": ["/css/root.css"],
"js": ["/static/js/content.js"]
}
],
"permissions": [
"activeTab",
"scripting",
"storage"
],
"host_permissions": ["https://www.google.com/*"],
"web_accessible_resources": [{
"resources": [
"/static/css/content.css",
"/static/media/*"
],
"matches": ["<all_urls>"]
}]
}
After many attempts, I did not understand the exact origin of the problem and I do not know how to solve it. Do you have any suggestions ?