如何从 chrome.windows 创建的新弹出窗口 window 中获取当前活动标签

Question

我要创建一个 chrome 扩展，它将弹出一个新的 window，方法是

chrome.windows.create({
  url: chrome.runtime.getURL("popup.html"),
  type: "popup",
});

我的问题来自“弹出 window” 我想从“主window”访问活动选项卡，例如我想更改 DOM 从活动选项卡中单击显示弹出窗口的扩展 window。我希望这个问题不会令人困惑。 :)

manifest.json

{
 "name": "test",
 "description": "test",
 "version": "1.0.0",
 "manifest_version": 3,
 "background": {
   "service_worker": "background.js"
 },
 "permissions": ["storage", "activeTab", "scripting", "tabs"],
 "action": {
   "default_icon": {
     "16": "Icon-16.png",
     "32": "Icon-32.png",
     "48": "Icon-48.png",
     "128": "Icon-128.png"
    }
 },
"icons": {
   "16": "Icon-16.png",
   "32": "Icon-32.png",
   "48": "Icon-48.png",
   "128": "Icon-128.png"
 }
}

在弹出 window 上，我有这个 onclick 功能

const onClick = async (e) => {
if (e && e.preventDefault) e.preventDefault();


const [tab] = await chrome.tabs.query({
  active: true,
  currentWindow: true,
});

chrome.scripting.executeScript({
  target: { tabId: tab.id },
  function: () => {
    chrome.storage.sync.get("color", ({ color }) => {
      document.body.style.backgroundColor = color;
    });
  },
});

};

Answer 1

在创建 window 之前获取活动选项卡并将 ID 作为 URL 参数传递。

扩展脚本：

async function openPopup() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  await chrome.windows.create({
    url: `popup.html?${new URLSearchParams({
      tabId: tab.id,
    })}` ,
    type: 'popup',
  });
}

popup.html:

<script src="popup.js"></script>

popup.js:

const activeTabId = Number(new URLSearchParams(location.search).get('tabId'));
chrome.scripting.executeScript({ target: { tabId: activeTabId }, function: foo });
function foo() {
  console.log('injected foo');
}

Answer 2

async function getCurrentTab() {
  let queryOptions = { active: true, currentWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  return tab;
} 

const tab = getCurrentTab();

您可以从文档中使用它，返回 promises 对象 https://developer.chrome.com/docs/extensions/reference/tabs/

如何从 chrome.windows 创建的新弹出窗口 window 中获取当前活动标签

How to get the current active tab from a new pop up window created by chrome.windows

javascript

google-chrome

google-chrome-extension

reactjs