如何在 Chrome 扩展中按类抓取页面内容？答案

【问题标题】：How to grab page content by class in Chrome extension?如何在 Chrome 扩展中按类抓取页面内容？
【发布时间】：2019-01-21 23:16:56
【问题描述】：

我想按类从页面中获取内容。我写了 chrome 扩展，但我没有得到元素的内容。我在 textarea 中收到了 [object Object]。我写 chrome.runtime.sendMessage(document.title); 时试图获取页面标题在payload.js中它可以工作，但是当我尝试按类获取内容时不起作用。请告诉我如何解决我的解决方案？

manifest.json

{
  "manifest_version": 2,

  "name": "Scrap",
  "description": "Scrap",
  "version": "1.0",
  "author": "",

  "background": {
    "scripts": ["popup.js"],
    "persistent": true
  },

  "permissions": [
    "tabs",
    "http://*/",
    "https://*/"
  ],
  "browser_action": {
    "default_icon": "logo.png",
    "default_popup": "popup.html"
  }
}

popup.js

  window.addEventListener('load', function (evt) {
        chrome.extension.getBackgroundPage().chrome.tabs.executeScript(null, {
            file: 'payload.js'
        });;
    });


    chrome.runtime.onMessage.addListener(function (message) {
        document.getElementById('json-content').innerHTML = message;
    });

popup.html

<!doctype html>
<html>

<head>
    <title>Scrap</title>
    <script src="popup.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
        .container {
            min-width: 500px;
            padding: 1rem 1.5rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">JSON</label>
                <textarea class="form-control" id="json-content" rows="3"></textarea>
            </div>

        </form>
    </div>
</body>

</html>

payload.js

chrome.runtime.sendMessage(document.getElementsByClassName("something"));

抓取页面

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Scrap</title>
    <script src="popup.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
        .container {
            min-width: 500px;
            padding: 1rem 1.5rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Test</h1>
<p class="something">Text</p>
    </div>
</body>
</html>

【问题讨论】：

Messaging 只能传输简单类型，不能传输 DOM 元素。首先提取文本并将其作为字符串数组或单个字符串发送。

标签： javascript google-chrome-extension

【解决方案1】：

在您的 payload.js 中，您获取的不是类的文本，而是该类的元素，因此它表明它是一个对象。此外，getElementsByClassName 会返回多个您需要扔掉的结果。

我会在我的 payload.js 文件中做这样的事情：

var result = "";
var somethings = document.getElementsByClassName("something");
for (var i = 0; i < somethings.length; i++) {
   result += somethings[i].textContent;
}
chrome.runtime.sendMessage(result);

请注意，这将返回具有该类的元素内的所有文本。

【讨论】：