Chrome 扩展：使用内容脚本修改网页上的现有脚本？答案

【问题标题】：Chrome Extensions: Use a content script to modify existing scripts on a web page?Chrome 扩展：使用内容脚本修改网页上的现有脚本？
【发布时间】：2020-06-13 16:17:19
【问题描述】：

我正在创建一个 chrome 扩展程序，它需要连接到我的目标网页上已经存在的另一个脚本。为简单起见，我试图在页面上找到以下现有脚本元素并向其添加 console.log()。

<script type="text/javascript">
    var viewModel = new ScenePlayViewModel('', 'Ace', false);
    viewModel
        .load('jgWJJ2qsxx')
        .then(function () {
            sceneDOM = new SceneEditDOM2(viewModel.scene());
            sceneDOM.init();
            viewModel.isSubmitViaShareUrl(false);
            viewModel.isSubmitViaUnityPackage(false);
            console.log("HOOK INJECTED"); <--------------------------------------------- line to add
        });

</script>

我尝试了多种解决方案，但似乎都没有奏效。例如，我尝试使用内容脚本来查找脚本并替换文本，但它似乎运行的是更改前脚本而不是我修改后的代码。

// replaces javascript on website, but doesn't run new version

var scriptLoadScene = $("script:contains('new ScenePlayViewModel')"); // find the script
scriptLoadScene.text("console.log('Hello World')"); // change the text

我该怎么办？基本上，我只是想在网页中更改/添加脚本以添加更多功能。

【问题讨论】：

标签： javascript jquery google-chrome hook inject

【解决方案1】：

这并不能完全回答您的问题，但希望能帮助您找到解决方案。

首先 - 希望比我有更多知识的人会证实或诋毁这一点 - 据我了解，脚本代码仅在页面加载时运行一次，除非由某些事件触发。由于 Chrome 扩展是在页面加载后触发的，因此该脚本已经运行，之后插入的任何内容都不会运行，除非触发。

我想你总是可以在编辑后再次调用该函数，但我没有知识或经验来预测接下来会发生什么。

根据我的经验，我刚刚添加了我自己的 '' 标签和我想要运行的代码，方法是将它们写入 DOM，或者写入 '' 或 '' 元素。

祝你好运。 -布伦特

【讨论】：

感谢您的帮助。我最终使用了一种稍微不同的方法来完成我想做的事情。我没有修改脚本并注入一个钩子，而是添加了一个单独的脚本，等待“typeof sceneDOM ~== 'undefined'”然后运行我的代码。效果很好。
感谢您让我知道您做了什么。我很想听听你的效果如何。