Chrome 27：新标签页扩展无法从多功能框中窃取焦点答案

【问题标题】：Chrome 27: New Tab Page extension can't steal focus from OmniboxChrome 27：新标签页扩展无法从多功能框中窃取焦点
【发布时间】：2013-05-22 06:11:28
【问题描述】：

在 Chrome 27 中，覆盖 Chrome 新标签页的扩展程序似乎无法像以前版本的 Chrome 那样将焦点从 Chrome 的多功能框上移开。

是否有一种新方法可以在新标签页中聚焦输入框，或者此功能是否已完全禁用？ :(

要对此进行测试，请创建一个包含三个文件的扩展文件夹：

1. manifest.json：

{
    "name": "Focus Test",
    "version": "0",
    "minimum_chrome_version": "27",
    "chrome_url_overrides": {
        "newtab": "newTab.html"
    },
    "manifest_version": 2
}

2。 focus.js：

document.getElementById('foo').focus();

3。 newTab.html：

<html>
    <body>
        <input id="foo" type="text" />
        <script type="text/javascript" src="focus.js"></script>
    </body>
</html>

然后，当您加载扩展程序并打开新标签页时，输入字段不会聚焦在新标签页上。

我也尝试将autofocus 属性添加到input 字段，但也没有运气。扩展程序的新标签页无法将焦点从 Chrome 的多功能框中移开。

有什么想法吗？这是一个错误还是一个新的“功能”？

【问题讨论】：

Chrome 文档声称“新标签”页面不应该能够覆盖地址栏/多功能框来获得焦点，但是我不确定是否真的有可能。 developer.chrome.com/extensions/override.html#tips
其他扩展也报告了类似的问题，但似乎发生了相反的行为：code.google.com/p/chromium/issues/detail?id=232148
我实际上已经向 Chromium 提交了一个问题。等待确认以了解这是否是错误。 code.google.com/p/chromium/issues/detail?id=243102
Chromium 团队得出的结论是，这是一项功能，而不是错误。

标签： javascript html google-chrome-extension

【解决方案1】：

根据 Chrome 扩展文档，

不要依赖具有键盘焦点的页面。当用户创建新标签时，地址栏总是首先获得焦点。

在此处查看参考：Override Pages

【讨论】：

是的，会接受这个。可惜，因为这在 Chrome 27 之前有效！
我同意，当它被删除时我很难过。 P.S.谢谢！ :)

【解决方案2】：

此答案改编自https://stackoverflow.com/a/11348302/1754517。
这已通过 Manifest V2 和 V3 进行了测试。
在 Google Chrome 99.0.4844.51 64 位 (Windows 10) 中测试。

将focus.js的内容替换为：

  if (location.search !== "?x") {
    location.search = "?x";
    throw new Error;  // load everything on the next page;
    // stop execution on this page
  }

将autofocus 属性添加到<input>。
转到 Chrome 中的扩展页面，然后单击 Load unpacked 按钮。选择您的扩展程序的文件夹。
打开新标签页。你可能会看到一个模态对话阅读Change back to Google?。点击Keep it 保留您的自定义新标签页。

内联 Javascript - 仅限清单 V2

如果您在 HTML 文件中内联 Javascript，那么您需要采取一些额外的步骤：

将内联 Javascript 添加到 HTML 文件后，打开 DevTools（F12 键）并观察控制台中的错误输出。您应该看到的示例输出：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". 
Either the 'unsafe-inline' keyword, a hash ('sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='), or a nonce ('nonce-...') is required to enable inline execution.

选择并复制此哈希。
在manifest.json 中添加一行以允许JS 运行，并粘贴您刚刚在单引号之间复制的哈希值。例如：

"content_security_policy": "script-src 'self' 'sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='"

再次转到扩展页面。删除扩展程序，然后使用 Load unpacked 按钮重新添加它。
打开新标签页。您的扩展程序现在应该会自动关注 <input>。

注意内联仅适用于 Manifest V2； Manifest V3 在尝试加载扩展时返回失败消息（即使在 manifest.json 中使用正确格式的 "content_security_policy" 对象，以替换 Manifest V2 "content_security_policy" 字符串）：

Failed to load extension
File C:\path\to\extension
Error 'content_security_policy.extension_pages': Insecure CSP value "'sha256-...'" in directive 'script-src'.
Could not load manifest.

【讨论】：

这适用于 Manifest V3 吗？如果没有，您能否提供一个 V3 的示例？
我刚刚测试过并且 V3 确实可以工作 - 只需将 manifest.json 更新为 "manifest_version": 3,。我还意识到，仅当您要内联 JS 时，步骤 5-8 才有意义，而 OP 不是；我会调整我的答案。谢谢。
非常感谢。在进一步试验后，为了使search 属性尽可能小，这似乎可以解决问题：let q = "?"; if (location.search !== q && !location.href.includes(q)) location.search = q; 对于它的价值，还尝试使用history.pushState 并更改location.href ，但没有运气。只需设置location.search 即可让新标签页以autocomplete 作为属性或调用.focus() 来窃取焦点。
@ChrisMcFarland 这很有用，谢谢！

【解决方案3】：

我有一个便宜的解决方法，允许从地址栏焦点中窃取焦点。它不适合所有人。我确实确实使用了它，因为我想在我自己的自定义新标签解决方案中控制一个新标签焦点，这太糟糕了：

<script>
  alert('Use enter key to cancel this alert and then I will control your focus');

  document.getElementById('...AckerAppleIsCrafty...').focus()
</script>

用例：我构建了自己的 HTML chrome 自定义选项卡，它有一个搜索输入，可以自定义搜索我的历史记录并以我喜欢的方式添加书签。

让我专注于外面怎么样？

【讨论】：