Chrome extension integration issue


#1

Hi Guys,

I’m getting this error in Chrome extension,

(Refused to load the script ‘http://static.clevertap.com/js/a.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ blob: filesystem: chrome-extension-resource:”.)


#2

Hey Ranjith,

Could you please elaborate where and how you’re trying to embed our javascript sdk in your extension?

Regards,
Ankit.


#3

Hi Ankit,

We tried to integrate CleverTap in chrome extension popup.

We’re not able to do that.

It throws “Content Security Policy” error

Thanks
Ashik


#4

Hey Ashik,

The JS sdk is added at the parent level and not the extension level and hence you might be getting this error. Try embedding the JS code like this and let me know.

var elt = document.createElement(“script”);
elt.innerHTML = “window.clevertap = {event:[], profile:[], account:[], notifications:[], onUserLogin:[]};window.clevertap.account.push({‘id’: ‘’})”;
document.head.appendChild(elt);

(function () {
var wzrk = document.createElement(‘script’);
wzrk.type = ‘text/javascript’;
wzrk.async = true;
wzrk.src = (‘https:’ == document.location.protocol ? ‘https://d2r1yp2w7bby2u.cloudfront.net’ : ‘http://static.clevertap.com’) + ‘/js/a.js?v=0’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wzrk, s);
})();


#5

Hi,

We tried the above file.

But we’re still getting the same error.

Do you guys support browser extensions ?


#6

Hey Ashik,

Yes. We have made it work for one of our clients. Did you try adding the following in your manifest file?

“content_security_policy”: “script-src ‘self’ https://your.co; object-src ‘self’;”

Best Regards,
Ankit.


#7

Hey Ashik,

I think it’s related to the content security setting of your chrome extension and not specifically to CT per se.

Best Regards,
Ankit.


#8

Hey Ankit,

We’ve added content_security_policy property also.

"content_security_policy": "script-src 'self' https://d2r1yp2w7bby2u.cloudfront.net; object-src 'self'",

var elt = document.createElement("script");
elt.innerHTML = "window.clevertap = {event:[], profile:[], account:[], notifications:[], onUserLogin:[]};window.clevertap.account.push({'id': 'TEST-XXX-XXX-XXXX'})";
document.head.appendChild(elt);

(function () {
	var wzrk = document.createElement('script');
	wzrk.type = 'text/javascript';
	wzrk.async = true;
	wzrk.src = ('https:' == document.location.protocol ? 'https://d2r1yp2w7bby2u.cloudfront.net' : 'http://static.clevertap.com') + '/js/a.js?v=0';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(wzrk, s);
})();

But still, it shows that error.

Are we doing anything wrong?

If you’ve any example/boilerplate for the extension please share it with us :slight_smile:


#9

We have integrated successfully CT with AngularJS in a SPA, but right now a vendor who works for our company is developing a Chrome Extension, and they are facing the same problem. Has anyone successfully integrated CT in a Chrome Extension at all?


#10

Hi @fmquaglia,

Great to hear from you!

Here is a snippet you can use to integrate CT in a Chrome Extension:

console.log("Extension is active");

var elt = document.createElement("script");
elt.innerHTML = "window.clevertap = {event:[], profile:[], account:[], notifications:[], onUserLogin:[]};window.clevertap.account.push({'id': '846-Z7Z-6K4Z'})";
document.head.appendChild(elt);

(function () {
    var wzrk = document.createElement('script');
    wzrk.type = 'text/javascript';
    wzrk.async = true;
    wzrk.src = ('https:' == document.location.protocol ? 'https://d2r1yp2w7bby2u.cloudfront.net' : 'http://static.clevertap.com') + '/js/a.js?v=0';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wzrk, s);
})();

function raiseEvent(name, properties){
    var elt = document.createElement("script");
    var evtData = 'window.clevertap.event.push("' + name + '",'+ properties + ');';
    elt.innerHTML = evtData;
    document.head.appendChild(elt);
}

var eventName = "testevent";
var property = {
    "property1":"from gmail",
    "property2":"again from gmail",
    "property3":"again again from gmail"
};

var user = {
    "Site": {
        "Name": "Blah blah",            // String
        "Identity": 6102,              // String or number
        "Email": "blah2@gmail.com",         // Email address of the user
        "Gender": "M",                     // Can be either M or F
        "Employed": "Y",                   // Can be either Y or N
        "Education": "Graduate",           // Can be either School, College or Graduate
        "Married": "Y",                    // Can be either Y or N

// optional fields. controls whether the user will be sent email, push etc.
        "MSG-email": false,                // Disable email notifications
        "MSG-push": true,                  // Enable push notifications
        "MSG-sms": true                    // Enable sms notifications
    }
};


function raiseOnUserLogin(user){
    var elt = document.createElement("script");
    var evtData = 'window.clevertap.onUserLogin.push(' + user + ');';
    elt.innerHTML = evtData;
    document.head.appendChild(elt);
}


raiseEvent(eventName, JSON.stringify(property));
raiseOnUserLogin(JSON.stringify(user));

Please let us know how this goes for you.

Best,
Sumitra


#11

Hola Sumitra!

Thank you very much for the code sample!
I’ll give it to our vendor.
You guys rock! :heart_eyes:


#12

This error is very much common in Windows 7 and I have faced this issue for a few times and this error is mainly categorized under the Windows update error code 8007000e and it can easily be solved by just updating the Windows properly and reinstalling the browser.