将chrome webrequest的addeventlistener限制为当前选项卡或扩展的主窗口 [英] Restrict addeventlistener of chrome webrequest to the current tab or the main window of the extension

问题描述

我正在尝试修复Chrome现有扩展程序中的一些问题。该扩展应该改变作为其一部分的子帧的用户代理。现在的问题是，当事件发生时，我更改头的用户代理，它反映了浏览器中的所有选项卡，并强制其他安全登录在这些选项卡中注销。我想更改扩展的特定选项卡的用户代理。这里是我在background.js中使用的代码

I am trying to fix some issues in an existing extension of Chrome. The extension is supposed to change the user agent of the sub frame which is a part of it. Now the problem is that when the event happens and I change the user agent of the header it is reflecting on all the tabs in browser and forcing the rest of the secured logins in those tabs to log off. I want to change the user agent of only that particular tab of the extension. Here is the code I am using in background.js

var requestFilter = {
    urls: [
        "<all_urls>"
    ],
    types: ["main_frame", "sub_frame"]
};

chrome.tabs.query({
        'active': true,
        'windowId': chrome.windows.WINDOW_ID_CURRENT
    },
             
    function(tabs) {
        chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
            var headers = [];
            headers = details.requestHeaders;
            if (!localStorage['user-agent']) {


                return;
            }
            for (var i = 0; i < headers.length; i++) {
                if (headers[i].name != 'User-Agent') {
                    headers[i].name = 'User-Agent';
                    headers[i].value =

                        localStorage['user-agent'];
                }
            }
            return {
                requestHeaders: headers
            };
        }, requestFilter, ['requestHeaders', 'blocking']);
    });

function focusOrCreateTab(url) {
    chrome.windows.getAll({
        "populate": false
    }, function(windows) {
        var existing_tab = null;
        for (var i in windows) {
            var tabs = windows[i].tabs;
            for (var j in tabs) {
                var tab = tabs[j];
                if (tab.url == url) {


                    existing_tab = tab;
                    break;
                }
            }
        }
        if (existing_tab) {
            chrome.tabs.update(existing_tab.id, {
                "selected": true
            });
        } else {
            chrome.tabs.create({
                "url": url,
                "selected": true
            });
        }
    });
}

chrome.browserAction.onClicked.addListener(function(tab) {
    var manager_url = chrome.extension.getURL("youTube_tool.html");
    focusOrCreateTab(manager_url);
});

请帮助我。我一直坚持了两个星期： - （）

Kindly help me with this. I have been stuck for two weeks :-(

推荐答案

您的 chrome.tabs.query（{active：true，...}）调用直接发生在后台脚本被加载的时候（因此一次），这是不正确的，你的回调只会收到活动标签当扩展程序被加载时。

Your chrome.tabs.query({active:true, ...}) call happens directly whenever the background script is loaded (thus once). This is incorrect, your callback will only receive the active tab from when the extension is loaded.

要解决这个问题，只要你想要活动，就调用 chrome.tabs.query 标签。

对于您的特定情况，根本不需要： chrome.browserAction.onClicked 事件在单击时接收当前选项卡的 Tab 对象。对象，您可以使用 tab.id 获取标签的ID，并将该值分配给 requestFilter.tabId ，如下所示将事件监听器限制为临时t特定标签：

To fix this issue, call chrome.tabs.query whenever you want the active tab.
For your specific case, this is not needed at all: the chrome.browserAction.onClicked event receives a Tab object of the current tab when clicked. From the object, you can get the tab's ID using tab.id and assign this value to requestFilter.tabId, as done below to restrict the event listener to that specific tab:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
        // do whatever you want.
    }, {
        urls: [
            '*://*/*'
        ],
        types: ['main_frame', 'sub_frame'],
        tabId: tab.id
    }, ['requestHeaders', 'blocking']);
});

注意：如果您想要删除事件，必须将回调保存在一些全局变量。下面的例子展示了如何切换一个事件监听器来阻止当前选项卡中的所有文档请求。

Note: If you want to get the ability to remove the event, you have to save the callback in some global variable. The example below shows how to toggle an event listener that blocks all document requests in the current tab.

var listeners = {};
chrome.browserAction.onClicked.addListener(function(tab) {
    if (listeners[tab.id]) {
        // Callback was previously set. Remove the listeners.
        chrome.webRequest.onBeforeRequest.removeListener(listeners[tab.id]);
        delete listeners[tab.id];
        chrome.browserAction.setBadgeText({
            text: '',
            tabId: tab.id
        });
    } else {
        listeners[tab.id] = function(details) {
            return {cancel: true};
        };
        chrome.webRequest.onBeforeRequest.addListener(listeners[tab.id], {
            urls: ['*://*/*'],
            types: ['main_frame', 'sub_frame'],
            tabId: tab.id
        }, ['blocking']);
        // Show indicator to show that the extension is active.
        chrome.browserAction.setBadgeText({
            text: 'ON',
            tabId: tab.id
        });
    }
});

// Remove obsolete listener when the tab is closed.
chrome.tabs.onRemoved.addListener(function(tabId) {
    if (listeners[tabId]) {
        chrome.webRequest.onBeforeRequest.removeListener(listeners[tabId]);
        delete listeners[tabId];
    }
});

以下是一个用于测试以前代码（background.js）的最小manifest.json：

Here is a minimal manifest.json to test the previous code (background.js):

{
    "name": "Toggle requests for a specific tab",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },
    "browser_action": {
    },
    "permissions": [
        "webRequest",
        "webRequestBlocking",
        "*://*/*"
    ]
}

这篇关于将chrome webrequest的addeventlistener限制为当前选项卡或扩展的主窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！