Posts

How to Open a Website in New Window from Google Sheets Menu

Image
Let’s say you have built an add-on for Google Sheets that adds a new menu item to the sheets UI. You would now like to add an option in the menu that, when clicked, will redirect the user to your website without the user having to click any other button. For instance, in this demo Google Sheet , we have a parent menu and a sub-menu that opens the underlying website in the new window. 1. Add Menu in Google Sheets As a first step, we’ll add a custom menu in the Google Sheet and invoke it from the onOpen function so the menu is always available when a user opens your Google Sheet. const onOpen = ( ) => { const ui = SpreadsheetApp . getUi ( ) ; const parentMenu = ui . createMenu ( '👩🏻‍💼 Digital Inspiration' ) ; parentMenu . addItem ( 'Visit our website' , 'openWebsite' ) ; parentMenu . addToUi ( ) ; } ; 2. Add HTML for Website Redirection Create a new file url.html in the Apps Script editor and add the following code. Th...

How to Play an MP3 File in Google Sheets

Image
You can put the link of any MP3 audio file in Google Sheets but when you click the file link, the audio would not play. You can however add a button in your Google Sheet that, when clicked, will play the MP3 file in modal window. Here’s a demo: The audio files are hosted on Google Drive and when the Play button is clicked, the app will open a modal window with the audio player. Add the Audio Player Button To get started, create a new Google Sheet, go to the Insert menu and choose Create a New Drawing . Select Beveled Rectangle from the list of shapes, add some inline text and click Save to insert the button to your active Google Sheet. Add the Player Script Next, inside the Extension menu of Google Sheets, go to Script Editor and paste the following script. const openAudioPlayer = ( ) => { const cell = SpreadsheetApp . getActiveSheet ( ) . getActiveCell ( ) . getValue ( ) ; const html = ` <iframe src=" ${ cell } " width="480" h...

How to Auto-Download Podcasts to Google Drive with Google Sheets

Image
This tutorial describes how you can use Google Sheets to build your own podcast manager. You can specify a list of your favorite podcast shows in Google Sheets and it will automatically download new episodes to your Google Drive in neatly organized folders. The setup is very simple, the app is completely open-source and you need no programming language. How the Drive Podcast Manager Works? You have to place the links of your favorite podcasts in column A of the Google Sheet as shown in the screenshot below. The app will automatically download the latest episodes of each podcast to your Google Drive. You can open the MP3 files from your Google Drive or find them directly inside the same Google Sheet. The app will create a new folder, titled Podcasts in your Google Drive. Inside this folder, it will create sub-folders for each podcast show with the folder name same as the title of the podcast. Download Podcasts to Google Drive Here’s how you can build your own podcast m...

How to Build a Website Scraper with Puppeteer and Firebase Functions

Image
Let’s create a simple website scraper that download the content of a web page and extract the content of the page. For this example, we will use the New York Times website as the source of the content. The scraper will extract the top 10 news headlines on the page and display them on the web page. The scraping is done using the Puppeteer headless browser and web application is deployed on Firebase functions. 1. Initialize a Firebase Function Assuming that you have already created a Firebase project, you can initialize the Firebase functions in a local environment by running the following command: mkdir scraper cd scraper npx firebase init functions cd functions npm install puppeteer Follow through the prompts to initialize the project. We are also installing the Puppeteer package from NPM to use the Puppeteer headless browser. 2. Create a Node.js Application Create a new pptr.js file in the functions folder that will contain the application code for scraping the co...

How to Build a HTML Form for Uploading Files to Google Cloud Storage

Let’s write a simple web application that will allow users to upload files to Google Cloud Storage without authentication. The client site of the application will have an HTML form with one or more input fields. The server side is a Node.js application that will handle the file upload. The application may be deployed to Google Cloud Run, Firebase Function or as a Google Cloud Function. HTML Form Our HTML form includes a name field and a file input field that accepts only image files. Both the fields are required. When the user submits the form, the form data is sent to the server, encoded as multipart/form-data, using the Fetch API. The server will validate the form data and if the form is valid, it will upload the file to Google Cloud Storage. < form method = " post " enctype = " multipart/form-data " > < input type = " text " name = " name " id = " name " placeholder = " Your name " required /> ...