如何仅通过单击图标或按钮使Chrome扩展程序关闭

时间:2018-05-31 16:41:19

标签: google-chrome-extension

我正在开发一个chrome扩展程序,其中我使用了iframe,即使我们在活动网页本身上执行某些活动或打开新选项卡或新窗口,我仍希望保持打开状态。只有再次单击扩展图标或单击扩展名本身上的关闭按钮,才能关闭扩展程序。我暗示join pouch扩展名。

与此主题相关的其他问题仅通过检查弹出窗口来打开通过扩展打开的窗口,该窗口保持打开状态或保持扩展弹出窗口仅用于调试目的。

我知道有办法做到这一点,因为我已经看到了一些扩展,但我找不到。

1 个答案:

答案 0 :(得分:2)

您可以将 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.sync中记住iframe是否已被隐藏。