Using to ask for user consent before loading external resources

I made a site which embeds a Google Programmable Search Engine. But I want it to show a <dialog> asking the user for consent prior to loading scripts from Google.

In order not to annoy returning visitors, a “remember my consent” checkbox shall be used to store a cookie which prevents the dialog from popping up again.

I figured out to adapt the dialog demo from Mozilla to already fit roughly my needs (➡️ jsfiddle)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />    
  <style>
    dialog::backdrop {
      backdrop-filter: blur(5px);
    }
  </style>
</head>
<body>
  
  <dialog id="favDialog">
    <form method="dialog">
      <p><strong>If you proceed, Google will collect and process data according to the <a href="#">Google Privacy Policy</a>.</p>
      
      <div>
        <button value="disagreed">Cancel</button>
        <button id="confirmBtn" value="agreed">I Agree</button><br />
        
        <input type="checkbox" id="chkRemember" name="chkRemember" value="agreed-plus-cookies">
        <label for="chkRemember">Remember my consent (this requires cookies, <a href="#">legal mumbo-jumbo</a> applies)</label>
      </div>
    </form>
  </dialog>
  
  <output></output>
  
  <div class="gcse-searchresults-only" id="gcse_results"></div>
  
  <script>
    const gcse_results = document.getElementById('gcse_results');
    const favDialog = document.getElementById('favDialog');
    const outputBox = document.querySelector('output');
    const confirmBtn = favDialog.querySelector('#confirmBtn');
    const chkRemember = favDialog.querySelector('#chkRemember');
    
    
    // automatically open the <dialog>
    window.addEventListener("load", (event) => {
      favDialog.showModal();
    });
    
    // checkbox sets value of the submit buttom
    chkRemember.addEventListener('change', (e) => {
      confirmBtn.value = chkRemember.value;
    });
    // "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
    favDialog.addEventListener('close', () => {
      outputBox.value = `ReturnValue: ${favDialog.returnValue}.`;
    });
  </script>  

  <script async src="https://cse.google.com/cse.js?cx=c6dd01376f2fb45af"></script>

</body>
</html> 

The dialog returns 3 possible values: disagreed, agreed, agreed-plus-cookie

What I could not figure out yet is how to actually process ${favDialog.returnValue}, i.e.:

  1. When agreed is returned, add the following code to the dom: <script async src="https://cse.google.com/cse.js?cx=mycode"></script>
  2. When agreed-plus-cookies is returned, do the same as 1. and place a cookie
  3. When disagreed is returned, add a short explanation to the site’s body (e.g. “sorry, this site does not work without loading stuff from google, see faq”)
  4. When the cookie from 2. is already present, do not automatically open the and proceed as in 1.

Plain JS is highly appreciated.

This is my 2nd attempt for this post. Sorry for my poor first try, I hope I am doing better—and thanks to those who pointed me to dialog at all. Turns out, a lot has happened to the web in the past. 🙂