Enabling and modifying Chome Extensions in default NightWatch browser instance (specifically ModHeader extension)

Question

I am using NightWatch.js and for some UI tests and I want to start the default browser instance with the some extra desiredCapabilities (i.e. an extension is enabled with some specific values applied).

Note: I can perform the actions but not within the default browser instance.

To be totally clear, doing the actions manually looks like: Link to Extension: https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj

I am able to enable the extension and also update the values using this command stored inside a pageObject file:

setChromeOptions(url) {
  const chromeCapabilities = webdriver.Capabilities.chrome();

  // setting chrome options
  const chromeOptions = {
    args:

    // path to local ModHeader extension
    ['--load-extension=/Users/raja.bellebon/AppData/Local/Google/Chrome/User Data/Default/Extensions/idgpnmonknjnojddfkpgkljpfnnfcklj/2.1.2_0/'],
  };

  chromeCapabilities.set('chromeOptions', chromeOptions);
  const driver = new webdriver.Builder().withCapabilities(chromeCapabilities).build();
  driver.get('chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj/_generated_background_page.html');

  // setup ModHeader extension with the header value
  driver.executeScript(`
    localStorage.setItem('profiles', JSON.stringify([{ /* eslint-env browser*/
      title: 'Selenium',
      hideComment: true,
      appendMode: '',
      headers: [
      { enabled: true, name: 'X-Static-Homepage', value: 'true' },
      ],
      respHeaders: [],
      filters: [],
    }]))`);
  driver.get(url);
  return this;
}

The function is called at the beginning of the test (as first step or inside a before). When I execute the code, a second browser window opens and the actions are performed inside. Meanwhile, the main (or default) browser instance has no extension. How can I modify extensions within the main browser instance?

After reading a few blogs, I found that I may need to modify the conf.js and apply my code there but I am not able to get/modify the current driver.

I am stuck with a massive headache... Any help would be appreciated, Thanks!

Hey, thanks for your answer! Are you sure it works ? I remember that I was able to start the page with the modHeader set..but unfortunately I had two tabs opened one with the headers set and the one where my test was executed...If you have only one tab and the test is executed within the page with the header set - Nice!!! — Raja, Sep 27 '17 at 21:10

score 4 · Accepted Answer · answered Sep 26 '17 at 05:34

Sorry for the late reply. I just figured out how to do it, so wanted to share if you need it in future.

Firstly, in your nightwatch.json file, set desired capability as shown below:

"desiredCapabilities": {
    "javascriptEnabled": true,
    "acceptSslCerts": true,
    "browserName": "chrome",
    "chromeOptions": {
      "args": ["--load-extension=/home/pratik/.config/google-chrome/Default/Extensions/idgpnmonknjnojddfkpgkljpfnnfcklj/2.1.2_0"]
    }
  }

Then in your test,

before: (client) => {
  modHeaderPage = client.page.modHeaderPage();
  modHeaderPage.setHeader();
  homePage = client.page.homePage();
}

And your page object would look as below:

module.exports = { 
  elements: {},
  commands: [{
    setHeader() {

      // set the context on the extension so the localStorage can be accessed
      const url = 'chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj/2.1.2_0/settings.tmpl.html'; // modHeader extension
      this.navigate(url).waitForElementPresent('body', 20000);

      // setup ModHeader with header
      this.api.execute(`
        localStorage.setItem('profiles', JSON.stringify([{ /* eslint-env browser*/
          title: 'Selenium',
          hideComment: true,
          appendMode: '',
          headers: [
            { enabled: true, name: 'Header_Name', value: 'Header_Value' },
          ],
          respHeaders: [],
          filters: [],
     }]))`);
    },
  }],
};

Hey, mate, i think that you saved my life. I have taken this as basis to adapt the same idea on protractor, and works like a charm. — Farmijo, Aug 23 '18 at 12:12
@Farmijo could you please share your protractor example. I have been struggling with this to add it to my protractor framework — Monnie_tester, Mar 12 '19 at 05:44

A_GUEST · Answer 2 · 2021-04-08T18:50:53.310

The selected answer doesn't seem to work with the newest version of Mod Headers. There is a selenium version of modheaders now, I tried using that and it still didn't work so what I did was:

Found where my extensions lived: Where to find extensions installed folder for Google Chrome on Mac?
Went to the installed version of my extension: chrome://extensions/?id=idgpnmonknjnojddfkpgkljpfnnfcklj
Clicked on Pack Extension on the top left (may move depending on version of chrome)
Where it says "Extension root directory" I entered the location found in step 1 and clicked "Pack Extension"
Took the crx file created in the directory from step 1, moved it into my repo under /extensions/modheader.crx (renamed the crx here)
in nightwatch.conf.js added:

const fs = require('fs');
const stream = fs.readFileSync(`${__dirname}/extensions/modheader.crx`);
const modHeader = Buffer.from(stream).toString('base64');
...
  desiredCapabilities: {
    javascriptEnabled: true,
    acceptSslCerts: true,
    browserName: "chrome",
    chromeOptions: {
      extensions:[modHeader],
    }
  }

Added a modHeaderPage like the selected answer:

module.exports = {
  elements: {
  },
  commands: [{
    setHeader() {
      const url = 'chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj/popup.html'; // modHeader extension
      this.navigate('https://www.google.com'); // needs to hit a non extension page before the extension, don't matter what it is
      this.navigate(url).waitForElementPresent('body', 20000);
      // Uses Nightwatch Apis to add header information
      this.api.setValue('input[placeholder="Name"]', 'HEADER_NAME');
      this.api.setValue('input[placeholder="Value"]', 'HEADER_VALUE');
    },
  }],
};

In setup file I added:

module.exports ={
  beforeEach: async (browser, done) => {
    const modHeaderPage = browser.page.modHeaderPage();
    modHeaderPage.setHeader();
    // more code
    done();
  }

And am now able to use the extension to add headers to my requests. Hopefully this will help someone else, took way too long to get this to work :D

Down side is headless doesn't work with extensions...

Is it possible to run Google Chrome in headless mode with extensions?

Enabling and modifying Chome Extensions in default NightWatch browser instance (specifically ModHeader extension)

2 Answers2