Chrome新标签页扩展窃取焦点从地址栏

Chrome New Tab Page extension steal focus from the address bar

本文关键字：焦点 地址栏 扩展 新标签 标签 Chrome      更新时间：2023-09-26

在Chrome 27中，覆盖Chrome新标签页的扩展似乎不能像以前版本的Chrome那样将焦点从Chrome的Omnibox中移开。

是否有一种新的方法来聚焦一个新标签页的输入框，或者这个功能已经被完全禁用了?(

为了测试这一点，创建一个包含三个文件的扩展文件夹:

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的Omnibox。

任何想法?这是一个bug还是一个新的"特性"?

ManifestV3 update

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

  1. 将focus.js内容替换为:
  if (location.search !== "?x") {
    location.search = "?x";
    throw new Error;  // load everything on the next page;
    // stop execution on this page
  }
  • 为<input>添加autofocus属性
  • 转到Chrome中的扩展页面并单击Load unpacked按钮。选择你的扩展文件夹
  • 打开新标签页。你可能会看到一个模式对话框，上面写着Change back to Google?。点击Keep it保持您的自定义新标签页。
    • 内联Javascript - Manifest 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.

    根据Chrome扩展文档，

    不要依赖具有键盘焦点的页面。当用户创建一个新选项卡时，地址栏总是第一个成为焦点。

    参见此处的参考:Override Pages

    Manifest v3 

    chrome.tabs.onCreated.addListener((tab) => {
  if (tab.pendingUrl === 'chrome://newtab/') {
    chrome.tabs.remove(tab.id)
    chrome.tabs.create({
      url: '/index.html',
    })
  }
})

    我看到一个很老的博客，它有条件地更新新标签。然而，简单地更新选项卡并不能抢走焦点。我不得不关闭pending选项卡并打开一个新选项卡。

    缺点:一个丑陋的chrome扩展名://akfdobdepdedlohhjdalbeadhkbelajj/index.html在URL栏

    我有一个便宜的工作，允许从地址栏焦点窃取焦点。不是每个人都适合。我确实使用了这个，因为我想在我自己的自定义新选项卡解决方案中控制新选项卡焦点:

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

    用例:我建立了自己的HTML chrome自定义选项卡，它有一个搜索输入，自定义搜索我的历史和书签的方式，我喜欢它。

    把我的注意力集中在外面怎么样?

    相关文章：