Javascript 在Chrome扩展中，内容与脚本匹配被忽略

我是javascript新手，正在尝试学习Chrome扩展。我已经搜索了我能想到的每一个问题的变体，但我找到的答案并不适用于我的具体问题。我已经阅读了chrome扩展的教程，我认为应该有效的东西实际上并不有效

我编写的扩展没有html页面，只有一个图标，因为它应该一直运行。它实际上工作得很好，阻止对某个聊天程序的调用以阻止聊天窗口打开。它是为那些必须在一个站点上呆很长时间并且不想一直关闭聊天窗口的测试人员编写的

问题是，扩展适用于所有网站，我只希望它适用于一个网站。也就是说，当用户在使用相同聊天软件的其他网站上时，聊天窗口也会被阻止

我读到的内容让我相信，如果在manifest.json的content_scripts块中匹配我想要使用的网站，那么扩展只会在匹配的网站中运行。它不起作用。事实上，如果我将content_脚本块完全从清单文件中取出，则扩展名的工作原理完全相同。调用javascript函数并阻止聊天窗口。因此，出于某种原因，content_scripts块被忽略。作为一个JavaScriptNoob，我想我一定错过了一个关键的步骤。我从示例中获得了大部分代码，并对其进行了轻微修改。有人能帮忙吗

manifest.json：

    {
  "manifest_version": 2,
    "version": "1.0",
  "name": "ChatBlock",
  "description": "Shut down liveperson chat on mywebsite.com before it runs.",

  "permissions": [          
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "*://sales.liveperson.net/"
   ],
   "web_accessible_resources": ["jquery-1.10.2.min.js"],
   "content_scripts": [
    {
      "matches": ["*://*.mywebsite.com/*"],
      "js": ["jquery-1.10.2.min.js"]
    }
   ],
   "browser_action": {
    "default_icon": "chatblockIcon.png"
   },
   "background": {
    "scripts": ["avoid.js"]
   }

  }

{
  "manifest_version": 2,
    "version": "1.0",
  "name": "ChatBlock",
  "description": "Shut down liveperson chat on myWebsite.com before it runs.",

  "permissions": [          
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "*://sales.liveperson.net/"
   ],
   "content_scripts": [
    {
      "matches": ["*://*.myWebsite.com/*"],
      "js": ["avoid.js"]
    }
   ],
   "browser_action": {
    "default_icon": "chatblockIcon.png"
   },
   "background": {
    "scripts": ["avoid.js"]
   }

  }

javascript文件（avoid.js）：

编辑：我已经从清单中删除了对jquery的引用。该工具在没有它的情况下仍然可以正常工作，所以下面的评论是正确的，不需要它-谢谢@ExpertSystem。但是，所有网站上仍然存在这种屏蔽。我之前（在发布这个问题之前）尝试过@ExpertSystem的第二个建议，即明确检查所需网站的选项卡，或检查推荐人，但我无法找到正确的javascript语法使其工作。另外，如果可能的话，我对使用“matches”属性非常感兴趣，这样javascript就更通用了。我仍然不明白为什么“matches”不起作用——关于matches属性，我做错了什么

Manifest.json的新版本：

    {
  "manifest_version": 2,
    "version": "1.0",
  "name": "ChatBlock",
  "description": "Shut down liveperson chat on mywebsite.com before it runs.",

  "permissions": [          
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "*://sales.liveperson.net/"
   ],
   "web_accessible_resources": ["jquery-1.10.2.min.js"],
   "content_scripts": [
    {
      "matches": ["*://*.mywebsite.com/*"],
      "js": ["jquery-1.10.2.min.js"]
    }
   ],
   "browser_action": {
    "default_icon": "chatblockIcon.png"
   },
   "background": {
    "scripts": ["avoid.js"]
   }

  }

{
  "manifest_version": 2,
    "version": "1.0",
  "name": "ChatBlock",
  "description": "Shut down liveperson chat on myWebsite.com before it runs.",

  "permissions": [          
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "*://sales.liveperson.net/"
   ],
   "content_scripts": [
    {
      "matches": ["*://*.myWebsite.com/*"],
      "js": ["avoid.js"]
    }
   ],
   "browser_action": {
    "default_icon": "chatblockIcon.png"
   },
   "background": {
    "scripts": ["avoid.js"]
   }

  }

---

您正在将jquery作为内容脚本注入，但就其本身而言，它是无用的。此外，您正在后台页面中侦听对

liveperson.com

的Web请求，并取消每个站点的请求

您必须设置一种方法来区分来自

mywebsite.com

的请求，并仅阻止它们。（我也不认为有任何理由注入jquery。）

区分请求的可能方法可能是：

通过

details.requestHeaders

中的标题（如果

mywebsite.com

设置了这样一个合适的标题，例如

referer

）

跟踪后台页面中运行的

mywebsite.com

打开的选项卡（通过

chrome.tabs.onUpdate

listener），并根据

details.tabId

过滤Web请求

…但我相信还有很多

---

上面第二个选项的演示实现

manifest.json:

...
"background": {
    // Unfortunately, chrome.webRequest 
    // requires a persistent background page
    "persistent": true,
    "scripts": [
        "background.js"
    ]
},

"content_scripts": [
    {
        "matches": [
            "*://<website1>/*",
            "*://<website2>/*",
            ...
        ],
        "js":         ["content.js"],
        "run_at":     "document_idle",
        "all_frames": false
    }
 ],

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://sales.liveperson.net/*"
]

chrome.runtime.sendMessage({ text: "block_me" });

// Add a tab ID to the blocking list
function addToList(tabId) {
    localStorage.setItem(tabId, "1");
    console.log("Added to list: tab " + tabId);
    console.log("Currently blocking tabs: ", localStorage);
}

// Checks if a tab ID is in the blocking list
function isInList(tabId) {
    return (localStorage.getItem(tabId) !== null);
}

// Remove a tab ID from the blocking list
function removeFromList(tabId) {
    localStorage.removeItem(tabId);
    console.log("Removed from list: tab " + tabId);
    console.log("Currently blocking: ", localStorage);
}

// Listen for messages from content scripts
chrome.runtime.onMessage.addListener(function(msg, sender) {
    if (msg.text && (msg.text == "block_me")) {
        addToList(sender.tab.id);
    }
});

// Stop blocking a tab when its is closed
chrome.tabs.onRemoved.addListener(removeFromList);

// Stop blocking a tab when its is updated
// (If applicable, the newly injected content script will notify us.)
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
    if (info.status && (info.status == "loading")) {
        removeFromList(tabId);
    }
});


// Handle a web-request, i.e. either allow it or block it
function handleRequest(details) {
    var block = isInList(details.tabId);
    console.log("Request from tab " + details.tabId + " - Blocked: " + block);
    console.log("Request details: ", details);
    return { cancel: block };
}

// Block any request to 'sales.liveperson.net',
// if it originates from a tab in our blocking list.
chrome.webRequest.onBeforeRequest.addListener(
        handleRequest,
        { urls: ["*://sales.liveperson.net/*"] },
        ["blocking"]);

background.js:

...
"background": {
    // Unfortunately, chrome.webRequest 
    // requires a persistent background page
    "persistent": true,
    "scripts": [
        "background.js"
    ]
},

"content_scripts": [
    {
        "matches": [
            "*://<website1>/*",
            "*://<website2>/*",
            ...
        ],
        "js":         ["content.js"],
        "run_at":     "document_idle",
        "all_frames": false
    }
 ],

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://sales.liveperson.net/*"
]

chrome.runtime.sendMessage({ text: "block_me" });

// Add a tab ID to the blocking list
function addToList(tabId) {
    localStorage.setItem(tabId, "1");
    console.log("Added to list: tab " + tabId);
    console.log("Currently blocking tabs: ", localStorage);
}

// Checks if a tab ID is in the blocking list
function isInList(tabId) {
    return (localStorage.getItem(tabId) !== null);
}

// Remove a tab ID from the blocking list
function removeFromList(tabId) {
    localStorage.removeItem(tabId);
    console.log("Removed from list: tab " + tabId);
    console.log("Currently blocking: ", localStorage);
}

// Listen for messages from content scripts
chrome.runtime.onMessage.addListener(function(msg, sender) {
    if (msg.text && (msg.text == "block_me")) {
        addToList(sender.tab.id);
    }
});

// Stop blocking a tab when its is closed
chrome.tabs.onRemoved.addListener(removeFromList);

// Stop blocking a tab when its is updated
// (If applicable, the newly injected content script will notify us.)
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
    if (info.status && (info.status == "loading")) {
        removeFromList(tabId);
    }
});


// Handle a web-request, i.e. either allow it or block it
function handleRequest(details) {
    var block = isInList(details.tabId);
    console.log("Request from tab " + details.tabId + " - Blocked: " + block);
    console.log("Request details: ", details);
    return { cancel: block };
}

// Block any request to 'sales.liveperson.net',
// if it originates from a tab in our blocking list.
chrome.webRequest.onBeforeRequest.addListener(
        handleRequest,
        { urls: ["*://sales.liveperson.net/*"] },
        ["blocking"]);

---

（对于生产部署，您可以删除

控制台.log

调用。）

谢谢@ExpertSystem的评论。根据您的建议，我删除了manifest.json中的jquery，正如您在我使用的小javascript片段中所说的那样。见我的编辑上面。我仍然有兴趣理解为什么content_scripts块中的“matches”属性不起作用。我是否使用不正确？您的“matches”属性确实有效，但将

avoid.js

作为内容脚本注入不会产生任何效果，因为

chrome.webRequest

对内容脚本不可用。后台页面中的

avoid.js

确实有效，但它无法区分请求的来源，因此它们会阻止从所有选项卡发送到liveperson.com的请求。（顺便说一句，运行与内容脚本和背景页面相同的脚本是个坏主意。）另请参见我的更新答案。它在@ExpertSystem中运行得非常好。非常感谢你的帮助（我可以补充一点，这超出了职责范围）。