CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensioncontent-scriptbrowser-extension
DarkMental
DarkMental

Reputation: 512

Chrome Extension: Run Content Script before any Embedded Scripts run on Page

I'm trying to change some behavior of the YouTube player, by changing some variables inside of the player_api script that is embedded into the html watch page of videos.

The embedded script i'm trying to modify

Problem is, whatever i try, the embedded script of the player always runs before my extension adds modifications to it. Thus keeping the behavior of the player the same.

I tried setting the run_at property in my manifest to document-start, but then the script didn't run at all.

What can i do to halt the execution of that script until i make changes to it?

PS: I tried changing the script by intercepting the html call and editing the body with Charles Proxy and the behavior of the player changed as i wanted. So it know it should work, if done at the right time.

.

manifest.json

{
    "manifest_version": 2,
    "name": "YouFit For YouTube",
    "version": "1",
    "content_scripts": [{
        "js": ["content.js"],
        "matches": ["https://*.youtube.com/watch?*",
        "https://*.youtube.com/watch?*"],
    }],
    "browser_action": {
        "default_icon": "icon.png"
    }
}

content.js

function changeBehavior() {
    var scriptElements = document.getElementsByTagName('script');
    for (var i = 14; i < scriptElements.length; i++) {
        var curScriptBody = scriptElements[i].outerHTML;
        // Find the script i'm interested in
        if (curScriptBody.indexOf("var ytplayer") != -1) {
            scriptElements[i].outerHTML = scriptElements[i].outerHTML.replace("<text>", "<replacement text>");
            alert("Replaced");
            break;
        }
    }
}
changeBehavior();

Upvotes: 9

Views: 4236

Answers (2)

Josh Bruflodt
Josh Bruflodt

Reputation: 11

Add "run_at": "document_start" to the manifest file for the content script then modify your content script such that changeBehavior is called after the current call stack is exhausted using setTimeout(fn, 0). It will run just after the HTML document is rendered but before any embedded scripts.

This solution also avoids potential issues with running unsafe inline scripts when the content security policy is set.

Content.js
function changeBehavior() {
    ...
}

setTimeout(() => {
    changeBehavior();
}, 0);

Upvotes: 1

Chris Cinelli
Chris Cinelli

Reputation: 4829

Did you try something like this?

content.js

var script = document.createElement('script');
script.textContent = "/* What you have in content.js right now */";
(document.head||document.documentElement).prepend(script);

Upvotes: 5

Related Questions