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

Question

我正在学习如何制作Chrome扩展程序，并试图使用新的v3清单进行学习，因为我了解到它将成为未来的规范。但是，很多文档都很艰涩，看起来有点过时。

我想制作一个简单的扩展程序，可以在网站上查找特定的关键词。我希望能够在用户访问网站时查找与特定HTML ID匹配的文本。

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

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

if (onSite){
  scrapeSite(onSite);
}

当onSite已填充所需访问的网站的URL时，才会为true/激活状态。

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未定义在scrapeSite

我只是想在这里学习，所以会感激任何关于更好的文档、推荐的stackoverflow问题等建议。此外，如果你一直在学习Manifest V3，并且有关于好的文档/教程的建议，那就太好了。

- Warwick Logan

---

移除背景脚本并使用内容脚本。 - wOxxOm

@wOxxOm 我的理解是，这种方法是在后台脚本中实现内容脚本的函数。我应该以不同的方式调用内容脚本吗？目前，我将scrapeSite放在一个不同的js文件中，然后在background.js的顶部使用importScripts来允许我调用它。 - Warwick Logan

这里不需要后台脚本。使用在manifest.json中声明的内容脚本。另请参阅如何访问网页DOM而不是扩展页面DOM？ - wOxxOm

我想这可能彰显了我对内容脚本和后台脚本的更大误解。我仍然需要从后台脚本调用内容脚本，对吗？还是有其他方法？你会推荐哪种方法？感谢您的帮助！ - Warwick Logan

正如文档和我提供的答案所示，您可以简单地声明内容脚本，它会自动在匹配的网页中运行。 - wOxxOm

Answer 1

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

要做到这一点，您需要在清单文件中添加一个内容脚本：

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

将"<all_urls>"替换为您想要在其中注入内容脚本的网站的网址。

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

如需了解更多信息，请阅读此页面。

- Amit Levy