Google Apps Script Web App 从 Chrome 扩展程序接收消息答案

【问题标题】：Google Appscript Web App receiving message from Chrome ExtensionGoogle Apps Script Web App 从 Chrome 扩展程序接收消息
【发布时间】：2021-11-22 05:47:28
【问题描述】：

我正在开发一个基于 App Script 的网络应用程序（以使用 Google API）。我有一个与网络应用程序一起工作的 chrome 扩展程序，以便我可以发送有关浏览器的信息。

我正在使用一个内容脚本，该脚本会在 Web 应用加载后进行初始化。我只想通过内容脚本从扩展程序向 Web 应用程序发送一条消息。但是，DOM 不起作用，因为 App Script 使用 iFrame。这是我实际的网络应用程序中的代码：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input type="text" id="pageId" onchange="updateSessionInfo()">
  </body>
  <script>
    function updateSessionInfo(){
      var pageId = document.getElementById("pageId").value;
      google.script.run.update(pageId);
    }
  </script>
</html>

我试图使用 DOM 将 pageId 发送到输入元素，并且通过更改值，更新函数将发送信息。

但是，这是我在浏览器上收到的结构：

Chrome 开发工具

我的想法正确吗？还是编辑 DOM 既脏又不可行？还有其他方法吗？

更新：

我通过深入查看树找到了实际的文档 HTML 元素：

新控制台

但是如果id="pageId"的元素在下面，为什么我调用它时返回null呢？

更新：

我注意到它有时会返回 null，有时还会检测到元素：

最新控制台

【问题讨论】：

你的清单？？

标签： google-apps-script iframe google-chrome-extension sandbox same-origin-policy

【解决方案1】：

这对我来说是一个对话框：

通常我希望，如果这将作为一个对话框运行，它也将作为一个 webapp 运行，并添加一个 doget();

gs:

function runmydialog() {
  const ui = SpreadsheetApp.getUi();
  ui.showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),'test');
}

function update(msg) {
  SpreadsheetApp.getUi().alert(msg);
}

html:

<!DOCTYPE html>
<html>
 <head>
   <base target="_top">
</head>
<body>
  <body>
    <input type="text" id="pageId" onchange="updateSessionInfo()">
  <script>
    function updateSessionInfo(){
      var pageId = document.getElementById("pageId").value;
      google.script.run.update(pageId);
    }
  </script>
</body>
</html>

对话框：

警告：

我注意到您的脚本不在正文中。我不知道这是否会有所不同。

【讨论】：

我刚刚看到 Google App Script 使用双 iframe 来保护 html 代码，所以我想我无法使用外部 DOM 对其进行编辑。不过谢谢你的回答！