google-chrome-extension - 如何仅通过单击图标或按钮来关闭 Chrome 扩展

Question

我正在开发一个 chrome 扩展，其中我使用了 iframe，即使我们在事件网页本身上执行一些事件或打开一个新选项卡或一个新选项卡，我也希望保持打开状态。 window 。仅当再次单击扩展图标或单击扩展本身上的关闭按钮时，扩展才应关闭。我正在暗示诸如join pouch扩展之类的东西。

与此主题相关的其他问题仅适用于通过扩展程序打开一个保持打开状态的窗口，或者通过检查弹出窗口来保持扩展程序弹出窗口打开以进行调试目的。

我知道有一种方法可以做到这一点，因为我已经看到了一些这样的扩展，但无法找到。

Answer 1

您可以将该iframe嵌入到您打开的每个页面的 DOM 结构中。不幸的是，除了默认弹出窗口之外，谷歌没有提供任何解决方案，当第一次点击外部窗口时，默认弹出窗口就会消失。另一方面，您需要在每一页上运行一个内容脚本实例，这可能意味着将有数百个实例在运行(至少对我来说，因为我是一个强制性的新标签打开者)。

这是实现这一目标的方法之一。

第 1 步。 正如我已经说过的，单击图标时的默认操作是打开弹出窗口。您可以通过在 manifest.json 中包含以下条目来禁用该行为:

"browser_action": {},

第 2 步。 接下来是创建一个在每个页面上运行的内容脚本。在您的 list 中，它看起来像这样:

"content_scripts": [
  {
    "run_at": "document_end",
    "matches": ["*://*/*"],
    "js": ["path/to/your/content/script.js"]
  }
],

第 3 步。 您的内容脚本应该将您提到的 iframe 嵌入到当前打开的页面中(当 DOM 完全加载时)。

window.addEventListener('load', function load(event) {
  var iframe = document.createElement('iframe');
  /* some settings, these are mine */
  iframe.style.width = "250px";
  iframe.style.background = "#eee";
  iframe.style.height = "100%";
  iframe.style.position = "fixed";
  iframe.style.top = "0px";
  iframe.style.right = "0px";
  iframe.style.zIndex = "1000000000000000";
  iframe.frameBorder = "none";
  /* end of settings */
  iframe.src = 
  chrome.runtime.getURL("path/to/contents/of/your/iframe.html");
  document.body.appendChild(iframe);
});

第 4 步。 您必须确保人们可以访问 iframe.html。将此行添加到您的 list 文件中:

"web_accessible_resources": ["path/to/contents/of/your/iframe.html"], 

(或者将该文件添加到列表中(如果该文件已存在)。

第 5 步。 在内容脚本中创建一个知道如何隐藏 iframe 的函数。类似这样的事情:

function toggle_iframe() {
  if (iframe.style.width == "0px"){
    iframe.style.width="250px";
  } else {
    iframe.style.width="0px";
  }
}

现在，唯一剩下的就是知道何时调用它。

第 6 步。 不幸的是，后台脚本是唯一可以获得有关被单击的扩展图标的信息的地方。将此代码片段添加到您的后台脚本中:

chrome.browserAction.onClicked.addListener(function(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, { action: "must_toggle_iframe" });
  })
});

当单击图标时，它会发送一条消息。

第 7 步。 最后一部分是允许您的内容脚本接收该消息。您的内容脚本需要一个监听器。

chrome.runtime.onMessage.addListener(function(msg, sender) {
  if (msg.action == "must_toggle_iframe"){
    toggle_iframe();
  }
}

当然，该解决方案并不理想，但您可以对其进行改进。例如，通过在 chrome.storage.local/chrome.storage.sync 中记住 iframe 是否已隐藏。