Categories
Development

Chrome Extensions: Use a content script to modify existing scripts on a web page?

I’m creating a chrome extension that needs to hook into another script that already exists on my target web page. For simplicity’s sake, I’m trying to find the following existing script element on a page and add a console.log() to it.

<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>

I’ve tried a number of solutions but none of them have seemed to work. For example, I’ve tried using a content script to find the script and replace the text, but it appears to run the pre-change script instead of my modified code.

// 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

What should I do? Basically, I’m just trying to change/add scripts to the web page to add more features.

Leave a Reply

Your email address will not be published. Required fields are marked *