Как украсть фокус из омнибокса в расширении Chrome на новой вкладке?

Я делаю расширение для Chrome, которое включает в себя ввод текста на новой вкладке и немедленное фокусирование на этом вводимом тексте при загрузке новой вкладки. После невозможности сфокусироваться на традиционных методах (например, focus()) Я наткнулся на этот вопрос:

Chrome 27: расширение новой вкладки не может украсть фокус у омнибокса

в котором говорится, что Chrome теперь сделал так, что вы не можете украсть фокус омнибокса на новой вкладке. Учитывая, что Chrome подходит для того, чтобы сосредоточиться на любом сайте, который не является новой вкладкой, я пытался найти обходные пути, но на самом деле ничего не является удовлетворительным.

Я пробовал:

  • Наличие новой страницы вкладки перенаправляет немедленно в локально сохраненный файл HTML, но это все еще не дает фокуса, потому что у страницы никогда не было фокуса во время перенаправления.

  • Переопределение ctrl+t и cmd+t в скрипте содержимого, чтобы открыть новую вкладку с содержимым локально сохраненного файла HTML. Это работает нормально, за исключением того, что кажется, что вы не можете переопределить cmd+t, поэтому пользователи Mac будут вынуждены использовать ctrl+t. Кроме того, некоторые сайты (например, онлайн-редактор OneNote) используют Ctrl + T, поэтому он не работает на каждой странице.

  • Удаленное размещение страницы и перенаправление на нее новой вкладки (слишком медленно).

  • Предлагая пользователям дважды нажать вкладку, чтобы сосредоточиться на вводимом тексте при открытии новой вкладки:)

Есть ли у кого-нибудь другие предложения относительно того, как вы можете обойти это ограничение? Это очень важно для моего расширения.

Спасибо!

Источник

2 ответа

Решение

Здравствуйте, от моего вопроса вы связаны!

На вашей странице новой вкладки включите следующий JavaScript:

chrome.tabs.create({ url: chrome.extension.getURL("foo.html") });
window.close();

Это создаст "нормальную" вкладку, а затем закроет страницу новой вкладки. Вы можете тогда focus() Ваше поле ввода на обычной вкладке.

Это то, что я сделал для моего расширения Fauxbar. Это добавляет небольшую задержку при нажатии кнопки "Новая вкладка" в Chrome (с точки зрения того, сколько времени занимает фокусировка вашего поля ввода), но я считаю, что это лучше, чем необходимость нажимать клавишу Tab.

Вы также можете реализовать chrome.commands для создания сочетаний клавиш, которые пользователи могут изменять сами в chrome://extensions > сочетания клавиш.

Источник

Я думаю, что этот путь лучше, чем путь @Chris.

document.location.href = url;

Обновление: я проверил это и добился успеха на моем Chrome. Хотя этот путь тоже медленный. Но он быстрее, чем путь @Chris.

Это manifest.json

{
    "name" : "my extension",
    "description" : "my extension",
    "version" : "0.1",
    "manifest_version" : 2,
    "chrome_url_overrides" : {
        "newtab" : "html/index.html#newTab"
    },
    "permissions" : [
        "tabs",
        "<all_urls>",
        "history",
        "bookmarks",
        "chrome://favicon/*",
        "unlimitedStorage",
        "management",
        "clipboardWrite",
        "clipboardRead",
        "contextMenus",
        "notifications",
        "storage"
    ],
    "browser_action" : {
        "default_icon" : "icon.png",
        "default_popup" : "html/popup.html",
        "default_title": "Click here!"
    },
    "options_page": "html/options.html"
}

Это index.html

<!DOCTYPE html>
<html>
  <head>        
    <script type="text/javascript" src="/js/newTabCheck.js"></script>
    <title></title>
  </head>
  <body></body>
</html>

Это newTabCheck.js

if (window.location.hash == '#newTab') {
    window.document.title = 'Loading...';
    chrome.storage.sync.get({
        file_url : 'http://www.google.com'
    }, function (items) {
        document.location.href = items.file_url;
    });
}

Это options.html

<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>file path：
  <form>
  <input type="text" id="file_url" />
  <br />
  <button id="save">save</button> 
  <label id="status"></label> 
  <script type="text/javascript" src="/js/options.js"></script></form>
  </body>
</html>

Это options.js

// Saves options to chrome.storage
function save_options() {
    var file_url = document.getElementById("file_url").value;
    chrome.storage.sync.set({
        file_url : file_url
    }, function () {
        // Update status to let user know options were saved.
        var status = document.getElementById('status');
        status.textContent = 'save success！';
        setTimeout(function () {
            status.textContent = '';
        }, 750);
    });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
    chrome.storage.sync.get({
        file_url : 'http://www.google.com'
    }, function (items) {
        document.getElementById("file_url").value = items.file_url;
    });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);

Просто установите file_url как focus.html

<html>
<head><title></title></head>     
<body>

save path：
<input type="text" id="file_url"></input>

<script type="text/javascript">
    document.getElementById('file_url').focus();
</script>
</body>
</html>

Это все.

Причиной написания этого расширения является расширение Vimium. Затем, когда я набираю "t", чтобы открыть новую вкладку, я могу использовать vimiun без мыши. По этой причине вам не нужно писать код JavaScript document.getElementById('file_url').focus();,

Источник
Другие вопросы по тегам