Copy to clipboard button for Google Drive files

A better file viewer than the one Google provides, that's more suitable for displaying code and text files, with a Copy to clipboard button as well — great when using mobile devices that only offer Select All functionality for editable text.
  1. Go to Apps Script in your Google account

  2. Click New project in the upper left corner

  3. In the code editor, replace everything with the following:

  4. function doGet(e) {
      const id = "FILE_ID";
      const file = DriveApp.getFileById(id);
      const contents = file.getBlob().setContentType("text/plain").getDataAsString();
      const html = `<!DOCTYPE html>
      <html>
        <head>
          <base target="_top"> 
          <style>
            :root {
            color-scheme: light dark;
            }
            pre {
              overflow-wrap: break-word;
              white-space: pre-wrap;
            }
          </style>
        </head>
        <body>
          <button id="copy">Copy to clipboard</button>
          <a href="https://drive.google.com/uc?id=${id}" target="_blank" rel="noreferrer"><button>Download</button></a>
          <pre><code>`+ contents + `</code></pre>
          <script>
            const writeClipboard = async function() {
              if (!navigator.clipboard) {
              return;
              }
              try {
                const code = document.getElementsByTagName('code')[0];
                code.focus();
                await navigator.clipboard.writeText(code.innerText);
              } catch (err) {
                alert('Failed to copy to clipboard!');
              }
            }
            document.getElementById('copy').onclick = function() {
              writeClipboard();
            }
          </script>
        </body>
      </html>`
      const output = HtmlService.createHtmlOutput(html);
      output.setTitle('YOUR_TITLE');
      output.setFaviconUrl('YOUR_FAVICON_URL');
      output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
      return output;
    }
    
    

  5. Replace FILE_ID with the file ID in your Google Drive sharing link, and replace YOUR_TITLE and YOUR_FAVICON_URL with your own values (the last two aren't required so they may also be deleted), if necessary, also change the type in setContentType("text/plain")

  6. In the upper right corner, above the code editor, click Deploy and then New Deployment

  7. In the dialog that opens, click the cogwheel, and in the drop-down menu, select Web app

  8. Under Configuration, click Who has access, and in the drop-down menu, select Anyone

  9. Click Deploy

  10. After it finishes, click Authorize access

  11. In window that opens, click your account name

  12. Click Advanced when a message appears saying Google hasn’t verified this app

  13. Next, click Go to <project name> (unsafe)

  14. At the bottom of the page that opens, click Allow

  15. After it finishes, click the Copy button below the Web app URL

You now have a scripts.google.com URL that you can use wherever you would have used the regular Google Drive sharing link.

If you want to make changes to the script, you need to update the deployment the following way for it to have any effect on the apps script URL:
  1. In the script editor, click Deploy, but don't click New Deployment afterwards — that creates a new URL — instead, click Manage deployments so you can keep using the same URL

  2. In the dialog that opens, click the pencil icon

  3. Next, click Version, and in the drop-down menu, select New version and afterwards click Deploy

You may have to go through the Authorize access process again for the second deployment, but not after that it seems.