Content script only loading on reload/refresh

Question

This is my first time creating a Google Chrome Extension, and i can't find a way to reliably get the content script to run once when clicking a suggested video, or any video for that matter, on YouTube. I've tried setting "all_frames" to true, but that calls the script to many times. Is there a simple way to run a content script only once per video when browsing YouTube videos?

PS: I'm using YouTube as my main example but this issue exists on other websites. what causes it and how can I fix it?

{//manifest.json
  "name": "Test",
  "version": "0.0.1",
  "content_scripts": [{
      "matches": ["<all_urls>"],
      "js": ["run.js"],
    }],
  "permissions": ["activeTab"],
  "manifest_version": 3
}

-

//run.js
console.log('running');

Youtube is an AJAX-driven site that updates the page dynamically on navigation. See Is there a JavaScript/jQuery DOM change listener? and How to detect page navigation on Youtube and modify HTML before page is rendered? — woxxom
– woxxom, Commented Apr 5, 2018 at 5:53

Max Sherbakov · Accepted Answer · 2018-06-25 14:22:37Z

8

The problem is that Youtube updates the page dynamically, so the content script wasn't always being run after page content is changed. You need to detect if page url has been changed.

There is two ways for detect content changing.

Solution

Use chrome.webNavigation.onHistoryStateUpdated event to detect that the content is changed.

You need to set permissions for webNavigation in manifest.json:

"permissions": [
    *"tabs", "webNavigation"*
  ]

background.js

    chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
//Send message to content Script -> Page was changed
//or execute parser from here 
// chrome.tabs.executeScript
});

content.js // do pars your content

Use Mutation Observers: at your content script.

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            // do something with content 
        }
        else if (mutation.type == 'subtree') {
           // do something with content 
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

edited Jun 25, 2018 at 14:22

answered Jun 25, 2018 at 14:15

Max Sherbakov

1,97517 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AlwaysLearning Over a year ago

If the content script is not running, how can any of this help?

Mehul Aug 22 at 9:40

@AlwaysLearning my understanding is that the content script did run on the first injection, but later could not adapt to changes in the interface. hence, a mutation observer would watch for changes and trigger any relevant function.

Collectives™ on Stack Overflow

Content script only loading on reload/refresh

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related