chrome扩展程序开发 content.js获取页面dom内容报错 chrome插件

Question

本人最近开发chrome扩展程序，目的是爬取页面数据，使用js获取dom内文本内容。比如通过document.getElementsByClassName('data')[0].innerHTML来获取相对应className标签的内容。

需求：取得页面上所有classname为data的标签内容

问题：
当只取一个值的时候是成功的，如：document.getElementsByClassName('data')[0].innerHTML，
当我想循环取值的时候就会报错，如图：

贴一下我的代码
popup.js
点击事件

fetchData() {
      console.log('fetch')
      chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
        let message = {
          info: 'hello'
        }
        chrome.tabs.sendMessage(tabs[0].id, message, res => {
          console.log('bg=>content')
          console.log(res)
        })
      });
    },

content.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    function (request, sender, sendResponse) {
        var _dom = document.getElementsByClassName('data')
        var _data = [];
        for (var i = 0; i < _dom.length; i++) {
            _data.push(_dom[i].innerHTML)
        }
        sendResponse(_dom)
   }
});

感恩~~~~！

Answer 1

获取多个class dom，需要一个一个使用document.getElementsByClassName('data')[i]来获取并操作，否则都是空