Google CSE自动搜索脚本嵌入HTML失效及报错问题排查

问题背景 #

我搭建了Google自定义搜索引擎（CSE），核心代码如下：

<script async src="https://cse.google.com/cse.js?cx=f2bcbf82e6df34220">
</script>
<div class="gcse-search"></div>

写了一段自动执行搜索的脚本，在浏览器控制台里能正常输入关键词、触发搜索并打开首个结果，但嵌入到完整HTML文件后完全失效，还报出错误：Unchecked runtime.lastError: The message port closed before a response was received。

控制台可用的自动搜索脚本：

async function clickFirstSearchResult() {
  var inputElement = document.getElementById("gsc-i-id1");

  if (inputElement) {
    var searchText = "newsze99.blogspot.com";

    for (var i = 0; i < searchText.length; i++) {
      var char = searchText.charAt(i);
      var event = new Event("input", { bubbles: true });
      inputElement.value += char;
      inputElement.dispatchEvent(event);
    }

    var searchButton = document.querySelector(".gsc-search-button.gsc-search-button-v2");
    if (searchButton) {
      searchButton.click();
    }

    await new Promise(resolve => setTimeout(resolve, 2000));

    var firstSearchResultLink = document.querySelector(".gs-title a");
    if (firstSearchResultLink) {
      var linkHref = firstSearchResultLink.getAttribute("data-cturl");
      window.open(linkHref, "_blank");
    }
  }
}

clickFirstSearchResult();

失效的嵌入HTML文件：

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div class="gcse-search"></div>

  <script>
    function executeAfterScriptLoad() {
      async function clickFirstSearchResult() {
        var inputElement = document.getElementById("gsc-i-id1");

        if (inputElement) {
          var searchText = "newsze99.blogspot.com";

          for (var i = 0; i < searchText.length; i++) {
            var char = searchText.charAt(i);
            var event = new Event("input", {
              bubbles: true
            });
            inputElement.value += char;
            inputElement.dispatchEvent(event);
          }

          var searchButton = document.querySelector(".gsc-search-button.gsc-search-button-v2");
          if (searchButton) {
            searchButton.click();
          }

          await new Promise(resolve => setTimeout(resolve, 2000));

          var firstSearchResultLink = document.querySelector(".gs-title a");
          if (firstSearchResultLink) {
            var linkHref = firstSearchResultLink.getAttribute("data-cturl");
            window.open(linkHref, "_blank");
          }
        }
      }

      var script = document.createElement("script");
      script.src = "https://cse.google.com/cse.js?cx=f2bcbf82e6df34220";
      script.onload = function() {
        clickFirstSearchResult();
      };

      document.head.appendChild(script);
    }

    window.addEventListener("load", executeAfterScriptLoad);
  </script>
</body>

</html>

问题原因 #

1. CSE脚本加载≠组件初始化完成：cse.js下载完只是第一步，Google CSE还需要异步渲染搜索框、绑定内部事件、初始化组件状态，这时候直接调用脚本会找不到gsc-i-id1这类元素。
2. 硬编码延迟不可靠：控制台执行时页面已经完全就绪，但嵌入HTML时，网络波动、浏览器渲染速度差异都会导致2秒延迟后元素仍未加载。
3. 消息端口报错：这是CSE内部的通信异常，本质是组件未初始化就触发操作，导致内部消息通道提前关闭。

解决方案 #

方案1：监听CSE官方初始化回调（推荐） #

Google CSE提供了googleSearch.cse.onload回调，确保搜索组件完全就绪后再执行脚本，同时用元素监听替代硬编码延迟：

修改后的完整HTML：

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script>
    // 注册CSE组件初始化完成的回调
    window.googleSearch = {
      cse: {
        onload: function() {
          clickFirstSearchResult();
        }
      }
    };

    async function clickFirstSearchResult() {
      // 等待搜索输入框出现
      await waitForElement("#gsc-i-id1");
      const inputElement = document.getElementById("gsc-i-id1");
      const searchText = "newsze99.blogspot.com";

      // 设置输入值并触发CSE监听的事件
      inputElement.value = searchText;
      inputElement.dispatchEvent(new Event("input", { bubbles: true }));
      inputElement.dispatchEvent(new Event("change", { bubbles: true }));

      // 等待搜索按钮出现并点击
      await waitForElement(".gsc-search-button.gsc-search-button-v2");
      const searchButton = document.querySelector(".gsc-search-button.gsc-search-button-v2");
      searchButton.click();

      // 等待搜索结果链接出现
      await waitForElement(".gs-title a");
      const firstSearchResultLink = document.querySelector(".gs-title a");
      // 兼容data-cturl和href两种情况
      const linkHref = firstSearchResultLink.getAttribute("data-cturl") || firstSearchResultLink.href;

      window.open(linkHref, "_blank");
    }

    // 通用工具：等待元素在DOM中出现
    function waitForElement(selector) {
      return new Promise(resolve => {
        const existingEl = document.querySelector(selector);
        if (existingEl) {
          return resolve(existingEl);
        }

        const observer = new MutationObserver(mutations => {
          const el = document.querySelector(selector);
          if (el) {
            observer.disconnect();
            resolve(el);
          }
        });

        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
      });
    }
  </script>
  <!-- 加载CSE脚本 -->
  <script async src="https://cse.google.com/cse.js?cx=f2bcbf82e6df34220"></script>
</head>
<body>
  <div class="gcse-search"></div>
</body>
</html>

方案2：直接调用CSE搜索API（更稳定） #

如果不需要模拟用户输入的交互流程，直接调用官方API获取结果并跳转，避免DOM操作的不确定性：

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script>
    async function searchAndRedirect() {
      const cx = "f2bcbf82e6df34220";
      const query = "newsze99.blogspot.com";
      // 替换为你的Google Custom Search API密钥
      const apiKey = "YOUR_API_KEY";

      try {
        const response = await fetch(`https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${cx}&q=${query}`);
        const data = await response.json();
        
        if (data.items && data.items.length > 0) {
          window.open(data.items[0].link, "_blank");
        }
      } catch (err) {
        console.error("搜索请求失败:", err);
      }
    }

    window.addEventListener("load", searchAndRedirect);
  </script>
</head>
<body>
  <div class="gcse-search"></div>
</body>
</html>

注意：此方案需要在Google云平台申请Custom Search API密钥，并确保你的CSE配置允许API调用。

内容的提问来源于stack exchange，提问作者anurag