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

Google chrome extension 如何仅通过单击图标或按钮来关闭chrome扩展,google-chrome-extension,Google Chrome Extension,我正在开发一个chrome扩展,其中我使用了iframe,即使我们在活动网页本身上做了一些活动,或者打开了一个新选项卡或一个新窗口,我也希望它保持打开状态。只有再次单击扩展图标或单击扩展本身上的关闭按钮,扩展才能关闭。我在暗示类似于加入邮袋扩展的东西 与本主题相关的其他问题仅适用于通过保持打开状态的扩展打开窗口,或通过检查弹出窗口使扩展弹出窗口保持打开状态以进行调试 我知道有一种方法可以做到这一点,因为我已经看到了一些扩展,但找不到。您可以将该iframe嵌入到打开的每个页面的DOM结构中。不幸

我正在开发一个chrome扩展,其中我使用了
iframe
,即使我们在活动网页本身上做了一些活动,或者打开了一个新选项卡或一个新窗口,我也希望它保持打开状态。只有再次单击扩展图标或单击扩展本身上的关闭按钮,扩展才能关闭。我在暗示类似于
加入邮袋
扩展的东西

与本主题相关的其他问题仅适用于通过保持打开状态的扩展打开窗口,或通过检查弹出窗口使扩展弹出窗口保持打开状态以进行调试

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

您可以将该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完全加载时)

第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是否已隐藏。

没有其他方法可以在chrome中保持弹出窗口打开。您的问题中没有提到的其他解决方法是插入DOM元素/iframe wi将UI插入活动选项卡(当然,使用内容脚本)。我按照指导进行了相关更改,并相应地设置了iframe设置,但现在iframe第一次在单击扩展图标时都没有出现。我没有看到您的任何代码,因此我很难猜测。您的控制台中有任何错误吗?可能使用了一些console.logs()要找出哪个部分失败了?内容脚本是否在该页面上运行?是否有已注入DOM的iframe?是否在后台触发了事件?内容脚本是否接收到它?是否在我添加
“web\u可访问的\u资源”后将其称为toogle\u iframe:[“frame.html”],
到manifest.json,正在加载iframe,但iframe似乎没有在我的扩展名popup.js中正确运行另一个js文件。此外,iframe会自动打开,无需单击图标,并永久嵌入,并且不会关闭,直到我删除扩展名本身。如果我可以添加一个按钮来关闭iframe、 我的最佳猜测是:1.您在页面完全加载之前创建了iframe,因此还没有
。2.您可能缺少
“web可访问资源”:[“path/to/contents/of/your/iframe.html”],
清单中的条目。我相应地更新了说明。
popup.js
也必须指定为
web\u-accessible\u-resource
。我只有
“web\u-accessible\u-resources”:[“static/*”],
并将与iframe相关的所有图像、.html和.js放在该目录中。
chrome.runtime.onMessage.addListener(function(msg, sender) {
  if (msg.action == "must_toggle_iframe"){
    toggle_iframe();
  }
}