Question

chrome.tabs.get显然在内容脚本中不起作用，除了通过chrome.extension.sendRequest发送之外我不知道如何让背景响应正确的标签。

如何让内容脚本将信息发送到后台页面，然后后台页面将信息返回到它来自的选项卡？

Answer 1

编辑：此答案已过时，并使用已弃用的功能。请改用其他答案。

好吧，让我解释一下你的家伙;）

首先从内容脚本发送一条消息，如下所示：

内容脚本 - 发送消息

chrome.extension.sendRequest({ action: "WhatYouWant"});

背景页面 - 接收消息和回复

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) 
{   

    if(request.action)
    {

        // Make what you want
        chrome.tabs.getSelected(null, function(tabs) {
            chrome.tabs.sendRequest(tabs.id, { action: "response" });
        });     
    }
});

ContentScript - 添加一个监听器

chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
    if(request.action)
{
    alert('The response is : ' + request.action);
}
});

Answer 2

onMessage提供sendResponse函数，可用于将响应直接发送回发件人。

background.js摘录：

chrome.extension.onMessage.addListener(
    function(message, sender, sendResponse) {
        if ( message.type == 'getTabId' )
        {
            sendResponse({ tabId: sender.tab.id });
        }
    }
);

content_scripts.js摘录：

var tabId;
chrome.extension.sendMessage({ type: 'getTabId' }, function(res) {
    tabId = res.tabId;
});

Answer 3

作为对2011年后查看此问题的任何人的礼貌，我提供了使用较新约定和API的答案。这是一个相当受欢迎的问题，并且接受的答案在这一点上有点过时（但仍然是一个准确的答案），因此对于任何新手来说，这应该有希望为这个问题提供更清晰和更适用的答案。

对于初学者，您可以使用chrome.runtime.sendMessage从内容脚本发送消息。这将在运行时事件发生时（即单击浏览器操作）不加选择地发送消息。它看起来像这样：

<强> content.js

chrome.runtime.sendMessage({ from: 'content', message: 'info to send' });

由于您需要与事件页面进行通信（根据更新的约定，事件页面是持久性背景页面的首选）以获取有关活动选项卡的信息（假设您只需要选项卡ID），实际上可以通过添加运行时事件侦听器并检查sender参数来获取该信息。它看起来像这样：

<强> event.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.from == 'content') {
    // tabId will hold the sender tab's id value
    var tabId = sender.tab.id;
    sendResponse({ from: 'event', message: 'any info to send back', tabId: tabId });
}});

但是，由于我们需要将该信息传递回内容脚本，因此我们需要返回并向chrome.runtime.sendMessage添加回调处理程序。它现在看起来像这样：

<强> content.js

chrome.runtime.sendMessage({ from: 'content', message: 'info to send' }, function(callbackResponse) {
  if (callbackResponse.from == 'event') {
    // do what you need to do in here
    console.log(callbackResponse.tabId);
  }
});

此设置现在允许您将简单的一次性消息从content.js传递到event.js，其中event.js将信息提供回content.js。

同样，这只是那些想要了解新方法如何运作的例子的已接受答案的更新版本。

Answer 4

«获取标签ID »完整示例▼

（真相：最清晰的完整定义：有例子。）

«manifest.json»：

{"manifest_version":2, "name":"My Cool Extension", "version":"0.1",
"content_scripts":[{"matches":["<all_urls>"],
                   "js":["content.js"]
                   }
                  ],
"background":{"scripts":["bg.js"]}
}

«bg.js»：

chrome.runtime.onMessage.addListener((msg, sender_info, Reply)=> {
    Reply(sender_info);
});

«content.js»：

chrome.runtime.sendMessage('', (r)=> {
    console.log('content.js', 'r.tab.id', r.tab.id);
});

重新加载扩展，转到选项卡，刷新页面，等待，检查«内容.js»oks，等待，检查cb oks，等待，检查«console.log哎呀，例如：

<小时/> <小时/>

检查▼

完整补丁 - ：

«bg.js»：

console.log('bg.js, start');
chrome.runtime.onMessage.addListener((msg, sender_info, Reply)=> {
    console.log('bg.js, start, cb chrome.runtime.onMessage.addListener');
    console.log('bg.js', 'sender_info', sender_info);
    console.log('bg.js', 'sender_info.id', sender_info.id);
    console.log('bg.js', 'sender_info.url', sender_info.url);
    console.log('bg.js', 'sender_info.frameId', sender_info.frameId);
    console.log('bg.js', 'sender_info.tlsChannelId', sender_info.tlsChannelId);
    console.log('bg.js', 'sender_info.tab', sender_info.tab);
    console.log('bg.js', 'sender_info.tab.url', sender_info.tab.url);
    console.log('bg.js', 'sender_info.tab.favIconUrl', sender_info.tab.favIconUrl);
    console.log('bg.js', 'sender_info.tab.title', sender_info.tab.title);
    console.log('bg.js', 'sender_info.tab.incognito', sender_info.tab.incognito);
    console.log('bg.js', 'sender_info.tab.status', sender_info.tab.status);
    console.log('bg.js', 'sender_info.tab.width', sender_info.tab.width);
    console.log('bg.js', 'sender_info.tab.height', sender_info.tab.height);
    console.log('bg.js', 'sender_info.tab.id', sender_info.tab.id);
    console.log('bg.js', 'sender_info.tab.windowId', sender_info.tab.windowId);
    console.log('bg.js', 'sender_info.tab.sessionId', sender_info.tab.sessionId);
    console.log('bg.js', 'sender_info.tab.openerTabId', sender_info.tab.openerTabId);
    console.log('bg.js', 'sender_info.tab.pinned', sender_info.tab.pinned);
    console.log('bg.js', 'sender_info.tab.audible', sender_info.tab.audible);
    console.log('bg.js', 'sender_info.tab.mutedInfo', sender_info.tab.mutedInfo);
    console.log('bg.js', 'sender_info.tab.mutedInfo.muted', sender_info.tab.mutedInfo.muted);
    console.log('bg.js', 'sender_info.tab.mutedInfo.extensionId', sender_info.tab.mutedInfo.extensionId);
    console.log('bg.js', 'sender_info.tab.mutedInfo.reason', sender_info.tab.mutedInfo.reason);
    console.log('bg.js', 'sender_info.tab.highlighted', sender_info.tab.highlighted);
    console.log('bg.js', 'sender_info.tab.active', sender_info.tab.active);
    console.log('bg.js', 'sender_info.tab.discarded', sender_info.tab.discarded);
    console.log('bg.js', 'sender_info.tab.autoDiscardable', sender_info.tab.autoDiscardable);
    Reply(sender_info);
    console.log('bg.js, end, cb chrome.runtime.onMessage.addListener');
});
console.log('bg.js, end');

«content.js»：

console.log('content.js, start');
chrome.runtime.sendMessage('', (r)=> {
    console.log('content.js, start, cb chrome.runtime.sendMessage');
    console.log('content.js', 'r', r);
    console.log('content.js', 'r.id', r.id);
    console.log('content.js', 'r.url', r.url);
    console.log('content.js', 'r.frameId', r.frameId);
    console.log('content.js', 'r.tlsChannelId', r.tlsChannelId);
    console.log('content.js', 'r.tab', r.tab);
    console.log('content.js', 'r.tab.url', r.tab.url);
    console.log('content.js', 'r.tab.favIconUrl', r.tab.favIconUrl);
    console.log('content.js', 'r.tab.title', r.tab.title);
    console.log('content.js', 'r.tab.incognito', r.tab.incognito);
    console.log('content.js', 'r.tab.status', r.tab.status);
    console.log('content.js', 'r.tab.width', r.tab.width);
    console.log('content.js', 'r.tab.height', r.tab.height);
    console.log('content.js', 'r.tab.id', r.tab.id);
    console.log('content.js', 'r.tab.windowId', r.tab.windowId);
    console.log('content.js', 'r.tab.sessionId', r.tab.sessionId);
    console.log('content.js', 'r.tab.openerTabId', r.tab.openerTabId);
    console.log('content.js', 'r.tab.pinned', r.tab.pinned);
    console.log('content.js', 'r.tab.audible', r.tab.audible);
    console.log('content.js', 'r.tab.mutedInfo', r.tab.mutedInfo);
    console.log('content.js', 'r.tab.mutedInfo.muted', r.tab.mutedInfo.muted);
    console.log('content.js', 'r.tab.mutedInfo.extensionId', r.tab.mutedInfo.extensionId);
    console.log('content.js', 'r.tab.mutedInfo.reason', r.tab.mutedInfo.reason);
    console.log('content.js', 'r.tab.highlighted', r.tab.highlighted);
    console.log('content.js', 'r.tab.active', r.tab.active);
    console.log('content.js', 'r.tab.discarded', r.tab.discarded);
    console.log('content.js', 'r.tab.autoDiscardable', r.tab.autoDiscardable);
    console.log('content.js, end, cb chrome.runtime.sendMessage');
});
console.log('content.js, end');

如何获取Chrome标签的ID？

4 个答案: