Anvil app as browser extension

Anvil Q&A
1

What I’m trying to do:
Would it be possible to use Anvil for developing and deploying an Anvil app as browser extension?
The idea is that this extension would ‘popup’ on top of a 3rd party web application. The extension should be able to:
1- read and analyze the URL of the 3rd party web application
2- read and analyze the DOM of the 3rd party web application
3- place a popup window on top of the 3rd party web application (containing help related info for example)
4- take a screen capture from the 3rd party web application and performs an opencv template matching process on the captured image.

If possible, can you share any guidelines?

1 Like
2

Of course it is possible with anvil, thanks to iframes. Here is what you need to do

Step 1

Simply create a new folder in your computer.

Step 2

In this folder, create a new text file and past this

{  
  "manifest_version": 2,  
  "name": "My Extension",  
  "description": "This is my extension",  
  "version": "1.0",  
  "browser_action": {  
   "default_popup": "index.html"  
  },  
  "permissions": [  
   "activeTab",  
   "storage"  
  ]  
 }

Feel free to change your Name and Description
Step 3
Now rename this text file to ‘manifest.json’
Step 4
Next, create another file in the same folder and paste this

 <!DOCTYPE html>   
 <html>  
   <body>  
   <script src="https://anvil.works/embed.js" async></script>
	<iframe style="width: 500px; height: 500px;" data-anvil-embed src="https://KLR3B3DD2QLGIFU7.anvil.app/AMA3RPS3FD46OC753GDEZ3OX"></iframe>
   </body>  
 </html>

Replace my <iframe tag with your <iframe tag (You will find it in the publish app settings)

Change the file name to index.html

Step 5

Next, go to chrome://extensions (Assuming you are using Chrome)

Enable Developer Mode

Click on Load Unpacked and select your folder.

Now your Extension will be added to your browser. When you click on it, your Anvil App will open as popup

5 Likes
3

A bit of a late response. But this does not work as I get the following error:
Refused to load the script ‘https://anvil.works/embed.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ blob: filesystem:”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.

Do you have a working example?

1 Like
4

@wim.vandebrug , were you able to get this working? I have a similar use case

5

This is not really an Anvil related problem but maybethis could help - javascript - Chrome Extension "Refused to load the script because it violates the following Content Security Policy directive" - Stack Overflow

The simplest fix could be to download https://anvil.works/embed.js and add it to your extension as a js file.