UPDATE: The BlueConic Chrome Extension will be updated to meet Google Chrome’s new Manifest V3 requirements. You may need to make updates to the extension starting June 17th, 2025 depending on your use case:
If you use the Google Chrome Extension to remove headers and CSP restrictions to use the simulator, dialogue editor, or visual picker, you will not have to take any action.
If you use the Google Chrome Extension to preview and test Dialogues or Listeners locally on your browser, you will have to manually insert a script into the extension setup to enable it to function as expected. Read the "Set up the extension" section for guidance.
The BlueConic Chrome Extension allows you to work with websites in your BlueConic channels—even if the BlueConic script hasn’t been deployed yet or if security settings prevent the site from displaying in the BlueConic editor, visual picker, or simulator.
By sandboxing any website in your BlueConic channels, the extension enables seamless testing and refinement of Listeners and Dialogues. If a site already has a BlueConic script, the extension overrides it with the version from your logged-in BlueConic tenant to ensure accuracy.
How the BlueConic chrome extension works
Connect to your tenant
When you log in to BlueConic, a cookie called amdatu_token is created. The extension uses this token to:
Identify the hostname of the logged-in BlueConic tenant.
Connect to the BlueConic REST API to retrieve all hostnames in your channels.
Register these hostnames for script execution.
Continuously update registered hostnames to reflect changes in your tenant.
If you log out, the token is removed. The extension then unregisters associated hostnames and channels, keeping the extension active only for authenticated users.
Script insertion
When you visit a website within your BlueConic channels:
The extension automatically injects the correct BlueConic script.
Any existing BlueConic script on the page is blocked and replaced with the correct version from your tenant.This enables immediate use of Listeners and Dialogues without needing to deploy the script directly on the site.
Visual feedback includes
A blue extension icon when BlueConic is successfully injected.
Status messages, current BlueConic environment details, and Profile IDs.
Inlining for editing and testing
Many websites block embedding in iframes due to security headers. This prevents them from being loaded in the BlueConic editor, visual picker, or simulator.
The extension resolves this by:
Detecting requests intended for tabs or iframes.
Matching URLs to known BlueConic channels.
Inspecting and modifying specific security headers, such as:
X-Frame-Options
Frame-Option
X-Content-Security-Policy
Content-Security-Policy
These headers are modified only for websites in your channels, allowing proper inlining and streamlining your experience creation and testing.
Set up the extension
Install the BlueConic Chrome extension from the Chrome Web Store.
Type chrome://extensions in the address bar.
Toggle Developer mode ON in the top right corner.
If Developer Mode is off, you’ll see an error on the extension.
Select the extension icon and pin the extension to your browser.
Click the extension icon to open a pop-up.
Paste the following code into the textbox:
(function() {
const messageId = Math.random().toString(36).substring(2);
window.addEventListener('message', function(event) {
if (event.data.source === 'blueConicExtension' && event.data.action === 'getTenantIfBcScriptRequiredResponse' && event.data.messageId === messageId) {
clearInterval(interval);
// Note that if the content script determines we should not load the BC script, this will be null.
const tenant = event.data.tenant;
if (tenant) {
console.log('-----------------------------------------------------------------');
console.log('- BlueConic Extension: Adding BlueConic script for tenant', tenant, 'in', document.location.href, window.name);
console.log('-----------------------------------------------------------------');
var bcScript = document.createElement('script');
bcScript.async = true;
bcScript.src = tenant + '/frontend/static/javascript/blueconic/blueconic.min.js?source=blueconic-browser-extension';
var containerNode = document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0];
if (containerNode.childNodes.length > 0) {
containerNode.insertBefore(bcScript, containerNode.childNodes[0]);
} else {
containerNode.appendChild(bcScript);
}
}
}
});
const maxAttemptsCount = 10;
let attemptsCount = 0;
let interval = setInterval(() => {
attemptsCount += 1;
if (attemptsCount > maxAttemptsCount) {
clearInterval(interval);
}
window.postMessage(
{
source: 'blueConicExtension',
action: 'getTenantIfBcScriptRequiredRequest',
messageId
},
window.location.origin
);
}, 250);
}());
Click outside of the textbox to close the pop-up. The extension will update, allowing you to test BlueConic on your websites.
Chrome Manifest V3 Update
Chrome’s latest update (Manifest V3) disallows remotely hosted code. While existing extensions will auto-update to the new version, you’ll need to manually insert a script that retrieves and injects the required code.
Follow the installation steps above starting with step 2.
Note: Developer Mode may conflict with your company’s security policy. If so, install the script directly on your website and use a staging environment to avoid affecting live visitors. To continue supporting this functionality after recent manifest changes, enabling Developer Mode is currently the best option identified. If you have suggestions or feedback, please reach out to our team.
Security considerations
The extension functions only for users logged in to a BlueConic tenant and only on websites within that tenant’s channels.
It operates autonomously in the user’s browser.
While it uses GET REST API calls to retrieve channel info, it does not share or log any user or visit data.
The extension sends a Chrome request every minute to track registered channels and inject scripts. These background requests may extend your session and delay or prevent inactivity-based timeouts.
Required browser permissions
The BlueConic Chrome Extension requires the following permissions:
alarms: Signals when tenant configuration needs an update.
cookies: Detects tenant cookies.
tabs: Receives request notifications in tabs/iframes.
idle: Detects user inactivity.
storage: Stores the “enabled” setting.
webRequest: Intercepts and modifies response headers.
declarativeNetRequest: Blocks and adjusts network requests.
scripting & host: Injects scripts into pages.