javascript - Chrome 扩展程序更改主机/域警告

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

我的背景.js

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

我确信这很简单，但看来我的大脑要简单得多!

Answer 1

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

• 使用chrome.webRequest.onBeforeSendHeaders (或 .onSendHeaders )事件，以便在请求发送到您的生产网站时收到通知，并检查 Referer header 是否设置为您的临时网站。仅当设置了文档引荐来源网址时，此操作才有效(如果您从 https 导航到 http，或者设置了“noreferrer”referrer policy，则不会出现这种情况)。

• 如果没有引用者，请使用 webNavigation , webRequest和/或tabs用于跟踪页面导航状态的 API，并在检测到发生生产 -> 开发转换时执行您想要的操作。正确实现这一点非常困难。

这是第一种方法的示例:

// 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",
        "*://*/*"
    ]
}