I was using a variable in background.js to hold tabs states which proves problematic.The approach above is different from my first attempt on auto-refresh extension: background.js receives the request and reloads the sender tab via ().If there is an entry and the result is true, content.js will set up a timer of fixed interval (obviously the interval can be exposed to users too) to send a runtime message to background.js, asking for reload.Upon loading, content.js looks up its tabId in this map.Every managed (marked to auto-refresh) browser tab has an entry in a map persisted in extension storage local: tabId: boolean. To test against Safari, just run an npm command to build extension resources and copy contents of dist to the container Swift project, then build/run it in Xcode.Īuto-refresh is implemented using setTimeout(), () and. Now you can develop and test the extension against Chrome solely in the extension resources project. The two sample projects are setup to work together as long as they are checked out side-by-side in the same directory. Now, all it takes to import new extension resources from the React project is to copy everything over to Resources/build folder in the Swift project. This needs to be done for both iOS and macOS extension targets. Then add this new empty folder to Resources in Xcode.įinally, add the folder to Copy Bundle Resources build phase. Instead, create an empty folder such as build under extension Resources via "finder" (not in Xcode). The problem is, we might have different files from the React project depending on whether it's a prod or dev build, especially if the bundler (such as Parcel) used generates randomised file names. The figure below shows how those resource files are added to the Swift bundle after a Safari extension project is created in Xcode. But I need them to be simply copied over from the React project, instead of having Xcode creating reference for every JavaScript/html/css/image file that needs to be part of the bundle it creates. The boilerplate extension resources (JavaScript/css, manifest and html files) created with a new Safari extension project are managed by Xcode. The better approach, as I found out later, is probably to use webextension-polyfill from Mozilla and its types.Ī caveat here is, I had to set module in "tsconfig.json" to "commonjs" as shown below:Įnter fullscreen mode Exit fullscreen modeĪnother issue is how to manage the React/extension project with the container Swift project. Initially I created wrapper functions to convert Chrome functions that require callback to return promise instead. As it turns out Safari and Mozilla Firefox are very similar in their API but there are enough differences between them and Chrome to require different treatment especially when it comes to the use of "callbacks" and "promises" Building a cross-browser extension The next issue is how to code in TypeScript against Web extension API for both Safari and Chrome. Luckily there is already a template project that does exactly just that. The first issue I had to address was how to create a Web extension using React/TypeScript/esbuild. The extension project for Safari and ChromeĪ much stripped down version of the extension resources project is hosted here browser-ext-react-esbuild while the container app for iOS/macOS is hosted here browser-ext The new project uses esbuild to create bundled and minified code. All JavaScript&resources belonged to the Swift project and were managed by Xcode.Īfter some more research and learning, I recreated the same extension using React/TypeScript, not just for Safari but Chrome too. There wasn't even a separate JavaScript project. There was no bundling, minifying, framework or typing. The extension from my first attempt here was a crude implementation in plain, vanilla JavaScript. Safari extension requires a Swift project that contains iOS/macOS parent apps plus their extension apps that share a bunch of JavaScript and other resources. It is mainly an introduction to two demo projects hosted on Github on how to develop extensions that work on both Safari and Chrome (possibly Mozilla Firefox but not tested), using React/TypeScript/esbuild. This article is not a detailed tutorial on how to create Web extensions for either Safari or Chrome.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |