Question

我正在尝试创建一个chrome扩展程序，在我测试特定网站时会通知我主机/域更改。通常会出现指向开发者或实时环境的链接，如果我按照这些链接中的一个链接，我会发出警告，因为网站通常是相同的。

为了清晰起见编辑：当链接将我带离http（s）：// example.staging.something.com并最终在实时网站http（s）：// www时，我希望它提醒我。 example.com或开发站点http（s）：//example.dev.something.com

到目前为止，我已经设法创建了一个脚本，用于识别我何时在暂存网址（我们的测试环境）上，但是当我导航到一个没有网址的网址时，我无法撤消此逻辑以向我发出警告包含'staging'。

我的manifest.json

{
"manifest_version": 2,

"name": "A What URL",
"description": "This extension monitors and warns you of domain changes",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},

"background": { "scripts": ["background.js"],
"persistent": false
},

"permissions": [
"activeTab",
"webNavigation"
]
}

我的background.js

   chrome.webNavigation.onCommitted.addListener(function(e) {
        alert ("you are still on staging!");
  }, {url: [{hostContains: 'staging'}]});

我确信这很简单，但看起来我的大脑更简单了！

Answer 1

有多种方法可以解决您的问题。

使用chrome.webRequest.onBeforeSendHeaders（或.onSendHeaders）事件在向您的生产网站发送请求时收到通知，并检查Referer标头是否设置为您的分段现场。这仅适用于设置了文档引荐来源的情况（如果您从https导航到http，或者如果设置了“noreferrer”referrer policy，情况就不会这样了。）
如果没有引用，请使用webNavigation，webRequest和/或tabs API来跟踪网页的导航状态，并在需要时执行任何操作你检测到过渡生产 - ＆gt;开发发生。正确实施这一点非常困难。

以下是第一种方法的示例：

// background.js
chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
    var referer;
    for (var i = 0; i < details.requestHeaders.length; ++i) {
        var header = details.requestHeaders[i];
        if (header.name.toLowerCase() === 'referer' && header.value) {
            referer = header.value;
            break;
        }
    }
    if (referer && /^https?:\/\/dev\.example\.com(\/|$)/.test(referer)) {
        alert('Navigated from dev to production!');
    }
}, {
    urls: ['*://production.example.com/*', '*://prod.example.com/*'],
    types: ['main_frame', 'sub_frame'] // Track navigations, not img/css/etc.
}, ['requestHeaders']);

用于测试前一逻辑的manifest.json示例：

{
    "name": "Detect nav from dev to prod",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "permissions": [
        "webRequest",
        "*://*/*"
    ]
}

Answer 2

不幸的是，你无法反转＆＃34;过滤器，因此您必须捕获所有事件并过滤代码。

以下是Chrome活动。您的代码建议您将它们视为DOM事件（使用e参数）。相反，它们会根据相关事件传递参数，有时会传递几个。

如果您查看the documentation，您会看到预期的回调格式为：

function(object details) {...};

details除其他外，还包含url属性。

所以你有：

chrome.webNavigation.onCommitted.addListener(function(details) {
  // Regexp matches first "//", followed by any number of non-/, followed by "staging"
  if(!details.url.match(/[^\/]*\/\/[^\/]*staging/)) {
    alert ("This is no longer staging!");
  }
});

请注意，这将非常烦人，除非您可以将其关闭 - 毕竟它几乎可以与任何页面匹配。

Answer 3

根据要求添加我的最终解决方案，以防其他任何人对未来感兴趣。

非常感谢Xan和Rob的帮助！如果我可以勾选我的意思，但最后我最终勾选了导致我实施的那个。

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {

    var queryInfo = {
    active: true,
    currentWindow: true
    };

   chrome.tabs.query(queryInfo, function(tabs) {
       var tab = tabs[0];
       var url = tab.url;

       if(!url.match(/[^\/]*\/\/[^\/]*staging/) &&   changeInfo.status=="complete"){
           alert ("WTF!!! " +url); 
       }
   });
});

chrome扩展更改主机/域警告

3 个答案: