注入React网站的Chrome扩展

我正在尝试使用chrome扩展向网站注入一些代码。该网站是一个反应应用程序,并有一个特定的div,我的目标。

在我的内容脚本中,我做了一个简单的检查,然后在页面上注入内容。我已经在服务器渲染页面上尝试过了,但是在react应用程序上我无法使用它。

const viewport = document.querySelector('.extension-button');
const app = document.createElement('div');
app.id = 'inject';
viewport.insertAdjacentElement('beforeend', app);

我分机里的代码如上。如果我在开始时注销文档,我可以看到完整的html代码,包括带有类“extension button”的div。

但我遇到的问题是,viewport是空的。 如果我在网站的控制台中键入上面的代码,它就会注销div。

有人知道怎么回事吗?