内容脚本模式补丁混淆答案

【问题标题】：Content Script pattern patch confusion内容脚本模式补丁混淆
【发布时间】：2015-08-25 14:48:22
【问题描述】：

我正在尝试编写我的第一个 chrome 扩展程序，但无法正确加载内容脚本。我希望它只加载到 You Tube 的主页（即https://www.youtube.com/）；但是，我不希望它为任何其他页面加载，例如，在用户搜索之后（即https://www.youtube.com/results?search_query=programming）。这是我所拥有的：

"content_scripts": [
{
  "matches": ["*://*.youtube.com/*"], 
  "exclude_matches": ["*://*.youtube.com/"],
  "js": ["jquery.js", "content.js"]
}

]

使用上面的代码，content.js 根本不加载；但是，如果我取出“exclude_matches”，内容脚本会加载到https://www.youtube.com/。

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

目前，您的清单包括所有 youtube 页面除了主页。

以下内容将仅包括主页：

"content_scripts": [
    {
        "matches": ["*://www.youtube.com/"],
        "js": ["jquery.js", "content.js"]
    }
]

但是 Youtube 使用历史 API 导航，这意味着如果用户先打开视频页面，然后导航到主页，您的内容脚本将不会自动注入。您需要将chrome.webNavigation.onHistoryStateUpdated 事件处理程序与url filters 一起使用：

chrome.webNavigation.onHistoryStateUpdated.addListener(
    function(details) {
        var tabId = details.tabId;
        chrome.tabs.executeScript(tabId, {file: "jquery.js", runAt: "document_start"}, function() {
            chrome.tabs.executeScript(tabId, {file: "content.js", runAt: "document_start"});
        });
    },
    {
        url: [
            {urlEquals: "https://www.youtube.com/"}
        ]
    }
);

当用户从主页导航时，您可能需要一个处理程序来消除内容脚本的影响。这可以在内容脚本中实现为pagehide 侦听器或使用（另一个）onHistoryStateUpdated 侦听器。

或者，您可以将脚本放在所有 youtube 上，然后检查当前 url 是否是内容脚本中的主页。如果使用 onHistoryStateUpdated 的脚本注入发生得太晚，并且您看到导航和随后应用内容脚本之间存在延迟，这可能会很有用。

【讨论】：