无法使用JavaScript(Chrome扩展程序)获取Youtube插件

hxzsmxv2 于 11个月前发布在 Go

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

我试图学习如何创建Chrome扩展。创建一个简单的扩展，控制台记录当前YouTube视频的标题
这是YouTube标题的HTML

<div id="title" class="style-scope ytd-watch-metadata">
    <ytd-badge-supported-renderer class="style-scope ytd-watch-metadata" disable-upgrade="" hidden="">
    </ytd-badge-supported-renderer>
    <h1 class="style-scope ytd-watch-metadata">
      <yt-formatted-string force-default-style="" class="style-scope ytd-watch-metadata">Elon’s "based" Grok AI has entered the chat…</yt-formatted-string>
    </h1>
    <ytd-badge-supported-renderer class="style-scope ytd-watch-metadata" disable-upgrade="" hidden="">
    </ytd-badge-supported-renderer>
  </div>

字符串
这是我写的获取标题的代码。这段代码在ContentScript中。

(()=>{
    console.log(document.getElementById("title"));
    console.log(document.querySelector("#title > h1 > yt-formatted-string"));
})();

型
第一行给出输出

<div id="title" class="style-scope ytd-watch-metadata">

型
但是第二行输出

null

型
我已经检查过了，当在Chrome控制台中输入时，第二行给出了正确的输出。当我尝试使用JavaScript时，它不起作用。
这是我的清单. json

{
    "manifest_version": 3,
    "name": "FillModule",
    "description": "Fill test 001",
    "version": "1.0.0",
    "permissions": ["storage", "tabs"],
    "author":"Aniket Vishwakarma",
    "action": {
        "default_icon": "assets/doggy.png",
        "default_title": "Fill",
        "default_popup": "popup/popup.html"
    },
    "background" : {
        "service_worker": "background/background.js"
    },
    "content_scripts": [
        {
          "matches": ["https://*.youtube.com/*"],
          "js": ["content/content.js"]
        }
    ]
}

型

我的尝试

我试着把它 Package 在一个“DOMContentLoaded”像这样

document.addEventListener("DOMContentLoaded", () => {
    console.log(document.querySelector("#title > h1 > yt-formatted-string"));
    console.log(document.getElementById("title"));
});

型
但是没有一行执行。
我在StackOverflow上找到了一个解决方案来解释为什么“DOMContentLoaded”不起作用。

if (document.readyState !== 'loading') init();
else document.addEventListener('DOMContentLoaded', init);

function init() {
    console.log(document.getElementById("title"));
    console.log(document.querySelector("#title > h1 > yt-formatted-string"));
}

型
但结果还是一样

<div id="title" class="style-scope ytd-watch-metadata">
null

型
有人能解释一下这里发生了什么以及如何解决这个问题吗？

google-chrome

来源：https://stackoverflow.com/questions/77640199/unable-to-fetch-the-youtube-username-using-javascript-chrome-extension

1条答案

按热度按时间

nszi6y051#

最有可能的是，标题是在初始页面加载后使用JavaScript加载的。
您可以做的是等待选择器变为可用。

function waitForSelector(selector) {
  return new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver((mutations) => {
      if (document.querySelector(selector)) {
        resolve(document.querySelector(selector));
        observer.disconnect();
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
}

waitForSelector("#title > h1 > yt-formatted-string").then((el) => console.log(el));

字符串

赞(0）回复(0）举报 11个月前

我来回答

无法使用JavaScript(Chrome扩展程序)获取Youtube插件

1条答案

相关问题

热门标签

最新问答