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

问题描述

我正在开发一个我使用过的 chrome 扩展程序，iframe即使我们在活动网页本身上进行一些活动或打开一个新选项卡或新窗口，我也希望保持打开状态。仅当再次单击扩展图标或单击扩展本身上的关闭按钮时，扩展才应关闭。我在暗示类似join pouch扩展的东西。

与此主题相关的其他问题仅通过检查弹出窗口来满足通过保持打开的扩展程序打开窗口或仅出于调试目的保持扩展程序弹出窗口打开的问题。

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

标签： google-chrome-extension

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

这是其中一种方法，你可以如何解决这个问题。

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

"browser_action": {},

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

"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. 将此行添加到清单文件中：

"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.synciframe 是否已隐藏。

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

问题描述

解决方案

推荐阅读