Question

我是javascript新手并尝试学习Chrome扩展程序。我已经搜索了我能想到的每个问题的变体，但我发现的答案对我的具体问题不起作用。我已经完成了Chrome扩展的教程，我认为应该工作的内容实际上并不起作用。

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

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

我读到的内容让我相信，将匹配到我想在manifest.json的content_scripts块中使用的网站会导致扩展只在该匹配的站点中运行。这是行不通的。实际上，如果我将content_scripts块完全从清单文件中取出，则扩展的工作方式完全相同。调用javascript函数并阻止聊天窗口。因此，出于某种原因，content_scripts块被忽略。作为一个javascript noob，我想我必须错过一个至关重要的步骤。我从示例中获得了大部分代码，并稍微修改了一下。有人可以帮忙吗？

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

编辑：我已从清单中删除了对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

你正在注入jquery作为你的内容脚本，但是她自己就没用了。另外，您正在后台页面中收听liveperson.com的webRequests，并为每个站点取消它们。

您必须设置一种方法来区分来自mywebsite.com的请求并仅阻止它们。（我也没有看到任何注入jquery的原因。）

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

通过details.requestHeaders中的标题（如果mywebsite.com设置了这样一个合适的标题，例如referer）。
跟踪在后台页面中运行mywebsite.com的打开标签（通过chrome.tabs.onUpdated侦听器）并根据details.tabId过滤webRequests。

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

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

<强>的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/*"
]

<强> 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来电。）

在Chrome扩展程序中，将忽略content_scripts匹配项

1 个答案: