I'm writing a Google Chrome extension which manipulates the current page (basically adds a button).
In my content script, I want to load the Facebook Graph API:
$fbDiv = $(document.createElement('div')).attr('id', 'fb-root'); $fbScript = $(document.createElement('script')).attr('src', 'https://connect.facebook.net/en_US/all.js'); $(body).append($fbDiv); $(body).append($fbScript); console.log("fbScript: " + typeof $fbScript.get(0)); console.log("fbScript parent: " + typeof $fbScript.parent().get(0)); console.log("find through body: " + typeof $(body).find($fbScript.get(0)).get(0));
However, the script doesn't seem to added to body
. Here's the console log:
fbScript: object fbScript parent: undefined find through body: undefined
Any ideas on what I'm doing wrong?
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
“external javascript file not working” Code Answer's Most likely, the problem is that you are including your js file in a head tag or somewhere above your main content. ... You should be able to add the js file in a script tag. The page loads first then JavaScript.
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.
Google Chrome extensions no longer allow injecting external code directly, however you can still download the code with an Ajax call and feed it to the injector as if it was a code block.
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { $.get("http://127.0.0.1:8000/static/plugin/somesite.js", function(result) { chrome.tabs.executeScript(tabs[0].id, {code: result}); }, "text"); });
source: https://stackoverflow.com/a/36645710/720665
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With