From 81b4d30ab0fe3ea28fd196a72207d9e8da089a3a Mon Sep 17 00:00:00 2001
From: Sebastian Benz <sbenz@google.com>
Date: Tue, 3 Sep 2024 21:39:48 +0200
Subject: [PATCH 1/2] add support for images and audio

---
 .../ai.gemini-in-the-cloud/images/icon128.png | Bin 3949 -> 2400 bytes
 .../ai.gemini-in-the-cloud/images/icon16.png  | Bin 267 -> 323 bytes
 .../ai.gemini-in-the-cloud/images/icon32.png  | Bin 458 -> 576 bytes
 .../ai.gemini-in-the-cloud/images/icon48.png  | Bin 890 -> 814 bytes
 .../images/record-audio-24.svg                |   1 +
 .../images/screenshot-monitor-24.svg          |   1 +
 .../ai.gemini-in-the-cloud/manifest.json      |   3 +-
 .../ai.gemini-in-the-cloud/package-lock.json  | 144 +++++++++---------
 .../ai.gemini-in-the-cloud/package.json       |   4 +-
 .../sidepanel/index.css                       |   9 ++
 .../sidepanel/index.html                      |  38 ++++-
 .../ai.gemini-in-the-cloud/sidepanel/index.js |  87 ++++++++++-
 12 files changed, 209 insertions(+), 78 deletions(-)
 create mode 100644 functional-samples/ai.gemini-in-the-cloud/images/record-audio-24.svg
 create mode 100644 functional-samples/ai.gemini-in-the-cloud/images/screenshot-monitor-24.svg

diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon128.png b/functional-samples/ai.gemini-in-the-cloud/images/icon128.png
index 787906199986752376c877a99165cd7b5a9e1870..6250bc6823d9852c220d3bbb49dd08ebc368fe00 100644
GIT binary patch
delta 2377
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

delta 3938
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

diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon16.png b/functional-samples/ai.gemini-in-the-cloud/images/icon16.png
index a8eb458c5ef4897e0366fb0ddef736bca3c797d6..8a9871e31af39e38d09a47597358aa9f4d0d43d5 100644
GIT binary patch
delta 283
zcmV+$0p$LR0>c83F@OC@L_t(IPo<Nw6@xGgL{D@KKr#sQA(KHSBk5s~gaPPK-WlX4
z3^a)=EX$|!mk|89<mmobO?8MXnpyDT=e5t<quiaqyP8^2G)xxYx#%DWs^F0dZ3M=0
z>X<Bod(r3NvMm#)Xffn>i$?)VxD5FwmhplU`;?P<CowraV1EUQW{R7yNIt6Q%w-Vp
z)gwT@S<wX+f@qm;SZpU?l|00hx>+YHp3zxw-~)EafJRsjEYH|pc4QG)-{k?)rX#%}
z?|E$m>|G{E%YlKSv9q*Whix>F);{iMpr+;1HW~{K($U1l_MHt<I&nXZayq))v%OeZ
hq~pC7`R{-J0u(B<#}NeY?hgO}002ovPDHLkV1m@?g`EHZ

delta 226
zcmV<803H9s0*eBWF@MELL_t(IPh(`j0$$49eb2zaAb>6<{z#b-T?|D4mqvUB!3}sR
zclSRw*WeO^xdv<ivSzV|N_fqAC4Ubl|3UnbvLK29gfzo+!VCeqf{_&4(G6f=VE90(
z0Sq_|_z?e`fu~pqZ0VQYcMJjxCE;O%6b`rzz!#EKHvpdMh+Bz;*Ln{a{(t-jcOXVI
zex2~1;cGw0Ou_&hjnISyb_I8#AkmsZ`rrnjr$)kdLo|cbp=Tyy@&h;t!z{tbo_Jh?
cq7h~Q0NAr<Q-@lQ>Hq)$07*qoM6N<$g5K(2p8x;=

diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon32.png b/functional-samples/ai.gemini-in-the-cloud/images/icon32.png
index 838c426c8e30870c3a1e2c4f8f83d4614fd85487..f8ba754a31916ae79393e792465b23d118c73c3e 100644
GIT binary patch
delta 538
zcmV+#0_FY61Hc53F@O3=L_t(oN5xk$asn|7l<DpPBoBc;;bp+fAU!-J;Q`m-jGPlA
zi<RZOB2ZD-*6wP()+KuJFTJ=vEe3Ggj-ML*`ZAoCkm&}%1@A<kt4tr6s46an6Vdse
z=<EG59D2cY0r=jIhm>jGdnm8ViH<!$ngEK-nf8`3Gc8~e9e-IB{)?390pS8btW%<0
z)N8b_1;hpLvl+AQ?fN?GYzxGQ2$TilfrkL}<`#Nh$I>Hk3|61RZA0sx0Q45;0<4mE
zu&8z0j3@CBBJ%`5OaFEq+!nF?In$|lG4Mv!PP4WuFo%65Zva4pwJKBqv|KIr%v!IF
z+92)vyScR&Dt`bXm0rY5Q2^OsVrFRFiVI$bvq$a$z>{f73JMS{ccqwWSqPxW?IfZX
z%_S)l9d$l<riB1JSNEvl<%VZk48REuYd)($6k6gNO)xZ}Ez(k<bsItxT6W$w)S-er
z5bbMT!zf(P1H;d;zLLm4t$?e8NX09&vuxxb=<+G^QGXj+@!oul>|uORWHkFaM)3|G
z8}x$7Oc;$><%yosFDgDo^Rtz7Xv~@K^hufoYNr}@aGuQ_tsd{c@liw|oQmOWIE~+B
z80FZVCT2Linn<>ELjZQP^74O9D(bae0Az#AfYFDEn6L-zEC7|s{`=Fchs}~TixpT>
c4DI;^&=Ux^Fm}pqrvLx|07*qoM6N<$f+qg~9RL6T

delta 419
zcmV;U0bKsT1j+-DF@J<fL_t(oN9~tOPQx$|hG#0lh7H-IyY!KZ&;zjG25<yU0ylsg
za0IvqN*|F}Gz-F}n-bN?Q71~m*iPDv0#dU}VtYQ1$20#Rw0P3-;__Rm7p2q{Hw_Wr
z&Jb_B<>agBve;x`GMc}dj9TU|hjBP@t#1WLg6K&B+`1OA{eMS*XFm?_Ok<1y>mX9c
z7_QG9#vyBq{n)i}g5e;30Z17)K~w;wjdKtM02grnYT8K{B%^s{opN9n0Nn1S05lE7
zLk_SGq6Gkq>)VwC&`HZ*O=kqaUO7ns@&fAgy4~$k?y#i+&IbbzZE02-Kpz9zu3jC0
zqM5$C-pQ-=TYpgY_WuGnG%0lEffIm;2YSDTy(gl5EpVpd?0pN6wLAm`@Ok|Kkn!S5
z7o@xvn2v!G&gL<N%>$dQTM|`<=c3hFj)ja@%W>`nMgd>kdlEYbR*=|Y;TS)2bIaoN
zZ;4W(l@h0oWVsYXtHz|L<9)Vf<=`=iR%=hV7oDyEZXDDd(;^b>`414P`Maq>3*`U+
N002ovPDHLkV1j?4!BqeN

diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon48.png b/functional-samples/ai.gemini-in-the-cloud/images/icon48.png
index 932bdfe4b3d3555b2030361bca24337a540f9b00..3dc878b6c1940436800369ca7ecce28570649269 100644
GIT binary patch
delta 779
zcmV+m1N8j*2CfE>Fn<E*Nkl<ZXhZE;OHM;E40PD_0EL6Jd*Eci$$))12=oBm^&y7_
z1wY3gzoe=v@is^_AJ2H=*iND=|I(G)PyYZe?ZIIl*l!OH8O%ga1=K{8|Cfl~`0p{%
zJO91gt)52#?*_2n9A1Cy{xKH)7!(8Q1+y5y=l1ZNDz;I>wSRF_qL-yW!T?w*(?pr|
z(ccmvApjohS?h^j3b6HVm9@_w13#8CVR$YI0tV1Bz8GB_i+IK&BLV^f&@?{Lqh~lX
zZ;ffKje>9iXd9rc^V}PvHw2`1t`HC=fR^#=kJTe0lM-Sh<7GHbj+adUUz@`u4ZZzX
zxn3)C%KXS227fI<So534sO$rpFUHsNJr-+{v@mT+sR=-`kLa;B<PQKo2cYaq$dzZJ
z<pmXh#(qQwY=k5rI$uhO1BXU}3P4WoVZV4KA|uTUAppJX^+qol1S}F}9*~<y+1KP#
z4Ct1T5=6oP7@&0r+)Q-eO0Ag;@BXMSJ{gfT8O;F94u6k8?Im=cf!6QR+d}|oZXcae
zw^EZu03ru?gg3l1=GilokT*d}pa%pJT0MKhXP~9w2#{7x*Ve893^~NsA=HvTZ9Kv}
zdYN6u17K2!+(~l)qG(6meGUl?0l=<AZctP{kz3h2z`Pce%z2u%YG&?4X#Jz;nxSM4
zO=Y#><$uIVZm;}ltB6X=lO|e^zy*!PSiPBbF-cFgq#3D4x=YIXy7y$k-tkJ!VI`%O
z7He+Lt&@rFrDUx8B6qS+-8orhMH>lbhe2aQf?xnk8?&<MrFA5{T*+;b^mOIW)Vg>?
z))AiZ%`l24Y{&*4h*oNjuI+lD6)J1P(9P;OEq~T|Ok_P6fQ%p-v!!H|{m|d%r)(WP
zS+6+}<6#Na#zt};Pd@T@Bn;2yL^nYs6<ssRdcA%~LYiUa9$50o$LmE}j%sZYWy>00
zS}yrwt6nb4Gi#oEYOQ#02B=-#9zZub*SLQG=VBIJ_v$_H4TWEPPl`KvY5)KL07*qo
JL<FuvV1lzFW|RN`

delta 855
zcmV-d1E~D22Kok&Fn<FyNkl<ZXhZE<U2YmN5dOSsTB+>=^Z|mR5-3q0)AR<pLDLfi
zZV=Q1L^(hO?|le4L1<5q15|3%XSNWkia?}7q$UbYwXSSfv=FcDT^82;@zYA48P7K}
zw#PF|5Yg!5nmNmH_5thwNce~yfZ&7>>mb$2pGL7XnMX+PX@8?g38_dFR*EN-mQr6g
zYDz*Mf=~c@S-V1ky|9al_y|x-wF{-7G6MlP&)RzgU>0B42<j1S0Nt$JpC?p;B2Kpp
zTDmET#+$PlRDmey9m~pRTKSetmJ~oI*C<*JIgCP?&@wFgI^Ei+`|<k%=;j(baL94!
zg(GBiELzI6#D6E15I~$^<A>WXoP+?nS(`>^z{o_2HufC=GUbyW*0A#8L1YSv1l^tv
z(SP;LZ;e5^T}XN-rvQv^R^g^izF))2)?$@+6_bIWKzX%YsJgUM0A$urojqHq<!6QW
z*1!0!=MAL^fL_)<q(IS+%On5<sHWP5GShVeK(%pA0)N01cfG&?$YS61h-m=aoQVTa
zS)b9E1^@s*k^W==Jd8*$*W99x^GS8Y80Z18+nIFN?PE~>43rKN0RX5G-8^3gz<Xx9
zbU#n7G1xulMoAp4;{NtS{w<;vSx$Bjc<2WVfL7jPC;&tPV6fYn7$tF(;orYL5Aoye
zcmDnO&3_Zz+Z?4KBHB4T5Dfs;{s}X$8AAU7gfXrb&p+h>t#XN>_W(ae*#pKmjW#uz
z<9ZR)iS7g5L=O<ldTC@bM~4&_&(*awp3IHYY2`jxrUx!ITcDSY^0b-&2>YP9es_u6
zk2lJNbP4DU1<Rpy#?*sm>;-8~H0yz@Y9Ch>=6|?&#?+INXNiiMzZXE<%6oeWfy*j!
zE6<EAEUT~ySp$Q4zy#%I8z7?6qVPm|R8Gbk^X^WYt&jeF#a)I}_jX?9`4gzTJ_2Dt
zcgD4lq)Q`hF`3Y%k#%QA`J7_J8BTLI`MlV4s~0MRXwKhhWccwZJ>X^3$(b}2^d*~Z
zU{I*!1p?p-Q}q&5i;CvGHUA*|p#V&PjDGf*r;j`!l$MwNvxmq+yhu!)eNb#mf42eZ
hj%6LFI`Fz)_zlKrscu8DhFSms002ovPDHLkV1m*Blyv|A

diff --git a/functional-samples/ai.gemini-in-the-cloud/images/record-audio-24.svg b/functional-samples/ai.gemini-in-the-cloud/images/record-audio-24.svg
new file mode 100644
index 0000000000..4ccf9865a3
--- /dev/null
+++ b/functional-samples/ai.gemini-in-the-cloud/images/record-audio-24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z"/></svg>
diff --git a/functional-samples/ai.gemini-in-the-cloud/images/screenshot-monitor-24.svg b/functional-samples/ai.gemini-in-the-cloud/images/screenshot-monitor-24.svg
new file mode 100644
index 0000000000..06a2aad45e
--- /dev/null
+++ b/functional-samples/ai.gemini-in-the-cloud/images/screenshot-monitor-24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M600-320h160v-160h-60v100H600v60ZM200-560h60v-100h100v-60H200v160Zm120 440v-80H160q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v480q0 33-23.5 56.5T800-200H640v80H320ZM160-280h640v-480H160v480Zm0 0v-480 480Z"/></svg>
diff --git a/functional-samples/ai.gemini-in-the-cloud/manifest.json b/functional-samples/ai.gemini-in-the-cloud/manifest.json
index 9f7574c3de..c4ed1e2651 100644
--- a/functional-samples/ai.gemini-in-the-cloud/manifest.json
+++ b/functional-samples/ai.gemini-in-the-cloud/manifest.json
@@ -6,7 +6,8 @@
   "background": {
     "service_worker": "background.js"
   },
-  "permissions": ["sidePanel"],
+  "permissions": ["sidePanel", "tabs"],
+  "host_permissions": ["<all_urls>"],
   "side_panel": {
     "default_path": "sidepanel/index.html"
   },
diff --git a/functional-samples/ai.gemini-in-the-cloud/package-lock.json b/functional-samples/ai.gemini-in-the-cloud/package-lock.json
index 8aafc45618..e4caa659af 100644
--- a/functional-samples/ai.gemini-in-the-cloud/package-lock.json
+++ b/functional-samples/ai.gemini-in-the-cloud/package-lock.json
@@ -8,23 +8,23 @@
       "name": "Chrome Extensions Gemini Demo",
       "version": "1.0",
       "devDependencies": {
-        "@google/generative-ai": "0.15.0",
-        "rollup": "4.19.0"
+        "@google/generative-ai": "0.17.1",
+        "rollup": "4.21.2"
       }
     },
     "node_modules/@google/generative-ai": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.15.0.tgz",
-      "integrity": "sha512-zs37judcTYFJf1U7tnuqnh7gdzF6dcWj9pNRxjA5JTONRoiQ0htrRdbefRFiewOIfXwhun5t9hbd2ray7812eQ==",
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.17.1.tgz",
+      "integrity": "sha512-TgWz02c5l2XJlEDys81UVat5+Qg9xqmYah7tQt6xlsBwFvzIFPz64aZFGd1av2sxT22NsssqLATjNsusAIJICA==",
       "dev": true,
       "engines": {
         "node": ">=18.0.0"
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.0.tgz",
-      "integrity": "sha512-JlPfZ/C7yn5S5p0yKk7uhHTTnFlvTgLetl2VxqE518QgyM7C9bSfFTYvB/Q/ftkq0RIPY4ySxTz+/wKJ/dXC0w==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
+      "integrity": "sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==",
       "cpu": [
         "arm"
       ],
@@ -35,9 +35,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.19.0.tgz",
-      "integrity": "sha512-RDxUSY8D1tWYfn00DDi5myxKgOk6RvWPxhmWexcICt/MEC6yEMr4HNCu1sXXYLw8iAsg0D44NuU+qNq7zVWCrw==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.2.tgz",
+      "integrity": "sha512-xGU5ZQmPlsjQS6tzTTGwMsnKUtu0WVbl0hYpTPauvbRAnmIvpInhJtgjj3mcuJpEiuUw4v1s4BimkdfDWlh7gA==",
       "cpu": [
         "arm64"
       ],
@@ -48,9 +48,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.0.tgz",
-      "integrity": "sha512-emvKHL4B15x6nlNTBMtIaC9tLPRpeA5jMvRLXVbl/W9Ie7HhkrE7KQjvgS9uxgatL1HmHWDXk5TTS4IaNJxbAA==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.2.tgz",
+      "integrity": "sha512-99AhQ3/ZMxU7jw34Sq8brzXqWH/bMnf7ZVhvLk9QU2cOepbQSVTns6qoErJmSiAvU3InRqC2RRZ5ovh1KN0d0Q==",
       "cpu": [
         "arm64"
       ],
@@ -61,9 +61,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.19.0.tgz",
-      "integrity": "sha512-fO28cWA1dC57qCd+D0rfLC4VPbh6EOJXrreBmFLWPGI9dpMlER2YwSPZzSGfq11XgcEpPukPTfEVFtw2q2nYJg==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.2.tgz",
+      "integrity": "sha512-ZbRaUvw2iN/y37x6dY50D8m2BnDbBjlnMPotDi/qITMJ4sIxNY33HArjikDyakhSv0+ybdUxhWxE6kTI4oX26w==",
       "cpu": [
         "x64"
       ],
@@ -74,9 +74,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.19.0.tgz",
-      "integrity": "sha512-2Rn36Ubxdv32NUcfm0wB1tgKqkQuft00PtM23VqLuCUR4N5jcNWDoV5iBC9jeGdgS38WK66ElncprqgMUOyomw==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.2.tgz",
+      "integrity": "sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==",
       "cpu": [
         "arm"
       ],
@@ -87,9 +87,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.19.0.tgz",
-      "integrity": "sha512-gJuzIVdq/X1ZA2bHeCGCISe0VWqCoNT8BvkQ+BfsixXwTOndhtLUpOg0A1Fcx/+eA6ei6rMBzlOz4JzmiDw7JQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.2.tgz",
+      "integrity": "sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==",
       "cpu": [
         "arm"
       ],
@@ -100,9 +100,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.19.0.tgz",
-      "integrity": "sha512-0EkX2HYPkSADo9cfeGFoQ7R0/wTKb7q6DdwI4Yn/ULFE1wuRRCHybxpl2goQrx4c/yzK3I8OlgtBu4xvted0ug==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.2.tgz",
+      "integrity": "sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==",
       "cpu": [
         "arm64"
       ],
@@ -113,9 +113,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.19.0.tgz",
-      "integrity": "sha512-GlIQRj9px52ISomIOEUq/IojLZqzkvRpdP3cLgIE1wUWaiU5Takwlzpz002q0Nxxr1y2ZgxC2obWxjr13lvxNQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.2.tgz",
+      "integrity": "sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==",
       "cpu": [
         "arm64"
       ],
@@ -126,9 +126,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.19.0.tgz",
-      "integrity": "sha512-N6cFJzssruDLUOKfEKeovCKiHcdwVYOT1Hs6dovDQ61+Y9n3Ek4zXvtghPPelt6U0AH4aDGnDLb83uiJMkWYzQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.2.tgz",
+      "integrity": "sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==",
       "cpu": [
         "ppc64"
       ],
@@ -139,9 +139,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.19.0.tgz",
-      "integrity": "sha512-2DnD3mkS2uuam/alF+I7M84koGwvn3ZVD7uG+LEWpyzo/bq8+kKnus2EVCkcvh6PlNB8QPNFOz6fWd5N8o1CYg==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.2.tgz",
+      "integrity": "sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==",
       "cpu": [
         "riscv64"
       ],
@@ -152,9 +152,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.19.0.tgz",
-      "integrity": "sha512-D6pkaF7OpE7lzlTOFCB2m3Ngzu2ykw40Nka9WmKGUOTS3xcIieHe82slQlNq69sVB04ch73thKYIWz/Ian8DUA==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.2.tgz",
+      "integrity": "sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==",
       "cpu": [
         "s390x"
       ],
@@ -165,9 +165,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.19.0.tgz",
-      "integrity": "sha512-HBndjQLP8OsdJNSxpNIN0einbDmRFg9+UQeZV1eiYupIRuZsDEoeGU43NQsS34Pp166DtwQOnpcbV/zQxM+rWA==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.2.tgz",
+      "integrity": "sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==",
       "cpu": [
         "x64"
       ],
@@ -178,9 +178,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.19.0.tgz",
-      "integrity": "sha512-HxfbvfCKJe/RMYJJn0a12eiOI9OOtAUF4G6ozrFUK95BNyoJaSiBjIOHjZskTUffUrB84IPKkFG9H9nEvJGW6A==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.2.tgz",
+      "integrity": "sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==",
       "cpu": [
         "x64"
       ],
@@ -191,9 +191,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.19.0.tgz",
-      "integrity": "sha512-HxDMKIhmcguGTiP5TsLNolwBUK3nGGUEoV/BO9ldUBoMLBssvh4J0X8pf11i1fTV7WShWItB1bKAKjX4RQeYmg==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.2.tgz",
+      "integrity": "sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==",
       "cpu": [
         "arm64"
       ],
@@ -204,9 +204,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.19.0.tgz",
-      "integrity": "sha512-xItlIAZZaiG/u0wooGzRsx11rokP4qyc/79LkAOdznGRAbOFc+SfEdfUOszG1odsHNgwippUJavag/+W/Etc6Q==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.2.tgz",
+      "integrity": "sha512-5rA4vjlqgrpbFVVHX3qkrCo/fZTj1q0Xxpg+Z7yIo3J2AilW7t2+n6Q8Jrx+4MrYpAnjttTYF8rr7bP46BPzRw==",
       "cpu": [
         "ia32"
       ],
@@ -217,9 +217,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.19.0.tgz",
-      "integrity": "sha512-xNo5fV5ycvCCKqiZcpB65VMR11NJB+StnxHz20jdqRAktfdfzhgjTiJ2doTDQE/7dqGaV5I7ZGqKpgph6lCIag==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.2.tgz",
+      "integrity": "sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==",
       "cpu": [
         "x64"
       ],
@@ -250,9 +250,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.19.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.19.0.tgz",
-      "integrity": "sha512-5r7EYSQIowHsK4eTZ0Y81qpZuJz+MUuYeqmmYmRMl1nwhdmbiYqt5jwzf6u7wyOzJgYqtCRMtVRKOtHANBz7rA==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.2.tgz",
+      "integrity": "sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -265,22 +265,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.19.0",
-        "@rollup/rollup-android-arm64": "4.19.0",
-        "@rollup/rollup-darwin-arm64": "4.19.0",
-        "@rollup/rollup-darwin-x64": "4.19.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.19.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.19.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.19.0",
-        "@rollup/rollup-linux-arm64-musl": "4.19.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.19.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.19.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.19.0",
-        "@rollup/rollup-linux-x64-gnu": "4.19.0",
-        "@rollup/rollup-linux-x64-musl": "4.19.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.19.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.19.0",
-        "@rollup/rollup-win32-x64-msvc": "4.19.0",
+        "@rollup/rollup-android-arm-eabi": "4.21.2",
+        "@rollup/rollup-android-arm64": "4.21.2",
+        "@rollup/rollup-darwin-arm64": "4.21.2",
+        "@rollup/rollup-darwin-x64": "4.21.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.21.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.21.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.21.2",
+        "@rollup/rollup-linux-arm64-musl": "4.21.2",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.21.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.21.2",
+        "@rollup/rollup-linux-x64-gnu": "4.21.2",
+        "@rollup/rollup-linux-x64-musl": "4.21.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.21.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.21.2",
+        "@rollup/rollup-win32-x64-msvc": "4.21.2",
         "fsevents": "~2.3.2"
       }
     }
diff --git a/functional-samples/ai.gemini-in-the-cloud/package.json b/functional-samples/ai.gemini-in-the-cloud/package.json
index 8b856c619b..fa905a7979 100644
--- a/functional-samples/ai.gemini-in-the-cloud/package.json
+++ b/functional-samples/ai.gemini-in-the-cloud/package.json
@@ -6,7 +6,7 @@
   },
   "private": true,
   "devDependencies": {
-    "@google/generative-ai": "0.15.0",
-    "rollup": "4.19.0"
+    "@google/generative-ai": "0.17.1",
+    "rollup": "4.21.2"
   }
 }
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css
index d88a10d5f0..ee4f7ac8cd 100644
--- a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css
+++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css
@@ -31,6 +31,15 @@ button.primary {
   color: white;
 }
 
+button.img {
+  background: #333;
+  color: white;
+  padding: 0 4px;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+}
+
 button.secondary {
   background: #ccc;
   color: black;
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html
index 9c6deff5ca..30eca8077a 100644
--- a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html
+++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html
@@ -11,6 +11,7 @@ <h1>Google Gemini</h1>
       cols="30"
       rows="5"
     ></textarea>
+    <ul id="files-list"></ul>
     <div>
       <input
         type="range"
@@ -25,7 +26,42 @@ <h1>Google Gemini</h1>
         >Temperature: <span id="label-temperature">1</span></label
       >
     </div>
-    <button id="button-prompt" class="primary" disabled>Run</button>
+    <div>
+      <input
+        type="file"
+        id="image-file"
+        accept="image/*"
+        style="display: none"
+      />
+      <button id="button-add-image" class="primary img">
+        <img
+          src="/images/screenshot-monitor-24.svg"
+          width="24"
+          height="24"
+          alt="take screenshot"
+        />
+      </button>
+      <input
+        type="file"
+        id="audio-file"
+        accept="audio/wav, audio/mp3"
+        style="display: none"
+      />
+      <button id="button-record-audio" class="primary img">
+        <img
+          src="/images/record-audio-24.svg"
+          width="24"
+          height="24"
+          alt="take screenshot"
+        />
+      </button>
+    </div>
+    <div>
+      <button id="button-prompt" class="primary" disabled type="submit">
+        Run
+      </button>
+      <button id="button-reset" class="primary" type="reset">Reset</button>
+    </div>
     <div id="response" class="text" hidden></div>
     <div id="loading" class="text" hidden><span class="blink">...</span></div>
     <div id="error" class="text" hidden></div>
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js
index 73f7180d8e..83ff4f4d45 100644
--- a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js
+++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js
@@ -14,21 +14,93 @@ import {
 //
 // It is only OK to put your API key into this file if you're the only
 // user of your extension or for testing.
-const apiKey = '...';
+const apiKey = 'AIzaSyA0tBKTK1ieL1Dyb2AsYk7q_tGsb6jN4o8';
 
 let genAI = null;
 let model = null;
 let generationConfig = {
   temperature: 1
 };
+let promptFiles = [];
 
 const inputPrompt = document.body.querySelector('#input-prompt');
 const buttonPrompt = document.body.querySelector('#button-prompt');
+const buttonReset = document.body.querySelector('#button-reset');
 const elementResponse = document.body.querySelector('#response');
 const elementLoading = document.body.querySelector('#loading');
 const elementError = document.body.querySelector('#error');
 const sliderTemperature = document.body.querySelector('#temperature');
 const labelTemperature = document.body.querySelector('#label-temperature');
+const elementAudioFile = document.getElementById('audio-file');
+const buttonAudioFile = document.getElementById('button-record-audio');
+const elementImageFile = document.getElementById('image-file');
+const buttonImageFile = document.getElementById('button-add-image');
+const listFiles = document.getElementById('files-list');
+
+buttonImageFile.addEventListener(
+  'click',
+  () => {
+    elementImageFile.click();
+  },
+  false
+);
+elementImageFile.addEventListener('change', async () => {
+  uploadFiles(elementImageFile.files, 'image');
+});
+
+buttonAudioFile.addEventListener(
+  'click',
+  () => {
+    elementAudioFile.click();
+  },
+  false
+);
+elementAudioFile.addEventListener('change', async () => {
+  uploadFiles(elementAudioFile.files, 'audio');
+});
+
+async function uploadFiles(files, type) {
+  for (const file of files) {
+    // getting base64 from file to render in DOM
+    const base64 = await getBase64(file);
+    // generating content model for Gemini Google AI
+    const imagePart = await fileToGenerativePart(file);
+    renderUploadedFile(file.name, type, base64);
+    promptFiles.push({
+      name: file.name,
+      preview: base64,
+      imagePart
+    });
+  }
+}
+
+function renderUploadedFile(name, type) {
+  const fileElement = document.createElement('LI');
+  fileElement.textContent = name;
+  fileElement.classList.add(type);
+  listFiles.appendChild(fileElement);
+}
+
+function getBase64(file) {
+  return new Promise(function (resolve, reject) {
+    let reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject('Error: ', error);
+  });
+}
+
+async function fileToGenerativePart(file) {
+  const base64EncodedDataPromise = new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result.split(',')[1]);
+    reader.readAsDataURL(file);
+  });
+
+  return {
+    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type }
+  };
+}
 
 function initModel(generationConfig) {
   const safetySettings = [
@@ -48,7 +120,10 @@ function initModel(generationConfig) {
 
 async function runPrompt(prompt) {
   try {
-    const result = await model.generateContent(prompt);
+    const result = await model.generateContent([
+      prompt,
+      ...promptFiles.map((f) => f.imagePart)
+    ]);
     const response = await result.response;
     return response.text();
   } catch (e) {
@@ -87,6 +162,14 @@ buttonPrompt.addEventListener('click', async () => {
   }
 });
 
+buttonReset.addEventListener('click', async () => {
+  promptFiles = [];
+  listFiles.textContent = '';
+  model = null;
+  elementAudioFile.value = null;
+  elementImageFile.value = null;
+});
+
 function showLoading() {
   hide(elementResponse);
   hide(elementError);

From 26564340719da226eed4e43e3081a1978cfeef16 Mon Sep 17 00:00:00 2001
From: Sebastian Benz <sbenz@google.com>
Date: Wed, 4 Sep 2024 13:14:20 +0200
Subject: [PATCH 2/2] first working version

---
 .../ai.gemini-in-the-cloud/manifest.json      |  2 +-
 .../sidepanel/index.css                       |  9 +--
 .../sidepanel/index.html                      | 30 ++++++++--
 .../ai.gemini-in-the-cloud/sidepanel/index.js | 57 +++++++++++++++++-
 .../sidepanel/screenshot.js                   | 24 ++++++++
 .../sidepanel/tab-audio-recorder.js           | 60 +++++++++++++++++++
 6 files changed, 169 insertions(+), 13 deletions(-)
 create mode 100644 functional-samples/ai.gemini-in-the-cloud/sidepanel/screenshot.js
 create mode 100644 functional-samples/ai.gemini-in-the-cloud/sidepanel/tab-audio-recorder.js

diff --git a/functional-samples/ai.gemini-in-the-cloud/manifest.json b/functional-samples/ai.gemini-in-the-cloud/manifest.json
index c4ed1e2651..90d0730a40 100644
--- a/functional-samples/ai.gemini-in-the-cloud/manifest.json
+++ b/functional-samples/ai.gemini-in-the-cloud/manifest.json
@@ -6,7 +6,7 @@
   "background": {
     "service_worker": "background.js"
   },
-  "permissions": ["sidePanel", "tabs"],
+  "permissions": ["activeTab", "scripting", "sidePanel"],
   "host_permissions": ["<all_urls>"],
   "side_panel": {
     "default_path": "sidepanel/index.html"
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css
index ee4f7ac8cd..02b230ad2d 100644
--- a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css
+++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css
@@ -31,13 +31,8 @@ button.primary {
   color: white;
 }
 
-button.img {
-  background: #333;
-  color: white;
-  padding: 0 4px;
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
+button > img {
+ vertical-align: middle;
 }
 
 button.secondary {
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html
index 30eca8077a..9c69f49e71 100644
--- a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html
+++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html
@@ -4,7 +4,6 @@
     <link rel="stylesheet" type="text/css" href="index.css" />
   </head>
   <body>
-    <h1>Google Gemini</h1>
     <textarea
       id="input-prompt"
       placeholder='Type something, e.g. "Write a haiku about Chrome Extensions"'
@@ -33,13 +32,23 @@ <h1>Google Gemini</h1>
         accept="image/*"
         style="display: none"
       />
-      <button id="button-add-image" class="primary img">
+      <button id="button-add-image" class="primary">
         <img
           src="/images/screenshot-monitor-24.svg"
           width="24"
           height="24"
           alt="take screenshot"
         />
+        Add image
+      </button>
+      <button id="button-capture-image" class="primary">
+        <img
+          src="/images/screenshot-monitor-24.svg"
+          width="24"
+          height="24"
+          alt="capture screenshot"
+        />
+        Take Screenshot
       </button>
       <input
         type="file"
@@ -47,13 +56,26 @@ <h1>Google Gemini</h1>
         accept="audio/wav, audio/mp3"
         style="display: none"
       />
-      <button id="button-record-audio" class="primary img">
+      <button id="button-record-audio" class="primary" disabled>
         <img
           src="/images/record-audio-24.svg"
           width="24"
           height="24"
-          alt="take screenshot"
+          alt="Upload an audio file"
         />
+        Record audio
+      </button>
+      <button id="button-capture-audio" class="primary">
+        <img
+          src="/images/record-audio-24.svg"
+          width="24"
+          height="24"
+          alt="Capture tab audio"
+        />
+        Add audio file
+      </button>
+      <button id="button-capture-audio-stop" class="primary" hidden>
+        Stop recording
       </button>
     </div>
     <div>
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js
index 83ff4f4d45..c9c2785dd7 100644
--- a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js
+++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js
@@ -4,6 +4,9 @@ import {
   HarmCategory
 } from '../node_modules/@google/generative-ai/dist/index.mjs';
 
+import TabAudioRecorder from './tab-audio-recorder';
+import getScreenshot from './screenshot';
+
 // Important! Do not expose your API in your extension code. You have to
 // options:
 //
@@ -14,7 +17,7 @@ import {
 //
 // It is only OK to put your API key into this file if you're the only
 // user of your extension or for testing.
-const apiKey = 'AIzaSyA0tBKTK1ieL1Dyb2AsYk7q_tGsb6jN4o8';
+const apiKey = 'AIzaSyAiTmPF3fbapEgNtpkVyAOxNb0GZbvLfyE';
 
 let genAI = null;
 let model = null;
@@ -22,6 +25,10 @@ let generationConfig = {
   temperature: 1
 };
 let promptFiles = [];
+let screenshotCount = 0;
+let audioRecordingCount = 0;
+
+const tabAudioRecorder = new TabAudioRecorder();
 
 const inputPrompt = document.body.querySelector('#input-prompt');
 const buttonPrompt = document.body.querySelector('#button-prompt');
@@ -36,6 +43,11 @@ const buttonAudioFile = document.getElementById('button-record-audio');
 const elementImageFile = document.getElementById('image-file');
 const buttonImageFile = document.getElementById('button-add-image');
 const listFiles = document.getElementById('files-list');
+const buttonCaptureAudio = document.getElementById('button-capture-audio');
+const buttonCaptureAudioStop = document.getElementById(
+  'button-capture-audio-stop'
+);
+const buttonCaptureImage = document.getElementById('button-capture-image');
 
 buttonImageFile.addEventListener(
   'click',
@@ -55,10 +67,51 @@ buttonAudioFile.addEventListener(
   },
   false
 );
+
 elementAudioFile.addEventListener('change', async () => {
   uploadFiles(elementAudioFile.files, 'audio');
 });
 
+buttonCaptureImage.addEventListener('click', async () => {
+  try {
+    const screenshot = await getScreenshot();
+    console.log('screenshot', screenshot);
+    const fileName =
+      screenshotCount > 0 ? `Screenshot_${screenshotCount + 1}` : 'Screenshot';
+    renderUploadedFile(fileName, 'image', screenshot.data);
+    const imagePart = {
+      inlineData: { data: screenshot.base64, mimeType: 'image/png' }
+    };
+    promptFiles.push({
+      name: fileName,
+      preview: screenshot,
+      mimeType: 'image/png',
+      imagePart
+    });
+    screenshotCount++;
+  } catch (e) {
+    console.log(e);
+    alert(e.message);
+  }
+});
+
+buttonCaptureAudio.addEventListener('click', async () => {
+  try {
+    await tabAudioRecorder.start();
+    hide(buttonCaptureAudio);
+    show(buttonCaptureAudioStop);
+  } catch (e) {
+    console.error(e);
+    alert(e.message);
+  }
+});
+
+buttonCaptureAudioStop.addEventListener('click', async () => {
+  tabAudioRecorder.stop();
+  show(buttonCaptureAudio);
+  hide(buttonCaptureAudioStop);
+});
+
 async function uploadFiles(files, type) {
   for (const file of files) {
     // getting base64 from file to render in DOM
@@ -168,6 +221,8 @@ buttonReset.addEventListener('click', async () => {
   model = null;
   elementAudioFile.value = null;
   elementImageFile.value = null;
+  screenshotCount = 0;
+  audioRecordingCount = 0;
 });
 
 function showLoading() {
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/screenshot.js b/functional-samples/ai.gemini-in-the-cloud/sidepanel/screenshot.js
new file mode 100644
index 0000000000..c1358b11e9
--- /dev/null
+++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/screenshot.js
@@ -0,0 +1,24 @@
+const getScreenshot = async () => {
+  const imageDataUri = await chrome.tabs.captureVisibleTab({ format: 'png' });
+  const byteString = atob(imageDataUri.split(',')[1]);
+  const ab = new ArrayBuffer(byteString.length);
+  const ia = new Uint8Array(ab);
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+  return {
+    data: ia,
+    base64: await blobToBase64(new Blob([ia], { type: 'image/png' }))
+  };
+};
+
+const blobToBase64 = async (imageDataUri) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(imageDataUri);
+    reader.onloadend = () => resolve(reader.result.split(',')[1]);
+    reader.onerror = reject;
+  });
+};
+
+export default getScreenshot;
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/tab-audio-recorder.js b/functional-samples/ai.gemini-in-the-cloud/sidepanel/tab-audio-recorder.js
new file mode 100644
index 0000000000..91600eee7f
--- /dev/null
+++ b/functional-samples/ai.gemini-in-the-cloud/sidepanel/tab-audio-recorder.js
@@ -0,0 +1,60 @@
+export default class TabAudioRecorder {
+  constructor() {
+    this.recorder = null;
+    this.data = [];
+  }
+
+  async start() {
+    /*
+    const currentTab = await chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    });
+    console.log('currentab', currentTab);
+
+    const streamId = await chrome.tabCapture.getMediaStreamId({
+      targetTabId: currentTab.id
+    });
+
+    const media = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        mandatory: {
+          chromeMediaSource: 'tab',
+          chromeMediaSourceId: streamId
+        }
+      }
+    });
+    */
+
+    const media = await navigator.mediaDevices.getDisplayMedia({
+      audio: true,
+      video: false
+    });
+
+    // Continue to play the captured audio to the user.
+    const output = new AudioContext();
+    const source = output.createMediaStreamSource(media);
+    source.connect(output.destination);
+    // Start recording.
+    this.recorder = new MediaRecorder(media, { mimeType: 'audio/wav' });
+    this.recorder.ondataavailable = (event) => this.data.push(event.data);
+    this.recorder.onstop = () => {
+      const blob = new Blob(this.data, { type: 'video/wav' });
+      window.open(URL.createObjectURL(blob), '_blank');
+
+      // Clear state ready for next recording
+      this.recorder = undefined;
+      this.data = [];
+    };
+    this.recorder.start();
+  }
+
+  stop() {
+    if (!this.recorder) {
+      return;
+    }
+    this.recorder.stop();
+    // Stopping the tracks makes sure the recording icon in the tab is removed.
+    this.recorder.stream.getTracks().forEach((t) => t.stop());
+  }
+}