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

Question

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

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

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

我读到的内容让我相信，在 manifest.json 的 content_scripts block 中放入我想要使用的网站的匹配项将导致扩展程序仅在该匹配的网站中运行。这是行不通的。事实上，如果我将 content_scripts block 完全从 list 文件中取出，则扩展的工作原理完全相同。调用 JavaScript 函数并阻止聊天窗口。因此，由于某种原因，content_scripts block 被忽略。作为一个 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/"
   ],
   "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 语法以使其工作。另外，如果可能的话，我对使用“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/"
   ],
   "content_scripts": [
    {
      "matches": ["*://*.myWebsite.com/*"],
      "js": ["avoid.js"]
    }
   ],
   "browser_action": {
    "default_icon": "chatblockIcon.png"
   },
   "background": {
    "scripts": ["avoid.js"]
   }

  }

Answer 1

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

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

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

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

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

---

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

ma​​nifest.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" });

背景.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 调用。)