Chrome extension – retrieving global variable from webpage

by

Content scripts run in an isolated environment. To get access to the any global properties (of the page’s window), you have to either inject a new <script> element, or use event listeners for passing data.

See this answer for example on injecting a <script> element in the context of the page.

Example

contentscript.js ("run_at": "document_end" in manifest):

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.remove();
};

// Event listener
document.addEventListener('RW759_connectExtension', function(e) {
    // e.detail contains the transferred data (can be anything, ranging
    // from JavaScript objects to strings).
    // Do something, for example:
    alert(e.detail);
});

script.js – Located in the extension directory, this will be injected into the page itself:

setTimeout(function() {
    /* Example: Send data from the page to your Chrome extension */
    document.dispatchEvent(new CustomEvent('RW759_connectExtension', {
        detail: GLOBALS // Some variable from Gmail.
    }));
}, 0);

Since this file is being loaded via a chrome-extension: URL from within the DOM, “script.js” must be added to the web_accessible_resources section of the manifest file. Otherwise Chrome will refuse to load the script file.

You should run as little logic as possible in the web page, and handle most of your logic in the content script. This has multiple reasons. First and foremost, any script injected in the page runs in the same context as the web page, so the web page can (deliberately or inadvertently) modify JavaScript/DOM methods in such a way that your extension stops working. Secondly, content script have access to extra features, such a limited subset of the chrome.* APIs and cross-origin network requests (provided that the extension has declared permissions for those).

More Related Contents:

  1. Is there a flexible way to modify the contents of an editable element?
  2. Retrieve the position (X,Y) of an HTML element
  3. How can I tell if a DOM element is visible in the current viewport?
  4. Parse an HTML string with JS
  5. jQuery document.createElement equivalent?
  6. Browser detection versus feature detection
  7. How can I count text lines inside an DOM element? Can I?
  8. How do I create a link using javascript?
  9. How to append text to a “?
  10. Is it possible to run an .exe or .bat file on ‘onclick’ in HTML
  11. Find the closest ancestor element that has a specific class
  12. Retrieving the text of the selected in element
  13. Replace HTML page with contents retrieved via AJAX
  14. Pass mouse events through absolutely-positioned element
  15. Chrome Extension how to send data from content script to popup.html
  16. getAttribute() versus Element object properties?
  17. How to get the HTML for a DOM element in javascript
  18. How to find a parent with a known class in jQuery?
  19. jQuery: how to change tag name?
  20. Why aren’t some technically serializable input properties serializable?
  21. Adding images to an HTML document with JavaScript
  22. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  23. Add an element to the DOM with JavaScript
  24. Is it possible to use HTML’s .querySelector() to select by xlink attribute in an SVG?
  25. Chrome New Tab Page extension steal focus from the address bar
  26. How to get the title of HTML page with JavaScript?
  27. How to append text to a div element?
  28. JQuery html() vs. innerHTML
  29. Where are cookies saved for a local HTML file?
  30. Chrome Extension get selected text

Leave a Comment