Javascript 仅在重新加载/刷新时加载内容脚本

这是我第一次创建Google Chrome扩展，在点击YouTube上的建议视频或任何视频时，我找不到可靠的方法让内容脚本运行一次。我已经尝试将“all_frames”设置为true，但这会多次调用脚本。在浏览YouTube视频时，有没有一种简单的方法可以让每个视频只运行一次内容脚本

PS：我用YouTube作为我的主要例子，但这个问题在其他网站上也存在。是什么原因造成的？我如何修复

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

---

问题是Youtube会动态更新页面，因此页面内容更改后，内容脚本不会一直运行。 您需要检测页面url是否已更改

检测内容更改有两种方法

解决方案

使用事件检测内容是否已更改

您需要在manifest.json中设置webNavigation的权限：

"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 //你的内容是什么

在您的内容脚本中

MutationObserver接口提供监视DOM树更改的功能

// 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();

---

问题是Youtube会动态更新页面，因此页面内容更改后，内容脚本不会一直运行。 您需要检测页面url是否已更改

检测内容更改有两种方法

解决方案

使用事件检测内容是否已更改

您需要在manifest.json中设置webNavigation的权限：

"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 //你的内容是什么

在您的内容脚本中

MutationObserver接口提供监视DOM树更改的功能

// 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();

---

Youtube是一个AJAX驱动的网站，可以在导航时动态更新页面。See和Youtube是一个AJAX驱动的站点，可以在导航中动态更新页面。看到和