javascript - 仅在站点的子目录中加载内容脚本

Question

如何仅在网站的子目录上加载 Chrome 内容脚本。例如:

在: https://www.example.com/#!/video/*
不在: https://www.example.com/

所以我不想在主页上加载，而是在视频目录中加载。我已经尝试过这样的匹配模式，但它不起作用。

"匹配": ["*://*.example.com/*", "*://*.example.com/#!/video/*"]

我的网址如下所示:www.example.com/#!/video/random_numbers/some-random-string

PS: 我还想在页面发出每个 ajax 请求后再次加载脚本。

Answer 1

问题是 "matches" 不支持 URL 片段(URL 哈希)，并且无法使用 "content_scripts" 部分进行自动注入(inject)/自动删除基于哈希更改的脚本，因为页面实际上并未重新加载。

从manifest.json中删除整个“content_scripts”部分并使用webNavigation API仅在需要时注入(inject)/激活内容脚本(需要“权限:[“webNavigation”])。

• 背景.js:

  chrome.webNavigation.onCommitted.addListener(function(details) {
      injectOrActivate("onCommitted", details);
  });
  chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
      injectOrActivate("onHashChange", details);
  });
  
  function injectOrActivate(event, details) {
      var tabId = details.tabId;
  
      if (details.url.indexOf("#") < 0) {
          deactivateContentScript(tabId);
          return;
      }
  
      chrome.tabs.executeScript(tabId, {code: "injectedStatus"}, function(res) {
          if (res[0] != "injected") {
              chrome.tabs.executeScript(tabId, {file: "content.js"}, function(res) {
                 activateContentScript(tabId);
              });
          } else {
              activateContentScript(tabId);
          }
      }
  }
  
  function activateContentScript(tabId) {
      chrome.tabs.sendMessage(tabId, {action: "activate"});
  }
  
  function deactivateContentScript(tabId) {
      chrome.tabs.sendMessage(tabId, {action: "deactivate"});
  }
  

• content.js:

  var injectedStatus = "injected";
  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
      switch (msg.action) {
          case "activate":
              doSomething();
              break;
          case "deactivate":
              stopDoingSomething();
              break;
      }
  });