Loading external javascript in google chrome extension

by

The issue is that the JavaScript inside the content scripts runs in its own sandboxed environment and only has access to other JavaScript that was loaded in one of two ways:

Via the manifest:

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "js": ["https://connect.facebook.net/en_US/all.js"]
    }
  ],
  ...
}

Or using Programmatic injection:

/* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null,
                       {file:"https://connect.facebook.net/en_US/all.js"});
});

Be sure to update your manifest permissions:

/* in manifest.json */
"permissions": [
    "tabs", "https://connect.facebook.net"
 ],

Appending a script tag will in effect evaluate the JavaScript in the context of the containing page, outside of the JavaScript sandbox that your JavaScript has access to.

Also, since the FB script requires the “fb-root” to be in the DOM, you will probably need to use the programmatic approach so that you can first update the DOM with the element, then pass a message back to the background page to load the Facebook script so it is accessible to the JavaScript that is loaded in the content scripts.

More Related Contents:

  1. How can I get the current Crome URL?
  2. Chrome extension that enables chatting with users on same page [closed]
  3. Persistent Service Worker in Chrome Extension
  4. How to import ES6 modules in content script for Chrome Extension
  5. How to use jQuery in chrome extension?
  6. Chrome Extension: Port error: Could not establish connection. Receiving end does not exist.
  7. Unchecked runtime.lastError while running tabs.executeScript?
  8. Contexts and methods for communication between the browser action, background scripts, and content scripts of chrome extensions?
  9. How do I auto-reload a Chrome extension I’m developing?
  10. Chrome Extension: Make it run every page load
  11. Chrome Extension: Get Page Variables in Content Script
  12. Upload File as a Form Data through chrome extension
  13. Check if user has a third party Chrome extension installed
  14. How to make side panel in chrome extension?
  15. Does extension messaging like chrome.runtime.sendMessage internally use JSON.stringify?
  16. google chrome extension :: console.log() from background page?
  17. Can I prevent an alert() with a Google Chrome Extension
  18. How can I save information locally in my chrome extension?
  19. How to get the currently opened tab’s URL in my page action popup?
  20. How to get errors stack trace in Chrome extension content script?
  21. How do I send an HTTP request from a Chrome extension?
  22. Sending message to background script
  23. Pass a variable from content script to popup
  24. Prevent window.open from focusing
  25. Associate a custom user agent to a specific Google Chrome page/tab
  26. How to develop Chrome extension for Gmail?
  27. Chrome content scripts aren’t working: DOMContentLoaded listener does not execute
  28. Chrome extension: Checking if content script has been injected or not
  29. How to to initialize keyboard event with given char/keycode in a Chrome extension?
  30. Link to chrome:// url from a webpage

Leave a Comment