Chrome New Tab Page extension steal focus from the address bar

by

ManifestV3 update

This answer is adapted from https://stackoverflow.com/a/11348302/1754517.
This has been tested with both Manifest V2 and V3.
Tested in Google Chrome 99.0.4844.51 64-bit (Windows 10).

  1. Replace the content of focus.js with:
  if (location.search !== "?x") {
    location.search = "?x";
    throw new Error;  // load everything on the next page;
    // stop execution on this page
  }
  1. Add the autofocus attribute to the <input>.
  2. Go to the Extensions page in Chrome and click the Load unpacked button. Choose the folder of your extension.
  3. Open your new tab page. You might see a modal dialogue reading Change back to Google?. Click Keep it to keep your custom new tab page.
Inline Javascript – Manifest V2 only

If you’re inlining the Javascript in the HTML file, then you’ll need to take some extra steps:

  1. After adding your inline Javascript to your HTML file, open DevTools (F12 key) and observe the error output in the Console. Example output you should see:
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.
  1. Select & copy this hash.
  2. Add a line to manifest.json to allow the JS to run, pasting in the hash you just copied between the single-quotes. E.g.:
"content_security_policy": "script-src 'self' 'sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='"
  1. Go to the Extensions page again. Remove the extension, then re-add it using the Load unpacked button.
  2. Open your new tab page. Your extension should now autofocus on the <input>.

Note inlining only works with Manifest V2; Manifest V3 returns a failure message when attempting to load the extension (even with a properly formed "content_security_policy" object in manifest.json, to replace the Manifest V2 "content_security_policy" string):

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.

More Related Contents:

  1. Chrome extension – retrieving global variable from webpage
  2. Chrome Extension how to send data from content script to popup.html
  3. Checkbox Check Event Listener
  4. Completely lost on how to save extension popup window content
  5. Making a Chrome Extension download a file
  6. Is there a flexible way to modify the contents of an editable element?
  7. Chrome Extension “Refused to load the script because it violates the following Content Security Policy directive”
  8. Where are cookies saved for a local HTML file?
  9. Chrome Extension get selected text
  10. Create a new div element when button is clicked JavaScript [closed]
  11. How to create button to check uncheckable checkbox
  12. Load and execution sequence of a web page?
  13. Zoom Canvas to Mouse Cursor
  14. How can I change div content with JavaScript?
  15. Chrome extension code vs Content scripts vs Injected scripts
  16. Detecting if a browser is using Private Browsing mode
  17. How to use jQuery in chrome extension?
  18. Why my show hide button needs double-click on first time
  19. Chrome Extension: Make it run every page load
  20. Chrome Autofill/Autocomplete no value for password
  21. How to print only a selected HTML element?
  22. Storing arbitrary info in HTML tags for JavaScript?
  23. What is the size limit of a Base64 DataURL image?
  24. How to create checkbox inside dropdown?
  25. How to flip images horizontally with HTML5
  26. Sending message to background script
  27. Remove fragment in URL with JavaScript w/out causing page reload
  28. Control iframe content with javascript/html
  29. How to highlight a part part of an Input text field in HTML using Javascript or JQuery
  30. Published extension doesn’t work with chrome API listeners inside onInstalled

Leave a Comment