如何在Chrome扩展popup.html中展示DOM获取的广告ID信息

要实现把网页中的广告ID从控制台输出转移到Popup页面的<p>元素里，我们需要利用Chrome扩展的内容脚本（Content Script）和Popup页面之间的数据传递，同时动态操作Popup的DOM。以下是具体步骤和修改后的代码：

1. 修改 popup.html，添加广告ID容器 #

首先在Popup页面的<body>中添加一个容器，用来存放生成的<p>元素：

<!DOCTYPE html>
<html>
<head>
  <title>MR QC Auditor View</title>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="popup.js"></script>
</head>
<body>
  <img src="MRLogo128.png"/>
  <h1>Current Ad's Brand:</h1>
  <span id="brandNameText"></span>
  <h2>Link To Ad Tagger</h2>
  <span><a href="http://www.google.com">Link</a></span>
  <!-- 添加这个容器，用来展示广告ID -->
  <div id="adIdsContainer" style="margin-top: 20px;"></div>
</body>
</html>

2. 重写 popup.js，实现数据传递与DOM渲染 #

我们需要调整chrome.tabs.executeScript的逻辑，让内容脚本返回广告ID数组，然后在Popup中动态创建<p>元素：

// 先注入jQuery，再执行获取广告ID的脚本
chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function() {
  // 执行内容脚本，获取广告ID数组并返回
  chrome.tabs.executeScript({
    code: `
      var printAds = document.getElementsByClassName("ad-image printadviewable pointer");
      var adArray = [];
      for (var i = 0; i < printAds.length; i++) {
        adArray.push($(printAds[i]).attr("data-adid"));
      }
      // 关键：返回数组给Popup的回调函数
      adArray;
    `,
    allFrames: true
  }, function(results) {
    // results是一个数组，对应每个frame的返回值，这里取第一个结果
    const adIds = results[0];
    const container = document.getElementById('adIdsContainer');
    
    // 遍历广告ID数组，创建<p>元素并插入容器
    adIds.forEach(adId => {
      const p = document.createElement('p');
      p.textContent = `Current Ad Id = ${adId}`;
      container.appendChild(p);
    });
  });
});

关键逻辑说明 #

• 数据传递：chrome.tabs.executeScript的第二个参数是回调函数，results参数包含了内容脚本的返回值（这里是广告ID数组）。因为我们设置了allFrames: true，results会是一个数组，对应每个frame的执行结果，这里我们取第一个元素即可。
• DOM操作：在Popup页面的上下文里，直接通过document.getElementById获取容器，然后用createElement创建<p>元素，设置文本内容后插入容器。
• 简化代码：把获取广告ID的逻辑合并到一个code块中，并通过返回值传递数据，比单独使用chrome.runtime.sendMessage更简洁。

这样修改后，当你点击扩展图标打开Popup时，网页中的所有广告ID就会以<p>元素的形式显示在Popup页面里，而不是打印到控制台了。

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