Chrome extension code vs Content scripts vs Injected scripts

by

JavaScript code in Chrome extensions can be divided in the following groups:

  • Extension code – Full access to all permitted chrome.* APIs.
    This includes the background page, and all pages which have direct access to it via chrome.extension.getBackgroundPage(), such as the browser pop-ups.

  • Content scripts (via the manifest file or chrome.tabs.executeScript) – Partial access to some of the chrome APIs, full access to the page’s DOM (not to any of the window objects, including frames).
    Content scripts run in a scope between the extension and the page. The global window object of a Content script is distinct from the page/extension’s global namespace.

  • Injected scripts (via this method in a Content script) – Full access to all properties in the page. No access to any of the chrome.* APIs.
    Injected scripts behave as if they were included by the page itself, and are not connected to the extension in any way. See this post to learn more information on the various injection methods.

To send a message from the injected script to the content script, events have to be used. See this answer for an example. Note: Message transported within an extension from one context to another are automatically (JSON)-serialised and parsed.

In your case, the code in the background page (chrome.tabs.onUpdated) is likely called before the content script script.js is evaluated. So, you’ll get a ReferenceError, because init is not .

Also, when you use chrome.tabs.onUpdated, make sure that you test whether the page is fully loaded, because the event fires twice: Before load, and on finish:

//background.html
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        // Execute some script when the page is fully (DOM) ready
        chrome.tabs.executeScript(null, {code:"init();"});
    }
});

More Related Contents:

  1. Use a content script to access the page context variables and functions
  2. Chrome extension adding external javascript to current page’s html
  3. How to inject CSS using content script file in Chrome extension?
  4. Access variables and functions defined in page context using a content script
  5. How to get a content script to load AFTER a page’s Javascript has executed?
  6. Chrome content scripts aren’t working: DOMContentLoaded listener does not execute
  7. Chrome extension: Communication between content script and background.html
  8. How to to initialize keyboard event with given char/keycode in a Chrome extension?
  9. onclick or inline script isn’t working in extension
  10. Please explain the use of JavaScript closures in loops [duplicate]
  11. Referencing “this” inside setInterval/setTimeout within object prototype methods [duplicate]
  12. Understanding Service Worker scope
  13. Chrome Extension – Get DOM content
  14. Why is window (and unsafeWindow) not the same from a userscript as from a tag?
  15. Gmail Extension, sendMessage to background from page context
  16. Create a file using Javascript in Chrome on client side
  17. Specify scope for eval() in JavaScript?
  18. Access variable outside function scope [duplicate]
  19. Event onBrowserClose for Google Chrome Extension?
  20. Console shows error about Content Security policy and lots of failed GET requests
  21. Communicating between a Chrome packaged app and a Chrome extension?
  22. Limiting number of displayed results when using ngRepeat
  23. How to inject CSS into webpage through Chrome extension?
  24. Global variables in Meteor
  25. Javascript eval on global scope?
  26. “Aw, Snap” when data uri is too large
  27. dynamically call local function in javascript
  28. Using page’s angular JS in chrome extension
  29. How to develop Chrome extension for Gmail?
  30. monitoring history.pushstate from a chrome extension

Leave a Comment