Intercom Messenger inside Google Chrome Extension

Hi fellow developers!

My name is Andrei and I’m working at EyeQuant. I am creating currently a Google Chrome Extension for one new product and, because on our website we use Intercom to track various events and communicate with customers, there was this requirement of having the Intercom Messenger at the extension level.

Now, despite the fact that Intercom Messenger is quite simple and straightforward to implement:

<script>
    window.intercomSettings = {
     app_id: "{app_id}"
   };
</script>

<script src="link_to_script/{app_id}"></script>
<script>
window.onload = () => {
    window.Intercom("update",   window.intercomSettings);
}
</script>

Inside a page of chrome extension things will not just work out of the box, mainly because of the content security policy.

After some research and mostly after reading this: https://www.intercom.com/help/en/articles/3894-using-intercom-with-content-security-policy I was able to set it up correctly.
The procedue requires re-formatting those options for the content_security_policy section of the google chrome extension manifest.

I am not sure if those are a subject of change but here is a small tool to convert them easily:

var s = ` i _can_t_show_you_because_it_contins_more_than_2_links_and_i_am_not_allowed_to_have_them but copy it from the abose csp help page'`;
var o={};
var last=null;

s.split("\n").forEach(l => {
  var m;
  if(m=l.match(/^\ +(.*)$/)) {
        o[last].push(m[1])
  }else if(m=l.match(/^(.*)\:$/)){
        last = m[1]; o[last] = [];
  }
   
});

s='';
Object.keys(o).forEach(key => {
    s+= `${key} ${o[key].join(' ')};`
})

console.log(s);

Eventually this will output something like:

 onnect-src i_can_t_show_you_because_it_contins_more_than_2_links_and_i_am_not_allowed_to_have_them;

This is a good start for the manifest but will need some additions, mainly related to adding the defaults of your domain or ‘self’ as well as the policies for object-src ‘self’ your_domain_mask;

My final one, for development environment, looks like this:

"content_security_policy": "object-src 'self'  i _can_t_show_you_because_it_contins_more_than_2_links_and_i_am_not_allowed_to_have_them"

and finally the Intercom Messenger pops up in a window loaded from the chrome-extension:// space.

I hope this will help some trouble someone else out there :wink: