javascript - 在 Chrome 扩展中，content_scripts 匹配被忽略

Question

我是 javascript 的新手，正在尝试学习 Chrome 扩展程序。我搜索了我能想到的问题的所有变体，但我找到的答案不适用于我的特定问题。我已经阅读了 chrome 扩展的教程，但我认为应该有效的方法实际上无效。

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

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

我读到的内容让我相信，在 manifest.json 的 content_scripts block 中匹配我想使用的网站会导致扩展仅在匹配的网站中运行。这是行不通的。事实上，如果我将 content_scripts block 完全从 list 文件中取出，扩展的工作方式完全相同。调用 javascript 函数并阻止聊天窗口。所以出于某种原因，content_scripts block 被忽略了。作为一个 javascript 菜鸟，我想我一定错过了关键的一步。我从示例中获得了大部分代码，并对其进行了一些修改。谁能帮忙？

list .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"]
   }

  }

javascript 文件(avoid.js):

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {   
    return {
        cancel: true
        }; 
  },
  {urls: ["*://sales.liveperson.net/*"]},
  ["blocking"]);

编辑:我已经从我的 list 中删除了对 jquery 的引用。该工具在没有它的情况下仍然可以正常工作，所以下面的评论是正确的，不需要它 - 感谢@ExpertSystem。但封锁仍然发生在所有网站上。我之前(在发布此问题之前)曾尝试过@ExpertSystem 的第二个建议，即明确检查所需网站的选项卡或检查引荐来源网址，但我无法找到正确的 javascript 语法来使其工作。另外，如果可能的话，我对使用“匹配”属性非常感兴趣，这样 javascript 就更通用了。我仍然对为什么“匹配”不起作用感到困惑 - 关于匹配属性，我做错了什么？

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/"
   ],
   "content_scripts": [
    {
      "matches": ["*://*.myWebsite.com/*"],
      "js": ["avoid.js"]
    }
   ],
   "browser_action": {
    "default_icon": "chatblockIcon.png"
   },
   "background": {
    "scripts": ["avoid.js"]
   }

  }

Answer 1

您正在注入(inject) jquery 作为您的内容脚本，但她自己是无用的。此外，您正在后台页面中监听对 liveperson.com 的网络请求，并为每个站点取消它们。

您必须设计一种方法来区分来自 mywebsite.com 的请求并仅阻止它们。 (我也没有看到任何注入(inject) jquery 的理由。)

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

1. 通过 details.requestHeaders 中的 header (如果 mywebsite.com 设置了这样一个合适的 header ，例如 referer)。
2. 跟踪在后台页面中运行 mywebsite.com 的打开选项卡(通过 chrome.tabs.onUpdated 监听器)并根据 详细信息过滤 webRequests .tabId.

...但我相信还有更多。

---

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

list .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/*"
]

content.js:

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

background.js:

// 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"]);

(对于生产部署，您可以删除 console.log 调用。)