Fake Data Documentation

Run code in Content Script MV2

Each web extension can execute their internal code in two different contexts: in a background page, or in as content scripts.

The difference between a background page and a content script

The background page is a page that runs in the background (duh) and is isolated from the rest of the tabs that you have opened. This page is not visible, and you cannot directly interact with it. The code that is run in the background page can interact with different functions of the browser (not of the webpage). There can be only one background page per extension.

The content scripts on the other hand, are executed in the context of the web page that you are viewing. Running code in content scripts will give access to the web page in which it is triggered, and can manipulate DOM elements.

The context of executed code in Fake Data

WARNING

This part is only true for the MV2 version of Fake Data! If you are using a MV3 version, please go to this page.

Fake Data executes your code in the background page. This means that you cannot directly access DOM elements. If you need to do that, there is a workaround available.

Instead of returning the actual value from your code, you can return a function that will return the value you want.

Let's see exactly what that means by re-using the Hello world example and adding some debug messages into it:

console.log('Can you see me?'); // this will not be visible in the console of the page
return 'Hello, world!';

With the above code, you will be able to insert the text "Hello, world!" inside an input field, which means that it is executed correctly, but if you open the browser's console, you will not be able to see the message there from the console.log function.

That's because the code is executed in the background page, which you cannot directly interact with.

Now let's modify the above code and tell Fake Data to execute it in the content script:

return function() {
	console.log('Can you see me?');  // this will be visible in the console of the page
	return 'Hello, world!';
}

As you can see, the codes are pretty similar. The only difference is that we returned a function. If you try to trigger that generator, you will see the same "Hello, world!" text being filled, but additionally you will be able to see the console message.

TIP

Running code in content scripts will give you access to DOM elements, so you can manipulate the page in any way you want.

Accessing the filled input element

When you fill a form, chances are that there are multiple input fields in the page. In order to allow you to get the one that was just filled by your custom generator, Fake Data will pass the DOM element as first argument to the function that you returned:

return function(element) {
	element.style.backgroundColor = '#000';
	element.style.color = '#fff';
	
	return 'Hello, world!';
}

The above custom code will fill the input element with the text "Hello, world!", and it will also change its background color to black and text color to white.

Passing variables from background page to content script

Running code in the content script is cool and have its own advantages, but there are disadvantages as well. One disadvantage is that the Faker library is only available in the background page. This means that the following code will not work:

return function() {
	let name = faker.person.firstName(); // ReferenceError: faker is not defined
	return 'Hello, ' + name + '!';
}

But of course there is a workaround for that too. It's a little ugly, though. Instead of returning a function, you will return an array with elements in the following format:

  • the first element must be the function that you want to be executed
  • the next elements will be the values that are passed to the function's arguments
let first_name = faker.person.firstName();
let last_name = faker.person.lastName();

return [function(element, value_1, value_2) {
	element.style.backgroundColor = '#000';
	element.style.color = '#fff';
	
	return 'Hello, ' + value_1 + ' ' + value_2 + '!';
}, first_name, last_name];

The above example will still turn the input in black and white colors while filling it with random names from Faker library. Cool, right?