How to make a Chrome Extension for Glideapps

Community Resources
1

Hello all,

I mentioned too much but :smiley: I did a lot of work for my new app hupu

I made an chrome extension for my app.

I created another glideapp for this extension but it uses same Google Sheet.

Because i did not want to use same design for extension and main application.

However very simple way to do it.

Open a folder in your local.

image
image713×280 19.4 KB

you need only 3 docs. One is png for icon of extension

Others are html page for show. And the last one is mandatory file for extension (manifest.json)

I share codes here you can copy and use easily. Just change names from a coding software (notepad++ or Bracket.)

Maifest.json
{

"name": "***Hupu***",
"description": "***Share links via numbers***",
"version": "2",
"manifest_version": 2, 
"browser_action":{
"default_title":"***hupu***",
"default_icon": "*hupu.png*",
"default_popup":"*index.html*"

},

"icons":{"500": "***hupu.png***"}

}

index html to show glideapp as extension popup

<!DOCTYPE html>
<html lang="en">

<head>
  <title>***HUPU***</title>
</head>

<body>
  
<iframe src="*https://temporary-trucks-6295.glideapp.io/*" width="500" height="300"></iframe>
</body>
</html>

Then your extension is ready.

For trying free just go to Google Chrome Extension page

image
image713×280 33.2 KB

and open developer tools from right side and

image
image1899×345 44.6 KB

Click Load unpacked and browse your folder. Choose folder that includes this three files.

Thatsall you can try your extension.

I want to hear some smart ideas using glideapps as extension.

Regards.

3 Likes
2

Just a reminder to take the asterisks out of the <iframe> src

3 Likes
3

This is awesome! Thanks!

FYI chrome is now using Manifest v 3 which is structured slightly different. based on the original post, it would now look something like

{
    "manifest_version": 3,
    "name": "***Hupu***",
    "description": "***Share links via numbers***",
    "version": "2",
    "icons": {
      "500": "***hupu.png***"
    },
    "action": {
        "default_popup": "index.html"
      }
}
4

and now seems like this method will no longer work using iframe

5

You can iframe embed with a business or higher plan. You just need to contact Glide support to have them enable it for you.

1 Like