时间戳

首页 > 解决方案 > 如何从 Chrome 扩展弹出窗口中打开弹出 html 文件？

google-chrome-extension - 如何从 Chrome 扩展弹出窗口中打开弹出 html 文件？

问题描述

我对 Chrome 扩展很陌生。我正在尝试做一些非常简单的事情：从我的 chrome 扩展的弹出窗口中打开一个 popup.html 页面。

在我的原生默认 chrome 扩展弹出窗口中，我放置了一个按钮。单击此按钮时，我想打开另一个具有不同内容的 html 弹出窗口。

这是我的 manifest.json ：

{
  "name": "CheatSheets",
  "description": "cheatsheet extension",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting","tabs"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}

这是我的 popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button id="git_Sheet">git sheet</button>
    <script src="popup.js"></script>
  </body>
</html>

然后，我的 popup.js 文件：

let gitSheet = document.getElementById("git_Sheet");

gitSheet.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: ShowGitSheet,
  });
});

function ShowGitSheet() {
  chrome.browserAction.openPopup({
    popup: "git_popup.html"
});
}

标签： google-chrome-extension

解决方案

感谢这里的评论^^，我能够制作这个非常简单的 chrome 扩展功能，我只更改了我的 popup.js 文件：

let gitSheet = document.getElementById("git_Sheet");
let CLI_Sheet =document.getElementById("CLI_Sheet");

gitSheet.addEventListener("click", async () => {

  chrome.windows.create({ url: chrome.runtime.getURL("popups/git_popup.html"), type: 
  "popup", height : 800, width : 500 });
});

CLI_Sheet.addEventListener("click", async () => {

  chrome.windows.create({ url: chrome.runtime.getURL("popups/terminal_popup.html"), type: 
  "popup", height : 800, width : 500 });
});

推荐阅读