首页 > 解决方案 > Chrome 扩展在新标签页中运行 js

问题描述

我的popup.js:

chrome.tabs.create({ url: "https://mywebsite.com" })

我如何在新创建的选项卡中运行这个 js?

chrome.tabs.executeScript(null, {
  code: "document.getElementById('test').value='test';"
});

标签: javascriptgoogle-chromegoogle-chrome-extension

解决方案


创建选项卡时,您可以传递一个回调函数来接收新创建的选项卡以进行操作。此选项卡有一个idwhich 用于指定脚本应在哪个选项卡中执行。除非您指定选项卡 ID,否则脚本将在当前选项卡中执行,而不是在新创建的选项卡中执行。因此你想要的大致是

chrome.tabs.create({ url: "https://mywebsite.com" }, tab => {
  chrome.tabs.executeScript(tab.id, {
    code: "document.getElementById('test').value='test';"
  });
});

或者更优雅

function createTab(options) {
  return new Promise(resolve => {
    chrome.tabs.create(options, resolve);
  });
}

async function main() {
  const tab = await createTab({ url: "https://mywebsite.com" });

  chrome.tabs.executeScript(tab.id, {
    code: "document.getElementById('test').value='test';"
  });
}

main();

有关详细信息,请参阅Chrome 选项卡 API 文档


推荐阅读