growthbook / devtools Goto Github PK

Given we have a new chrome extension architecture,

When we port the existing devtools code into it,

Then it should work as it did in the previous chrome extension

I've added the Javascript SDK to our bundle with web pack. The dev tools can read the features and user attributes no problem, but overriding the Current Value in dev tools doesn't seem to change the feature value.

Javascript Setup:

import { GrowthBook } from "@growthbook/growthbook";

const gb = new GrowthBook({
  apiHost: "https://cdn.growthbook.io",
  clientKey: "******************",
  enableDevMode: true,
  subscribeToChanges: true,
  trackingCallback: (experiment, result) => {
    // TODO: Use your real analytics tracking system
    console.log("Viewed Experiment", {
      experimentId: experiment.key,
      variationId: result.key
    });
  }
});
window.gb = gb; // Expose for debugging

...

gb.setAttributes({
  id: cartToken,
  email: window?.userAttributes?.email,
  customerId: window?.userAttributes?.customerId,
  totalSpent: window?.userAttributes?.totalSpent,
  ordersCount: window?.userAttributes?.ordersCount,
  tags: window?.userAttributes?.tags,
  country: Shopify.country,
  locale: Shopify?.locale,
  currency: Shopify?.currency?.active,
  url: window.location.href,
  userAgent: navigator.userAgent,
  screenWidth: window.innerWidth,
  screenSize: screenSize,
  themeId: Shopify.theme.id,
  themeName: Shopify.theme.name,
  themeRole: Shopify.theme.role
});


//===========================
// setup growthbook
//===========================

export const setupGrowthbook = async function(){

    // Wait for features to be available
    await gb.loadFeatures();

    const value = gb.getFeatureValue("google-top-quality-store");
    console.log("google-top-quality-store", value);

}

Heres the devtools screen:

The feature never shows as a force feature value:

I've been digging through to code to try and find the method by which these are getting set. It seems theres something with messages sent to the window so I started logging any related to GB

window.addEventListener("message", function (event) {
  const data = event.data;
  if(data?.type?.startsWith("GB_")){
    console.log(data);
  }
});

but I only get one message:

{
	attributes: {id: '31295c7d037d94ba9af407aee0fb2eba', email: undefined, customerId: undefined, totalSpent: undefined, ordersCount: undefined, …}
	experiments: {}
	features: { 
		google-top-quality-store : {defaultValue: false, rules: Array(1)}
	}
	overrides: {},
	type: "GB_REFRESH"
}

which also appears to have no overrides.

It would be helpful to enable the debugging capabilities in React Native.

When using the devtool extension I get this error in my browser console. Goes away when disabled.

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

As the title says, opening the devtools (with the plugin correctly enabled) in chrome's incognito mode the user is presented with the "Trying to connect to page's GrowthBook SDK" message.

This issue seems consistent across Chromium based browsers.

Chromium Engine Version: 121.x/122.x
GrowthBook devtools plugin Version: 0.3.6

When viewing the site https://preview.tandlakare.se/ the DevTools panel shows fine, but upon navigating to another page from a link on the current page, it begins flashing uncontrollably.

Problem: Currently, if a user has multiple tabs open with each tab running an instance of the GrowthBook JS SDK, the GrowthBook DevTools extension will behave unexpectedly. This is due to the DevTools extension indiscriminately selecting the first tab it finds to communicate with.

DevTools extension upon opening (syncs with current tab's GrowthBook SDK)

DevTools extension upon opening a 2nd tab with it's own GrowthBook SDK (extension syncs with recently opened tab)

Proposed solution: Ensure messages are contained between tab and content script and background script target the inspected window.

Implementation:

1. See example solution provided by contributor

Related bug #39

Hi,

I'm using the devtools while using Chrome DevTools in a separate window pop out but the feature flag values aren't updating.

I think this is caused by the function sendMessage in controller.ts not being able to find the correct tab, as it's no longer the currentWindow - the DevTools window is.

I've cloned and tested the following solution, and I believe it works as expected. Let me know if you'd prefer me to open a pull request.

Current

function sendMessage(msg: Message) {
  chrome.tabs &&
    chrome.tabs.query(
      {
        active: true,
        currentWindow: true,
      },
      (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id || 0, msg);
      }
    );
}

Suggestion

function sendMessage(msg: Message) {
    if (chrome.tabs && chrome.devtools?.inspectedWindow) {
        const  { tabId } = chrome.devtools.inspectedWindow;
        chrome.tabs.sendMessage(tabId || 0, msg);
    }
}

Problem: Users don’t know if URL targets are working when they make edits in the Visual Editor. Only when loading the SDK and experiment do they find out, and it’s hard to debug.

Proposed solution: Add an indicator to the Visual Editor that displays whether or not the URL targeting rules for a given experiment are targeting the current page being edited.

Steps to implement

1. Ensure the visual editor can load URL targeting rules of an experiment. (Needs to happen in fetchVisualChangeset in src/background.ts ) Might already be included in payload from API but if not, we need to make changes to GB backend to include them.
2. Leverage GrowthBook JS SDK util isURLTargeted to determine if any of the URLs target the current loaded page URL. (If the GB JS SDK is not installed it is OK to add as a dependency to Visual Editor)
3. Render UI in the Visual Editor that is minimal but effective in alerting the user when no URL targets target the currently loaded page URL

Try adding the following css via global CSS tab on the Visual Editor:

html {
  background-color: red;
}

On any site including the following:

• https://growthbook.io
• https://www.jumbointeractive.com/

The CSS will attempt to reset itself and eventually the editor will crash

Add CI/CD workflows:

• build
• unit tests
• package and upload as build artifact to the Github Action workflow run

Based on this discussion: #8 (comment)

Our current chrome extension (https://github.com/growthbook/devtools) is built around a single feature - the GrowthBook devtools panel.

It's current architecture is built on create-react-app that is pointed to build the DevTools panel UX.

We need to extend the development and build pipeline to allow for the development of multiple build targets (and not just a single react app).

This task is to forge a new chrome extension with an architecture that cleanly supports multiple features with different build targets.

Example build targets:

• Devtools panel
• Popup menu
• Visual Editor UX
• Options menu

Add support for Storybook in the devtools. Currently we need to build and reload the extension which creates a slow end-to-end workflow. Allow rapid prototyping with Storybook.

Problem: Currently, when inspecting a Visual Experiment, if the Visual Experiment has multiple visual changesets, the DevTools extension will only render one of them.

Example Experiment w/ multiple visual changesets

DevTools rendering only one of them

Proposed solution: Ensure we render all visual changesets for an experiment and highlight the one that currently targets the page URL. (If none target the URL, notify the user via a small alert in the DevTools UI).