获得“;这个“;Chrome扩展中内容脚本的选项卡ID

Obtaining "this" tab ID from content script in Chrome extension?

本文关键字：脚本 选项 ID 这个 Chrome 扩展 获得      更新时间：2023-09-26

从内容脚本中，是否可以访问该选项卡的id？

我想从内容脚本向后台页面发送消息，该消息告诉我的扩展为"；用这个标签做点什么"；使用CCD_ 2 API。

需要一个tabID，当我的内容脚本可以简单地告诉它消息内容中的tabID时，在后台页面中做一堆逻辑来寻找tabID是没有意义的。

选项卡id自动传递到MessageSender对象内部：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log("sent from tab.id=", sender.tab.id);
});

注：根据文档，此属性并不总是可用的：

仅当从选项卡（包括内容脚本）打开连接时，并且仅当接收器是扩展而不是应用程序时，此属性才会出现。

如果你想要自己的tabId（在我的情况下是在内容脚本中），而不需要"CCD_ 7"；权限，解决方法是让Content Script向后台脚本发送一条伪消息，然后让后台脚本用sender.tab.id回复Content Script！

例如在content.js:中

chrome.runtime.sendMessage({ text: "what is my tab_id?" }, tabId => {
   console.log('My tabId is', tabId);
});

在background.js:中

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.text == "what is my tab_id?") {
        sendResponse({tab: sender.tab.id});
     }
});

这是一个愚蠢的变通方法，对我有效。：）

PS。哦，如果你有tabs权限，那么你可以很容易地运行这个异步查询：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    var myTabId = tabs[0].id;
    chrome.tabs.sendMessage(myTabId, {text: "hi"}, function(response) {
        alert(response);
    });
});

如果您使用Ports进行双向长寿命连接，回调中的第二个参数是Port对象，因此访问选项卡ID是：

chrome.runtime.onConnect.addListener(port => {
  if (port.name === "foo") {
    port.onMessage.addListener((msg, sendingPort) => {
      console.log("sent from tab.id=", sendingPort.sender.tab.id);
    });
  }
});

当前所选答案的更正：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log("sent from tab.id=", sender.id);
});

如果以编程方式注入内容脚本，另一种方法是将tabId存储在全局变量中

const injectTabId = (callback) => chrome.tabs.executeScript(
  tabId,
  {code: `window.tabId = ${tabId}`},
  callback
);
const injectFile = () => chrome.tabs.executeScript(
  tabId,
  {file: 'content.js'}
);
injectTabId(injectFile);

在内容脚本中，使用window.tabId访问它。变量不会因为内容脚本而暴露于页面脚本生活在一个与世隔绝的世界里。

如果您使用manifest_version: 3并且以编程方式注入内容脚本，另一种方法是将tabId存储在全局变量中：

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
    await chrome.scripting.executeScript({
      target: { tabId: tabId },
      args: [tabId],
      func: (id) => {
        window.tabId = id;
      }
    });
    await chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ['content.js']
    });
});
相关文章：