javascript - Chrome 扩展 list V3 如何读取我的用户正在查看的网页的 HTML 和文本内容

Question

我正在尝试学习如何制作 chrome 扩展，并且一直在尝试使用新的 manifest v3 进行学习，因为我的理解是这将成为 future 的常态。很多文档都非常残酷，而且似乎落后了。
我正在寻找一个简单的扩展来查找网站上的特定关键字。我想在用户访问网站时找到与特定 html id 匹配的文本。
目前，我的后台脚本调用一个单独的内容脚本来发现用户导航到的网站何时与我想要搜索的网站匹配。如果我到达适当的网站，则会调用另一个内容脚本来搜索该网站。
这是我的后台脚本中的相关代码:

if (onSite){
  scrapeSite(onSite);
}

onSite 只有在填充了我要访问的网站的 url 时才真正/活跃。
scrapeSite 的相关代码是

function scrapeSite{
   try {
    book = document.getElementById("bookTitle");
    if (book){
     console.log(`${book}`);
     }
    }
    catch(err) {
      console.log(`No Book Title Found`);
      console.log(`${book}`);
     }
    }
}

如果我删除了 catch(err)，那么控制台日志会输出以下错误处理响应:ReferenceError: document is not defined at scrapeSite
我真的只是想在这里学习，所以如果你有任何关于更好的文档、推荐的 stackoverflow 问题等的建议，我将不胜感激。另外，如果你一直在学习 manifest v3 并且有关于好的文档/教程的建议，那就太好了。

Answer 1

您需要做的是将内容脚本添加到 list 文件中，如下所示:

"content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content_script.js"]
        }
    ],

将“ ”替换为要在其中注入(inject)内容脚本的站点的 URL。
根本不需要后台脚本，如果 URL 匹配 URL 匹配模式，内容脚本会自动注入(inject)。
更多信息，请阅读 this page .