Chrome 扩展获取 element.data

Question

我有问题，因为我无法获取 element.data。当我尝试在扩展中使用它时，它总是未定义，但是当我将相同的代码粘贴到 youtube 上的控制台（开发人员模式）时它的工作，在清单版本 2 中，我将此代码注入到内容脚本中，但在版本 3 中这是不可能的。

第一：console.log(el) =>作品 第二：console.log(el.data) =>未定义

清单版本 3 服务工作者

function injectFc() {
  document.querySelectorAll('yt-live-chat-text-message-renderer:not([profile-link])').forEach(el => {
    console.log(el)
    console.log(el.data)
  })
}

setInterval(() => {
   let queryOptions = { active: true, currentWindow: true };
  chrome.tabs.query(queryOptions, (tb) => {
    var actTid = tb[0]
    chrome.scripting.executeScript(
    {
      target: {tabId: actTid.id, allFrames: true},
      func: injectFc,
    },
    () => {
        console.log(123);
    };
   });
}, 20000);

Answer 1

在 Chrome 扩展清单 v3 中，您仍然使用内容脚本。内容脚本允许您将其设置为特定域，例如www.youtube.com< /em>.请检查您使用的匹配项是否正确。

manifest.json

{
  "name": "Inject Code",
  "action": {},
  "manifest_version": 3,
  "version": "0.1",
  "description": "Inject the code from content script",
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "js": ["main.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "permissions": ["activeTab"],
  "host_permissions": ["https://www.youtube.com"]
}

ma​​in.js

console.log("start the script");

function injectFc() {
  console.log("run injectFc");
  document.querySelectorAll('yt-live-chat-text-message-renderer:not([profile-link])').forEach(el => {
    console.log(el);
    console.log(JSON.stringify(el.data));
  })
}

window.setInterval(function () { injectFc(); }, 20000);

要收集直播消息，请检查官方直播 API。