Question

我想创建一个脚本并使用react作为游乐场。长话短说，该脚本将是一个独立的chrome扩展程序，将用于操作网站（那些也可以提供响应的网站）。

因此在react项目中，在public/index.html中，我这样：

    ....
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="./extension/main.js"></script>
  </body>
</html>

在main.js内，我想等待将数据加载到#root中的操作（确实如此），然后我要启动自己的代码

document.addEventListener("DOMContentLoaded", function() {
  if(window.localStorage.getItem('highlights')){
    makeSelection(JSON.parse(window.localStorage.getItem('highlights')))
  }
})

但这不起作用。

（不，我不能使用react钩子，这将完全独立于react，我只想确保它在react网站上运行时有效）

Answer 1

您可以开始超时，以检查#root是否具有空的innerHTML，以及是否未运行您的代码

Answer 2

我会这样：

首先，在extension/main.js文件中，我将所有代码包装在全局函数中，让我们在onAppDidMount上调用它

window.onAppDidMount = function(){
    ... // all main.js code here
}

在根组件中，安装根组件后，我将调用此全局函数

class App extends React.Component{

    componentDidMount(){
         window.onAppDidMount();
    }
    ...
}

反应加载后如何运行香草JavaScript？

2 个答案: