- To get started, first install project dependencies using
npm install
. - Then create a project or select a project using
npm run cli
. - Then start the dev server using
npm run dev
. - Use
npm run build
to build thedist
directory after finishing the local development.
- To get started, first install project dependencies using
npm install
. - Then create a project manually using GUI (Graphical User Interface).
- Then write project path to
_project-path.txt
file in the root directory. - Then generate project boilerplate code using
npm run generate
or you can copy all the template files fromvariation-template
directory manually. - Now run
npm run dev
to start local development. - Use
npm run build
to build thedist
directory after finishing the local development.
-
Install chrome extension User JavaScript and CSS.
-
Once User JavaScript and CSS chrome extension has been installed, click the extension icon to setup a new script. Within the extension, copy and paste the following code into the JS pane and press
ctrl + s
to save the script.
// Set which variation to show to the page
const variation = 1;
// Set `abtest` cookie if you visit a page with `abtest` string in the url anywhere
if (document.location.href.includes("abtest")) {
document.cookie = "abtest=true; path=/; max-age=60*60*24";
}
// Check if `abtest` cookie available or the url contains string `abtest`
if (
document.cookie.includes("abtest") ||
document.location.href.includes("abtest")
) {
void (function injectCSS() {
const link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.href = `http://localhost:8080/variation-${variation}.css`;
document.head.appendChild(link);
})();
void (function injectJS() {
const script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.src = `http://localhost:8080/variation-${variation}.js`;
document.body.appendChild(script);
})();
void (function injectLiveReloadScript() {
const script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.src = "http://localhost:35729/livereload.js?snipver=1";
document.body.appendChild(script);
})();
console.log("Saabbir:", "UserScript is running!");
}
You won't need to worry about the code above. It won't change and it will be the same for all the time. It just injects your variation CSS and JavaScript along with livereload script to your target URL page.
- Give this script a name and a target URL where you want your variation to run.
To check currenty working project path/directory, run:
npm run pwd
You may need some CSP disable extension to run the livereload script on some sites. To disable CSP in Chrome, use an extension like: Disable CSP Extension for Chrome