为啥我关不掉页面？Chrome扩展开发中的那些坑

在开发Chrome扩展时，我最近遇到过一个需求：需要在内容脚本中关闭当前的浏览器窗口或标签页。起初，我以为这是一个简单的功能，只需调用 window.close() 就可以轻松解决。然而，在实际实现过程中，我发现并没有那么顺利。直接调用 window.close() 会无法关闭窗口的情况，随后我又尝试了通过 chrome.runtime.sendMessage() 来让后台脚本执行关闭操作。每种方法都有其适用的场景和局限性，究竟该如何选择呢？

实现思路

最初，我选择了通过 window.close() 来尝试直接关闭当前窗口，毕竟这是一个原生JavaScript函数。但很快我发现，这个方法在某些情况下无效，尤其是在试图关闭用户手动打开的窗口时。这个限制促使我寻找另一种解决方案------利用 chrome.runtime.sendMessage 向后台脚本发送消息，再由后台脚本执行窗口关闭操作。

window.close() 的局限

window.close() 是一种常见的方式，它用于关闭当前的窗口或标签页。然而，它有一个显著的限制：它只能关闭由脚本本身打开的窗口（比如使用 window.open() 打开的窗口），而不能关闭通过直接用户操作打开的窗口（例如用户手动在浏览器中打开的标签页或窗口）。这是因为现代浏览器对用户体验和安全性有严格的保护措施，防止脚本随意关闭用户的浏览器页面。

// 当窗口是通过 window.open() 打开的，可以使用 window.close() 关闭窗口
window.close();

我们会发现仅仅依赖 window.close() 并不足以满足需求，尤其是对于那些用户手动打开的页面。我需要一种更强大且灵活的方式。

Chrome API的优势

为了解决 window.close() 的局限，我开始使用 Chrome 插件提供的API，但是插件的API在内容接口中是无法直接调用的，这时候就需要借助北京脚本，内容脚本通过消息传递机制与插件的后台脚本通信，再由后台脚本调用 chrome.windows.remove() 来关闭目标窗口或标签页。

// 内容脚本中发送关闭窗口的消息
chrome.runtime.sendMessage({ action: 'closeWindow' });

// 后台脚本中监听消息并关闭窗口
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'closeWindow') {
        chrome.windows.remove(sender.tab.windowId);
    }
});

通过这种方式，我们能够关闭任意窗口，无论是用户手动打开的还是由脚本创建的。后台脚本监听到内容脚本发来的消息后，使用 chrome.windows.remove() 来执行关闭操作。这不仅增加了灵活性，也大大增强了扩展的功能。

这种方式的优点在于可以关闭任何窗口或标签页，但需要在 manifest.json 文件中声明适当的权限。权限配置参考如下：

{
  "permissions": [
    "tabs",
    "windows"
  ]
}

有了这种权限，后台脚本便可以接收到内容脚本的消息，并且通过 chrome.windows.remove() 来执行窗口关闭操作。相对于 window.close()，这种方式更加灵活，不再受限于窗口的打开方式。

一些问题

出现异常时，如何正确关闭窗口？

窗口关闭问题算是解决掉了，但是还有一些需要注意的点，如果代码的执行过程中如果出现异常，最后是否还能正确的关闭窗口？

这时候关闭窗口是否是必要的操作，必要的话可以把关闭窗口的操作放在finally代码块中执行。

关闭窗口前的操作是否执行完成

另外一个问题就是窗口关闭时，当前页面的其他操作是否已经执行完成？比如处理数据和关闭窗口的操作是同步执行的，这时候可能导致数据尚未处理完成，窗口就被关闭掉了。

面对这种情况，我这里有两种解决方法，第一个在关闭页面之前等待一段时间，这个操作起来比较简单，对大部分场景都够用了，第二种方法就是把同步操作变成异步操作，等到其他操作完成之后再关闭页面。

Chrome扩展开发中的权限管理

在开发Chrome扩展时，权限管理是一个关键问题。如果没有正确的权限配置，即使代码逻辑正确，某些功能也无法正常工作。除了 tabs 和 windows 权限，其他常用的权限还包括 storage、notifications、activeTab 等。这些权限控制了扩展能访问哪些浏览器资源，因此在开发前必须仔细规划扩展需要的权限，确保既不过度申请，也不遗漏必要的权限。

---

通过实际开发，我们发现 window.close() 和 背景脚本关闭页面各有优缺点。前者适合简单的窗口关闭场景，而后者则提供了更强的灵活性，能够适应更多的应用场景。

如果你只需要关闭由脚本创建的窗口，那么使用 window.close() 是最简单直接的方法。但是，如果需要关闭用户手动打开的窗口或标签页，或者需要更强大的窗口管理功能，那么后台脚本无疑是更好的选择。

例如，通过背景脚本关闭窗口的优点在于不仅限于关闭窗口，还可以执行其他任务，比如记录日志或与其他扩展部分进行交互。可以自定义一些操作。