Chrome 扩展清单 V3 如何读取用户正在查看的网页的 HTML 和文本内容

Question

我正在尝试学习如何制作 chrome 扩展，并一直在尝试使用新的清单 v3 进行学习，因为我的理解是它将成为未来的常态。但很多文档都相当残酷，而且似乎落后了。

我正在寻找一个简单的扩展来查找网站上的特定关键字。我想在用户访问网站时找到与特定 html id 匹配的文本。

目前，我的后台脚本调用单独的内容脚本来发现用户导航到的网站何时与我要搜索的网站相匹配。如果我到达适当的网站，则会调用另一个内容脚本来搜索该网站。

这是我的后台脚本中的相关代码：

if (onSite){
  scrapeSite(onSite);
}

onSite 仅当填充了我想要访问的网站的 url 时才是 true/active。

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 问题等的建议。另外，如果您一直在学习清单 v3 并有关于好的文档/教程的建议，那就太好了。

Answer 1

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

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

将“<all_urls>”替换为要在其中注入内容脚本的一个或多个网站的 URL。

根本不需要后台脚本，如果 URL 与 URL 匹配模式匹配，则会自动注入内容脚本。

欲了解更多信息，您应该阅读此页面。