Is it possible to inject a javascript code that OVERRIDES the one existing in a DOM? (e.g default alert function)

by

Functions don’t exist as part of the DOM; instead, they exist within an execution environment that includes the DOM. Content scripts (including scripts run with executeScript) and actual web pages share the same DOM, but have separate execution environments. So calling window.alert = function() {} only rewrites window.alert within your content script’s execution environment, not in the actual page’s one.

The typical way to reach the execution environment of the actual page is to inject a <script> tag into the DOM. This can be done in several ways. One method is to white-list a script in web_accessible_resource, and insert the <script> element referring to this script in the document. The required absolute URL can be obtained via chrome.extension.getURL.

var s = document.createElement("script");
s.src = chrome.extension.getURL("script_in_extension.js");
(document.head||document.documentElement).appendChild(s);

Make sure that the script is configured to "run_at": "document_start", so that the overwrite takes place before any of the page’s functions are loaded.

Note: Your action can easily be undone by the page:

window.alert = function(){ /*...*/ }; // Your overwrite
delete window.alert;                  // Run from the page/console/...
window.alert('Test?');                // Displays alert box.

If it’s critical that the overwritten function cannot be removed, use Object.defineProperty to define an immutable method. For more details, see Stop a function from execute with Chrome extension.

More Related Contents:

  1. How to access the webpage DOM rather than the extension page DOM?
  2. How can I get the URL of the current tab from a Google Chrome extension?
  3. How to stop CORB from blocking requests to data resources that respond with CORS headers?
  4. How can I open my extension’s pop-up with JavaScript?
  5. Since v38, Chrome extension cannot load from HTTP URLs anymore, workaround?
  6. Detect Chrome extension first run / update
  7. Modifying the built-in newtab page
  8. Start an external application from a Google Chrome Extension?
  9. Chrome Extension: how to capture selected text and send to a web service
  10. Where does Chrome store extensions?
  11. How can I get the current tab URL for chrome extension?
  12. Content script matching top-level domains like all google.*
  13. How can I enable my chrome extension in incognito mode?
  14. Insert an image in chrome extension
  15. How to disable (gray out) page action for Chrome extension?
  16. Inject HTML into a page from a content script
  17. chrome.identity User Authentication in a Chrome Extension
  18. Can I modify outgoing request headers with a Chrome Extension?
  19. How do I import scripts into a service worker using Chrome extension manifest version 3?
  20. Cross-origin request in a content script is blocked by CORB despite the correct CORS headers
  21. Add contextmenu items to a Chrome extension’s browser action button
  22. How to make a cross-origin request in a content script (currently blocked by CORB despite the correct CORS headers)?
  23. Google Chrome Extensions – Open New Tab when clicking a toolbar icon
  24. Chrome version 18+: How to allow inline scripting with a Content Security Policy?
  25. What does “http://*/*”, “https://*/*” and “” mean in the context of Chrome extension’s permissions
  26. CORS issue doesn’t occur when using POSTMAN
  27. How can I detect the current tab’s mime type in a Google Chrome extension?
  28. Chrome Console SameSite Cookie Attribute Warning
  29. Passing message from background.js to popup.js
  30. Accessing `window`/DOM/HTML of the webpage from the extension

Leave a Comment