Retrieve DataLayer from Chrome extension scope

[Spriithy]

Hey there, I was wondering how you managed to extract the dataLayer content from the tab given the fact that the JS runtime of the chrome extension is sandboxed and therefore doesn't share states with the page ?

Thanks in advance

[sean-adams]

It's a little bit of a mess because of the different permissions / APIs that various scripts get access to, the basic data flow is:

• A content script (https://github.com/sean-adams/dataslayer/blob/master/src/content.js) manually injects another script (https://github.com/sean-adams/dataslayer/blob/master/src/inject.js) which has access to the page scope
• The injected script communicates with the content script via postMessage
• The content script forwards these messages to the event page (https://github.com/sean-adams/dataslayer/blob/master/src/event.js) via chrome.runtime.sendMessage
• The event page forwards these messages to the ports opened by the DevTools instance of the extension via chrome.runtime.connect

[Spriithy]

Well, that's a whole lot to do just to gain access to a dataLayer ...

[Spriithy]

Anyways, thank you for your kind and detailed answer. I will do my best to mirror these effects in a lesser scale. Thanks!

[sean-adams]

Yeah, unfortunately it is the result of the sandboxing and the various APIs. If you're building an extension that doesn't add a DevTools panel it will be a bit easier as you won't have to worry about the last step-- but I haven't found any other way to gain access to variables in the page scope other than injecting a script tag. Best of luck!

[Spriithy]

To be clear, I am aiming to watch the dataLayer content for a chrome extension which purpose is only limited to one use. We aim at pitching a recommendation tool based on ecommerce data for a website and will use the extension to create a demo on a real session.

I would gladly take any shortpath you have to just retrieve a GTM dataLayer object the dirty way, just so I get the data inside it. Thanks anyways... !

[sean-adams]

Based on that use case it sounds like you may be able to get away with only using a content script and the injected script-- I would review the code for those in dataslayer and see what you can create based on them. The injected script probably won't have to be modified at all unless you want to remove support for non-GTM data layer objects. The actions taken on datalayer objects are in the following lines of the content script: https://github.com/sean-adams/dataslayer/blob/master/src/content.js#L20-L38

[Spriithy]

It seems the document.head.appendChild(dataslayers); statement fails in my actual config. Moreover, the only items caught by the handler here are
{chrome://extensions/: "yellow"} like objects.

Error for the head is

  | (anonymous) | @ | extract.js:9
  | safeCallbackApply | @ | VM10032 extensions::…xception_handler:27
  | handleResponse | @ | VM10033 extensions::sendRequest:67

it says line 9 because I have scrapped away the first if statement and the oo_poly things.

[sean-adams]

This is getting a little bit beyond the scope of this issue so I will have to leave you on your own shortly 😄 but make sure your extension manifest declares the appropriate permissions and web_accessible_resources-- see https://github.com/sean-adams/dataslayer/blob/master/src/manifest.json

[sean-adams]

Also you will probably need to keep oo_poly, this is a shim for Object.observe support which was removed from Chrome but we are still using to monitor the dataLayer.

[Spriithy]

Okay, problem solved: adding the web_accessible_ressources field for inject.js made it!

Thanks again for such a precious help.

[sean-adams]

De rien 😄

[ReenaVerma]

HI There - @sean-adams @Spriithy ,

I'm facing exactly the same problem... unable to access the dataLayer from my chrome extension. (I simply want to access and loop through the data).

The links above are broken though... was wondering if you came up with a solution?

Thank you!
Reena