使用Chrome扩展从网页中提取文本内容的困难

noj0wjuj 于 2023-10-14 发布在 Go

关注(0)|答案(1)|浏览(187)

我正在构建我的第一个Chrome扩展程序，以便在弹出窗口中快速显示网页中的信息。
首先，我想从出现在HTML中的两个标签中取名称，如下所示：
<a href="/link-to-joe-bloggs-cv" class="name" role="heading">JOE BLOGGS</a>
我试图做的是从页面中提取“乔博客”，并显示在弹出窗口。
到目前为止，我有以下代码：

Popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Joe Bloggs CV</title>
</head>
<body>
  <div id="popup-content">Loading...</div>
  <script src="popup.js"></script>
</body>
</html>

Manifest.json

{
  "manifest_version": 3,
  "name": "Joe Bloggs CV",
  "version": "1.0",
  "description": "Displays CV name in the popup",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

Popup.js

// popup.js
document.addEventListener('DOMContentLoaded', function () {
  const popupContent = document.getElementById('popup-content');
  popupContent.textContent = 'Joe Bloggs';
});

这是可行的，但现在我想在不同的页面上动态更新popupContent.textContent，方法是在每个人的CV上使用.name类。
我尝试更新popup.js：

// popup.js
document.addEventListener('DOMContentLoaded', function () {
  const popupContent = document.getElementById('popup-content');
  popupContent.textContent = document.querySelector(".name").innerHTML;
});

然而，弹出窗口随后被卡在“正在加载...”上。
有人能给我指个方向吗？
谢谢你，谢谢！

google-chrome

来源：https://stackoverflow.com/questions/77288653/difficulty-extracting-text-content-from-webpage-using-chrome-extension

1条答案

按热度按时间

33qvvth11#

您需要创建一个Content script文件（https://developer.chrome.com/docs/extensions/mv3/content_scripts/），可以命名为content.js。此文件将被注入到您正在访问的网站的html中。请务必查看文档，了解如何在manifest.json中注册文件。
在Popup.js中的DOMContentLoaded处理函数中，您需要使用sendMessage函数向content.js发送一条消息，请求.name值。收到消息后，content.js将查找该值并将其发送回Popup.js

// popup.js
document.addEventListener('DOMContentLoaded', function () {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {message: "getName"}, function(response) {
        popupContent.textContent = response.name;
    });
});

// content.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    // listen for messages sent from background.js
    if (request.message == 'getName') {
      let name = document.getElementsByClassName('name')[0].innerText;
      sendResponse({name});
    }
});

赞(0）回复(0）举报 2023-10-14

我来回答

使用Chrome扩展从网页中提取文本内容的困难

1条答案

相关问题

热门标签

最新问答