Optionally inject Content Script

by

You cannot run code on a site without the appropriate permissions. Fortunately, you can add the host permissions to optional_permissions in the manifest file to declare them optional and still allow the extension to use them.

In response to a user gesture, you can use chrome.permission.request to request additional permissions. This API can only be used in extension pages (background page, popup page, options page, …). As of Chrome 36.0.1957.0, the required user gesture also carries over from content scripts, so if you want to, you could add a click event listener from a content script and use chrome.runtime.sendMessage to send the request to the background page, which in turn calls chrome.permissions.request.

Optional code execution in tabs

After obtaining the host permissions (optional or mandatory), you have to somehow inject the content script (or CSS style) in the matching pages. There are a few options, in order of my preference:

  1. Use the chrome.declarativeContent.RequestContentScript action to insert a content script in the page. Read the documentation if you want to learn how to use this API.

  2. Use the webNavigation API (e.g. chrome.webNavigation.onCommitted) to detect when the user has navigated to the page, then use chrome.tabs.executeScript to insert the content script in the tab (or chrome.tabs.insertCSS to insert styles).

  3. Use the tabs API (chrome.tabs.onUpdated) to detect that a page might have changed, and insert a content script in the page using chrome.tabs.executeScript.

I strongly recommend option 1, because it was specifically designed for this use case. Note: This API was added in Chrome 38, but only worked with optional permissions since Chrome 39. Despite the “WARNING: This action is still experimental and is not supported on stable builds of Chrome.” in the documentation, the API is actually supported on stable. Initially the idea was to wait for a review before publishing the API on stable, but that review never came and so now this API has been working fine for almost two years.

The second and third options are similar. The difference between the two is that using the webNavigation API adds an additional permission warning (“Read your browsing history”). For this warning, you get an API that can efficiently filter the navigations, so the number of chrome.tabs.executeScript calls can be minimized.

If you don’t want to put this extra permission warning in your permission dialog, then you could blindly try to inject on every tab. If your extension has the permission, then the injection will succeed. Otherwise, it fails. This doesn’t sound very efficient, and it is not… …on the bright side, this method does not require any additional permissions.

By using either of the latter two methods, your content script must be designed in such a way that it can handle multiple insertions (e.g. with a guard). Inserting in frames is also supported (allFrames:true), but only if your extension is allowed to access the tab’s URL (or the frame’s URL if frameId is set).

More Related Contents:

  1. Chrome extension content script re-injection after upgrade or install
  2. Chrome extension is not loading on browser navigation at YouTube
  3. Chrome extension: accessing localStorage in content script
  4. Access window variable from Content Script [duplicate]
  5. How to open the correct devtools console to see output from an extension script?
  6. Can you access chrome:// pages from an extension?
  7. Obtaining Chrome Extension ID for development
  8. Chrome extension code vs Content scripts vs Injected scripts
  9. Port error while changing chrome extension from manifest v1 to v2
  10. Is it possible to require npm modules in a chrome extension ?
  11. My CSS is not getting injected through my content script
  12. Modify HTTP responses from a Chrome extension
  13. sending message to chrome extension from a web page
  14. Chrome extension to read HTTP response
  15. Content script matching top-level domains like all google.*
  16. about chrome.tabs.executeScript( id,details, callback)
  17. Registering a custom element from a chrome extension
  18. Google Chrome – Alphanumeric hashes to identify extensions
  19. Manifest v3 Resources must be listed in the web_accessible_resources
  20. How do you integrate Universal Analytics in to Chrome Extensions?
  21. Chrome extension login best practices
  22. How to modify an extension from the Chrome Web Store? [closed]
  23. Does content_scripts matches “chrome-extension://*/*” work?
  24. Upload a File in a Google Chrome Extension
  25. Chrome tabs query returning empty tab array
  26. Can I hide my extension’s icon by default?
  27. chrome.tabs.executeScript not working?
  28. Chrome content scripts aren’t working: DOMContentLoaded listener does not execute
  29. How to to initialize keyboard event with given char/keycode in a Chrome extension?
  30. How to debug chrome devtools panel extension?

Leave a Comment