CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
user1231410
user1231410

Reputation: 365

migrating chrome extension to manifest 2 - script injection

I'm trying to migrate my Chrome extension to manifest 2. The current version uses a background.html page that is basically one big script tag. Since that is no longer possible, I switched to using a background.js script and after much search and experiments, still failing to inject a script from an external file. In the current version I just use document.write to inject a script tag that will run when the browser loads and I haven't found a way to do this now.

I'm aware of the chrome.tabs.onUpdated.addListener function and the ability to inject script per tab update using a XMLHttpRequest object, but the script I want to run should do so only when the browser loads.

current code (in a script tag in a background.html file):

document.write("<script type='text/javascript' src='" + url + "'></script>");

In the background.js file this now leads to an error: Refused to load the script 'http://www.mydomain.com/script.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

I've tried all sorts of code, including:

var s = document.createElement('script');
s.src = chrome.extension.getURL(url);
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

But seems like this will work only for local script files whereas I need to load an external online file.

Upvotes: 0

Views: 756

Answers (2)

jjperezaguinaga
jjperezaguinaga

Reputation: 2482

The error you are getting is due the directive content_security_policy in the manifest. You need to specify the domain of your script as part of it. Here's an example for jQuery:

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"

And in the Background.html page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

This didn't cause me any error. About to when download this script, that's up to your extension architecture, but there's many ways you can tell your application how to do it. Remember that the first thing your application loads is your Background page, so you can do send a message from your Background page to your content script when it's loaded. Example:

/**
* Listener for Displaying the Extension Page Action when the Tab is updated.
* @private
* @event displayPageAction
* @param {Number} tabId The tabId given by the tabs listener to know which tab was updated.
* @param {Object} changeInfo The current status of the tab.
* @param {Object} tab The metadata of the tab.
**/
var displayPageAction = function (tabId, changeInfo, tab) {
    var match = regexAIESEC.exec(tab.url); // var regexAIESEC = new RegExp(/http:\/\/www.myaiesec.net\//);
    // We only display the Page Action if we are inside a MyAIESEC Tab.
    if(match && changeInfo.status == 'complete') {
        //We send the proper information to the content script to render our app.
         chrome.tabs.sendMessage(tab.id, {load: true}, function(response) {
            if(response) {
                //After successfully getting the response, we show the Page Action Icon.
                chrome.pageAction.show(tab.id);     
            }
        });
    }
};

This is an example of when to show a Page action after the tabs was updated. In a previous code:

chrome.tabs.onUpdated.addListener(displayPageAction);

You can read more about Content Security Policy for Chrome Extensions here and more about Message Passing here.

Upvotes: 1

Sudarshan
Sudarshan

Reputation: 18534

a) document.write("<script type='text/javascript' src='" + url + "'></script>"); will not work in background.js because your document is document of background page.Refer documentation and architecture

b) chrome.extension.getURL(url); retrieves relative url of file, you can try tabs API instead

I was able to inject a Jquery to any arbitrary page with following code, do you have permissions set correctly?

References

a) Content Scripts

b) Manifest Version 2

c) tabs API

d) Background Pages

manifest.json

{
"name":"Script Injection Demo",
"description":"This demonstrates Script Injection",
"version":"1",
"manifest_version":2,
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["myscript.js"]
    }
  ]
}

myscript.js

//Creating a Script Tag
var _scriptTag = document.createElement('script');
//Referencing external URL
_scriptTag.src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js';
//Appending child
(document.head||document.documentElement).appendChild(_scriptTag);

Let me know if this sort of injection does not work for you.

Upvotes: 0

Related Questions